JavaScript Primerjsprimer.net
~こちらの書籍を読んだ感想~
良かったところ
- 暗黙の型変換ってそこまでやるのかというようなこれまで知らなかったことや、アロー関数と通常のfunctionでの定義の場合のthisの指すオブジェクトの違いなどの細かい点をいくつも学べたこと。
学んだこと
メモに残したものだけでも以下のような点を初めて知ったり、再認識したりできました。
- 関数定義にある引数の数だけ渡さなくてもいい、渡されなかった引数はundefinedになり多い分には無視される
暗黙の型変換では以下のように配列に入ってても暗黙の型変換される
console.log(10 == ["10"]); // => trueオブジェクトリテラルのプロパティキーとして変数やシンボル、式を使いたい場合、[]を用いてそれを評価する必要がある。値は変数を直接書くことができる。
const key = "Key1"
const value = "Value1"
const obj = { [key]: value }
- 取り出す際はブラケット記法なら動的にそのキーを変数やシンボルのまま書ける(
obj[Symbol]の様に)が、ドット記法では静的な、キーが評価された値の方を使用する必要がある。 - Rest Parameters /
...argsのように...を使うことで残余引数を受け取れる - 関数の引数の取り扱いに柔軟性があるjsではオーバーロードは存在しない(引数が少ない場合はundefined,多く場合は単に無視されるため)
- コールバック関数を引数として受け取る関数を高階関数と呼ぶ
式の最後には
;が必要だが、ブロックで終わる文には必要ない
// learn関数を宣言する関数宣言文(;がいらない)
function learn() {
}
// 関数式をread変数へ代入(式で終わるため厳密には;が必要)
const read = function() {
};
- delete演算子の存在(
delete obj.key1;) -Object.hasOwnの使い方
const obj = {};
// objが"プロパティ名"を持っているかを確認する
Object.hasOwn(obj, "プロパティ名"); // true or false
- pushは元の配列に変更を及ぼし(破壊的変更)、concatは新しい配列として返す（元の配列に影響しない、非破壊的変更）
array.concat()/array.slice()/[...array]はどれもarrayのコピーを作成できる。
filter関数のコールバックはbooleanを返す必要がある
const numbers = [0, 1, 2, 3, 4, 5]; const truthyValues = numbers.filter(number => number); // truthyValues は [1, 2, 3, 4, 5] となる（JavaScriptでは0以外の数はすべてTruthy、0がFalstyのため)
- プリミティブ型（数値、文字列、Booleanなど）からメソッドを呼び出す際、内部的には一時的に対応するラッパーオブジェクトに自動的に変換される
(プリミティブ型の値がラッパーオブジェクトの初期値として生成されている)
addEventListenerの第二引数でコールバック関数の引数として渡されるeventもオブジェクトである。
- event.targetプロパティでそのeventのトリガーとなったDOM(要素のオブジェクト)が取得できる。
- varによる変数宣言は、宣言部分が暗黙的にもっとも近い関数またはグローバルスコープの先頭に巻き上げられ、代入部分はそのままの位置に残るという特殊な動作をする
難しかったこと
学んだことにも記載したthisが何を指すのかがコンテキストによって変わるということが難しかったです。 開発の際はデバッグをして確認しながら間違わないように使っていきたいと思います。
