初見でわかりづらいJS記法まとめ

概要

初見で理解し辛かったJSの記法についてまとめます。

参考

以下の書籍を参考に勉強しています。良著です。
りあクト! TypeScriptで始めるつらくないReact開発 第3.1版【Ⅰ. 言語・環境編】

分割代入

const baseBallBear = { type: j-rock, member: 3 }

const { type, member } = baseBallBear;

// keyに対応する値が入る
console.log(type, member); // j-rock 3

プロパティ名のショートハンド

const humbertHumbert = folk;

const acousticBand = { humbertHumbert };

// 定数名だけを{}内に書くと、定数名と値が対応した連想配列になる。
console.log(acousticBand); // { humertHumbert: folk }

オプショナルチェーン ?.

  • 参照が nullish (null または undefined) の場合にエラーとなるのではなく、式が短絡され undefined が返される
  • rubyのぼっち演算子にイメージ近い。
const domico = {
  guitar: {
    firstName: 'Hikaru',
    lastName: 'Sakashita'
  },
  drums: {
    firstName: 'Keita',
    lastName: 'Hasegawa'
  }
};

console.log(domico?.guitar?.firstName); // Hikaru
console.log(domico.bass?.firstName); // undefined  bassがない時点でundefinedを返してくれる
console.log(domico.bass.firstName); // TypeError: Cannot read property 'firstName' of undefined

Null合体演算子 ??

  • 左辺が null または undefined の場合に右の値を返し、それ以外の場合に左の値を返します。
const drums = null ?? 'ドラム募集中';
console.log(drums); // ドラム募集中

const num = 0 ?? 100;
console.log(num); // 0

const number = 0 || 100;
console.log(number); // 100 論理演算子 || は、nullとundefined以外のfalsyな値についても右辺を返す。

// 上記より、|| より ?? を利用する方が、より厳密に利用できる。