🦚

【JavaScript】便利だけど忘れがちな構文

2021/09/22に公開

Switch文を使わずに書く

let colorCode = ''
const colorName = 'blue'

switch (colorName) {
   case 'red':
      colorCode = '#FF0000'
   break;
   case 'blue':
      colorCode = '#0000FF'
   break;
   case 'green':
      colorCode = '#008000'
   break;
}

console.log(colorCode) // #0000FF

上記と同じ処理を短く書けます

const COLOR_NAME = {
  RED: 'red',
  BLUE: 'blue',
  GREEN: 'green'
}

const color = {
  [COLOR_NAME.RED]: '#FF0000',
  [COLOR_NAME.BLUE]: '#0000FF',
  [COLOR_NAME.GREEN]: '#008000'
}

console.log(color[COLOR_NAME.BLUE]) // #0000FF

配列内の最大値と最小値を取得

const arr = [1, 2, 3]
Math.max(...arr) // 3
Math.min(...arr) // 1

配列の結合

const arr = [4, 5, 6]
const result = [1, 2, 3].concat(arr)
console.log(result) // [1, 2, 3, 4, 5, 6]

スプレッド構文で短く書けます

const arr = [4, 5, 6]
const result = [1, 2, 3, ...arr]
console.log(result) // [1, 2, 3, 4, 5, 6]

複数条件の比較

const num = 3
const reslut = 1 === num || 2 === num || 3 === num
console.log(reslut) // true

includes()メソッドで短く書けます

const num = 3
const reslut = [1, 2, 3].includes(num)
console.log(reslut) // true

配列の重複削除

const arr = [1, 2, 3, 4, 1, 3]
const result = new Set(arr)
console.log(Array.from(result)) // [1, 2, 3, 4]

配列からの代入

const arr = [1, 2, 3]
const second = arr[1]
const third = arr[2]

console.log(second) // 2
console.log(third) // 3

上記と同じ処理を分割代入を使うことで短く書けます

const arr = [1, 2, 3]
const [, second, third] = arr

console.log(second) // 2
console.log(third) // 3

配列内の値の合計値を出す

const total = [1, 2, 3].reduce((previous, current) => previous + current, 0)
console.log(total) // 6

undefinedとnullの判定

let target = undefined

if (target === undefined || target === null) {
    target = 'undefinedまたはnullです'
}

console.log(target) // undefinedまたはnullです

Null合体演算子を使うことで短く書けます

const target = undefined

const reslut = target ?? 'undefinedまたはnullです'

console.log(reslut) // undefinedまたはnullです

文字の改行

const str = 'Zennはエンジニアのための新しい情報共有コミュニテ\n'
          + 'ィです。 誰かのために、自分のために知見を共有しましょう。'

\n や + を使わなくても改行できます

const str = `Zennはエンジニアのための新しい情報共有コミュニテ
ィです。 誰かのために、自分のために知見を共有しましょう。`

for文

const arr = [1, 2, 3, 4];
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i])
}

for...in文で短く書けます

const arr = [1, 2, 3, 4];
for (let val in arr) {
  console.log(val)
}

連番の配列を生成

const array = []
for (let index = 1; index <= 30; index++) {
 array.push(index)
}
console.log(array)

上記と同じ処理を短く書けます

const array = [...Array(30).keys()].map((i) => ++i)
console.log(array)

様々な型変換

文字列に変換

const num = 1

console.log('' + num)
console.log(num.toString())
console.log(String(num))

数値に変換

const str = '1'

console.log(+str)
console.log(parseInt(str, 10))
console.log(Number(str))

真偽値に変換

const num = 1

console.log(!!num)
console.log(Boolean(num))

文字列の置換

1月1日を2月2日に置換したい場合（条件にヒットする全ての文字列の置換）

const str = '1月1日'
console.log(str.replace(/1/g, '2')) // 2月2日

これまで条件に一致する全ての文字列を置換するには正規表現の利用が必要でした。正規表現を利用しないと最初の箇所のみ置換されます。

しかし、ES2021の仕様でreplaceAll()メソッドを利用出来るようになり、簡単に書くことが出来るようになります。

const str = '1月1日'
console.log(str.replaceAll('1', '2')) // 2月2日

論理和代入（||=）

falsyである場合にのみ代入を行います。常に代入が行われるx = X || yと同義ではありません。

let a = true
let b = false

a ||= 1
b ||= 2

console.log(a) // true
console.log(b) // 2

配列の最後の要素を取得

const arr = [1, 2, 3, 4]
console.log(arr[arr.length - 1])

at()メソッドを使うと短く書けます。

const arr = [1, 2, 3, 4]
console.log(arr.at(-1))

しかし、数値以外を入れると最初の要素を返してしまうため、扱いに注意が必要です。

const arr = [1, 2, 3, 4]
console.log(arr.at('foo')) // 1
console.log(arr.at(NaN)) // 1

プロパティの存在をチェック

const foo = { first: 1, second: 2,  third: 3 };

console.log(Object.keys(foo).indexOf('third') !== -1) // true
console.log(foo.hasOwnProperty('third')) // true
console.log('third' in foo) // true

console.log(Object.keys(foo).indexOf('zero') !== -1) // false
console.log(foo.hasOwnProperty('zero')) // false
console.log('zero' in foo) // false