【JS・TS】コーディングTips集

# 概要

JavaScript/TypeScriptを書く中で、自分自身の気づき、他の方から頂いたアドバイスをメモとして残してきました。
その中で、使用頻度が高そうで、知っていれば誰でも簡単に実践できる物を抜粋して記事にしました。
ですので、主にJavaScript/TypeScriptの使用歴が浅い(プログラミングの歴が浅い)方向けに少しでも参考になれば幸いと考えています。

(※JS/TSに限った事では無いものも含まれます。また、こちらに記載した記法が必ずしも優れていると言うわけではありません。本記事はあくまでも、JS・TSを利用した際にこんな記法もあるよという紹介が主要点です。)

# 早期returnを利用する

条件を満たす場合に直ぐに return することで、コードのネストを減らし、コードの見通しを良くするテクニックです。
簡単な例としまして下記のコードが、

```tsx
const checkNumber = (num: number) => {
    if (num === 2) {
       return "2です。"
    } else {
       return "2以外です。"
   }
}
```

この様に書き換えられます。

```tsx
const checkNumber = (num: number) => {
    if (num === 2) return "2です。"

    return "2以外です。"
}
```

# 分割代入を利用する

```tsx
const user = {
    name: "Name1",
    age: 23,
    userName: "User1"
}

console.log(user.name, user.age, user.userName)
```

が、下記の様に書き換えられます。

```tsx
const user = {
  name: 'Name1',
  age: 23,
  userName: 'User1',
}
// Object Destructuring
const { name, age, userName } = user

console.log(name, age, userName)
```

上記以外でも分割代入を使用する事で色々な事ができます。
下記に色々なパターンがリストされています。

- 参考: [Destructuring assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)

# アロー関数をより簡潔に

```tsx
const hoge = () => {
  return 'HOGE'
}
```

は`{}`と`return`を省略して下記の様に書き換えられます。

```tsx
const hoge = () => "HOGE"
```

# filterメソッドで配列から空のstringを取り除く

```tsx
const hogeArray = ['hoge1', 'hoge2', ''].filter(string => string)

console.log(hogeArray) //=> ["hoge1", "hoge2"]
```

[コメント](https://qiita.com/k-penguin-sato/items/81fbf561d2c4b68c74cc#comment-3d21d8f959bfbc7453e8)で頂きましたが、下記のような書き方も可能です。

```tsx
const hogeArray = ['hoge1', 'hoge2', ''].filter(Boolean)
```

# 短絡評価(Short Circuit Conditionals)を駆使する

下記のコードは`isAvailable`が`true`ならば`addToCart`メソッドを実行しています。

```tsx
if (isAvailable) {
  addToCart()
}
```

上記はこの様に書き換える事ができます。

```tsx
isAvailable && addToCart()
```

# 変数をオブジェクトのキーとして利用する

下記の様に `[ ]` で変数を囲ってあげましょう。

```tsx
const key = "name"

var obj = {
  [key] : "Name",
}

console.log(obj) //=> { "name": "Name" }
```

# 条件付きで変数を設定する

下記のコードではtimezoneに初期値を与え、userがpreferredTimezoneを持つ場合にはその値を上書きしています。

```tsx
let timezone = 'EastAsia/Tokyo'

if (user.preferredTimezone) {
  timezone = user.preferredTimezone
}
```

上記はこの様に書き換える事ができます。

```tsx
const timezone = user.preferredTimezone || 'EastAsia/Tokyo'
```

# nullとundefinedの両方を確認する

`value === null` ではなく、`value == null` を使用してあげましょう。

```tsx
const nullCheck = (v: any) => {
	return v === null
}

const nullAndUndfinedCheck = (v: any) => {
   return v == null
}

// nullCheck
nullCheck(undefined) //=> false
nullCheck(null) //=> true

// nullAndUndfinedCheck
nullAndUndfinedCheck(undefined) //=> true
nullAndUndfinedCheck(null) //=> true
```

参考: [Is there a way to check for both `null` and `undefined`?](https://stackoverflow.com/questions/28975896/is-there-a-way-to-check-for-both-null-and-undefined)

# 特定のプロパティのみオブジェクトから抜き出す

必要なプロパティのみを抜き出す事ができます。

```tsx
const object = { a: 5, b: 6, c: 7 }
const picked = (({ a, c }) => ({ a, c }))(object)

console.log(picked) // { a: 5, c: 7 }
```

もしくは分割代入を使用する事で、下記の様に抜き出せます。

```tsx
const obj = {
  name: 'Fenton',
  age: 21,
}

let { age, ...subset } = obj

console.log(subset) //=> { "name": "Fenton" }
```

# if文の簡略化にオブジェクトを使用する

```tsx
const howIsBoo = (state) => {
  if (state === 'HUNGRY') return 'WANTS FOOD';
  if (state === 'SAD') return 'CRYING';
  if (state === 'HAPPY') return 'LAUGHING'
  return 'SLEEPING'
}
```

はオブジェクトを使用する事で、下記の様に書き換えが可能です。

```tsx
const booFeelsTable = {
  HUNGRY: 'WANTS FOOD',
  SAD: 'CRYING',
  HAPPY: 'LAUGHING',
}
const howIsBoo = state => booFeelsTable[state] || 'SLEEPING'
```

# 変数を正規表現で使用する

下記のように、`new RegExp` でRegExpのオブジェクトを作成することで使用可能です。

```jsx
var replace = 'regex'
var re = new RegExp(replace, 'g')
'mystring'.replace(re, 'newstring')
```

[How do you use a variable in a regular expression?](https://stackoverflow.com/questions/494035/how-do-you-use-a-variable-in-a-regular-expression)

# 参考

[JS-TS Tips | K-Sato's Blog](https://k-sato-0130.com/js-ts-tips/)