中級

配列の分割代入で要素が足りないとundefinedになる（デフォルト値の付け方）

配列の分割代入で、元の配列より多い変数を用意すると、対応する要素が無い変数はundefinedになります。各変数にデフォルト値を指定することでこれを防げます。

なぜエラーが出ないのか

出力: undefined

（エラーなし）

JavaScriptは何も報告しません。文法として正しいためです

出力: undefined

実際の挙動 — 期待した結果と食い違っている箇所

見つけ方

エラーが出ないので、出力を目で確かめるか、コードを目で追うしかありません。この種の誤りが最も発見が遅れます

このエラーが出る典型パターン

 1  const [first, second, third     ] = [1, 2];
                                  ^
 2  console.log(third);

 1  const [x, y, z      ] = [10, 20];
                     ^
 2  console.log(z);

 1  const [a, b, c          ] = ["x", "y"];
                       ^
 2  console.log(c);

よくある誤解

「変数の数だけ自動で埋めてくれるはず」という思い込みは誤りです。元の配列に対応する要素が無ければ、デフォルト値を指定しない限りundefinedがそのまま入ります。

まとめ

配列の分割代入で要素が足りないとundefinedになる（デフォルト値の付け方）は中級でつまずきやすい項目です。上の3パターンを実際に手で直すと、エラーメッセージのどこを読めばよいかが掴めます。

演習をはじめる

関連するエラー

• 配列の範囲外アクセスがエラーにならずundefinedになるJavaScriptの配列は範囲外の添字にアクセスしてもエラーを投げません。
• デフォルト引数はnullには適用されない（undefinedのときだけ）関数のデフォルト引数は、渡された値が厳密にundefinedのときだけ使われます。