本投稿は TECOTEC Advent Calendar 2022 の3日目の記事です。
こんにちは。次世代デジタル基盤開発事業部の安彦です。
今回はJavaScriptについて１から学べる書籍「JavaScript Primer 迷わないための入門書」（以下「jsprimer」という）を読んで、気になった項目を紹介します！
asciidwango.jp目次
はじめに
jsprimerは、JavaScript（以下「js」という）の文法からアプリ開発まで学べる書籍です。
無料公開されているウェブサイト版では、サンプルコードを実行・編集できるため、手を動かして学びたい方にお勧めです！
私は、新卒入社から１年ほどTypeScriptでのフロントエンド・バックエンド開発を経験しました。
その中で、jsの非推奨な関数や、悪いコードを目にしたり、書いてしまったりすることが多かったため、jsを１から振り返ることができるjsprimerを読みました。
さっそく、気になった項目を紹介していきます。
const は定数ではない
const は変数を宣言するキーワードの１つで、定数宣言と間違えやすい働きをします。
const で数値や文字列などプリミティブな値を変数宣言すると変更できません。
// TEN_NUMBERという変数は常に10という値を示す const TEN_NUMBER = 10;
しかし、const でオブジェクトを変数宣言すると、「プロパティ」が変更できます。
// `const`でオブジェクトを定義している const object = { key: "値" }; // オブジェクトのプロパティは変更可能 object.key = "新しい値";
const でオブジェクトを宣言する場合に注意が必要ですね。
OR演算子 と Nullish coalescing演算子 の違い
jsには、２つの値から１つの値を選択する演算子がいくつかあります。
なかでもOR演算子とNullish coalescing演算子は使い方が非常に似ていると思います。
OR演算子（||）は、左辺の値が truthy ならそのまま値を返し、 falsy なら右辺の値を返します。1
const a = 0 // aはfalsy console.log(a || 100) // => 100
Nullish coalescing演算子（??）は、左辺の値が nullish (null, undefined) なら右辺の値を返します。
const a = 0 // aはnullishでない console.log(a ?? 100) // => 0
0 や空文字 "" は falsy ですが、 nullish でないので、注意して使い分ける必要があります。
Optional chaining演算子（?.）
続いては、オブジェクトから値を取り出す際に使用する演算子です。
以下のように、期待するオブジェクトと実際のオブジェクトに差がある場合を考えます。
// 期待する構造 const expected = { window: { title: 'タイトル', }, } // 実際の値 const actual = { title: 'タイトル', }
存在しない window プロパティは参照可能です。
しかし、存在しないプロパティのプロパティを参照するとエラーになってしまいます。
console.log(actual.window) // -> undefined console.log(actual.window.title) // -> TypeError: Cannot read properties of undefined
そこで、Optional chaining演算子を使用します。
プロパティの参照に用いると、プロパティが nullish の時に undefined を返します。
オブジェクトがネストしてあっても、 nullish なプロパティを参照した時点で undefined を返してくれます。
私は、Nullish coalescing演算子と組み合わせる使い方が多かったです。
// undefined ?? '' の比較になる console.log(actual?.window?.title ?? '') // -> ''
後方互換が怖い
「第一部: おわりに」では、次のように述べられています。
ECMAScriptやJavaScriptは常に変化しています。 そのため、ライブラリによってはいつのまにかDeprecated（非推奨）となっている場合もあるため、 まずは元となるものを見ることが重要です。
jsは後方互換のために破壊的変更が少ないので、古い書き方のコードでも動いてしまいます。
私は、ESLintなどの静的検証ツールを使って、非推奨のコードを探す手がかりしていました。
おわりに
今回取り上げる項目は以上になります。
他にも、以下の項目は改めて知ることが多かったです。
jsprimerはjsを使っているけど、経験・知識が浅いという方にお勧めの内容だと思います。
最後まで読んでいただき、ありがとうございます。
