初見でわかりづらい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 }
オプショナルチェーン ?.
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な値についても右辺を返す。 // 上記より、|| より ?? を利用する方が、より厳密に利用できる。