JavaScriptの基礎｜変数・関数・配列・this

JavaScript基礎とは｜このカテゴリで分かること

JavaScriptの基礎とは、変数、関数、配列やオブジェクトの扱い、this、型の変換など、DOM操作や非同期処理に進む前に必要な言語そのものの知識を指します。このカテゴリでは、let・const・var の違い、アロー関数、map・filter・reduce、分割代入、スプレッド構文、this、オブジェクトのコピー、== と ===、型変換、Date の10本を扱います。JavaScriptの入門書は一通り読んだが、実際のコードで「なぜこの値になるのか」が分からない初心者から中級のコーダーを想定しています。

JavaScriptの基礎で挙動に迷いやすいのは、スコープ、this、参照渡し、暗黙の型変換の4点です。10本を、この4点の理解に沿って順に並べました。言語仕様は ECMAScript として毎年更新されるため、新しい構文の対応は MDN など公式で確認してください。

読む順番（おすすめの順路）

1. let・const・varの違い｜使い分けとスコープの基本 … 変数の宣言とスコープ。すべての基本になります。
2. アロー関数とは｜書き方・thisの違い・使えない場面 … 現在のコードで頻出する関数の書き方です。
3. map・filter・reduceの使い方｜配列メソッドを実例で … 配列の処理を宣言的に書く方法です。
4. 分割代入とは｜配列・オブジェクトの書き方と落とし穴 … 値の取り出しを簡潔に書きます。
5. スプレッド構文とは｜配列・オブジェクトの展開と残余引数 … 展開と残余引数。コピーや結合で使います。
6. オブジェクトのコピー方法｜浅い・深いコピーとstructuredClone … 参照と値の違いを、コピーの失敗例から理解します。
7. JavaScriptのthisとは｜呼び出し方で変わる値と対処法 … 最大のつまずきどころです。ここまでの知識があると読みやすくなります。
8. ==と===の違い｜等価演算子の比較ルールとObject.is … 比較の落とし穴を確認します。
9. 型変換の基本｜Number・parseInt・文字列化と暗黙の変換 … 暗黙の型変換と明示的な変換の使い分けです。
10. Dateと日付のフォーマット｜Intl.DateTimeFormatの使い方 … 日付の扱いは実務で必ず必要になります。

押さえておきたいポイント（リサーチ）

MDN の let の解説で確認できる要点です。

• let で宣言した変数はブロックスコープを持ち、同じブロックの内側で再宣言しても別の変数になります。var は関数スコープで、ブロックの内外で同じ変数になります。
• let は同じスコープ内で再宣言するとエラーになります。
• let で宣言した変数は、宣言の行に実行が到達するまでアクセスできない「一時的なデッドゾーン（TDZ）」に置かれ、その間に参照すると ReferenceError になります。var は undefined が返ります。
• TDZ の間は typeof でもエラーになり、未宣言の変数が “undefined” を返すのとは異なります。

const の扱いや新しい標準メソッドは、バージョンにより対応が違う場合があります。最新は MDN や ECMAScript 仕様で確認してください。

よくある疑問

Q. let と const はどちらを使いますか。
A. 再代入しない値は const、する場合のみ let とする書き方が一般的です。var を避ける理由は let・const・varの違い｜使い分けとスコープの基本 にあります。

Q. this が undefined になるのはなぜですか。
A. 関数の呼び出し方で this が変わるためです。パターンは JavaScriptのthisとは｜呼び出し方で変わる値と対処法 に整理しています。

Q. オブジェクトをコピーしたのに元の値も変わります。
A. 浅いコピーでは中の参照が共有されます。対処は オブジェクトのコピー方法｜浅い・深いコピーとstructuredClone を見てください。

Q. == と === はどちらを使うべきですか。
A. 基本は ===、例外を理解したうえで ==。詳しくは ==と===の違い｜等価演算子の比較ルールとObject.is にあります。