中級

配列の分割代入で要素が足りないと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);

 1  const [name, age, country        ] = ["Al", 20];
                                 ^
 2  console.log(country);

 1  const [w, h, depth     ] = [100, 50];
                         ^
 2  console.log(depth);

よくある誤解

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

実務での勘所

デフォルト値には、同じ分割代入パターンの中で先に取り出した変数を参照する式も書けます。const [a, b = a * 2] = [5]のように書くと、bに対応する要素が無いためデフォルト値a * 2が評価され、bは10になります。この参照は、対応する要素が実際に無かった(undefinedだった)ときだけ評価されるため、[5, 100]のように2番目の要素があれば、a * 2という式自体が評価されずdは100のままになります。デフォルト値は単なる固定値だけでなく、その場で計算する式を書けるという柔軟性を持っています。

演習をはじめる

関連するエラー

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