ブラウザの開発者ツールで以下を確認してみましょう。
最終的に6個の要素を持つ配列が出来そうなソース
a=[10]
a[5]=20
a
a.length
empty × 4 の部分が曲者で、実はこの部分には「要素は無い」。
a[1] を評価すると undefined になるので「aの1番目には undefined が入っている」かのように見えますが、正確には存在しないキーを指定されたから undefined になっただけです。
それが何？
さて、例えば終端が不確定な配列データをグラフ上にプロットしたいとかの要件で「配列の長さを最低N個まで拡張する」という関数を作る場合、何も考えずに実装するとこういうソースになると思います。
function fillUp(arr, length) {
arr[length - 1] = arr[length - 1]; // 配列の長さがlength以上なら何も起こらず、未満ならundefinedが代入される事で配列の長さがlengthまで伸びる、ような気がする
// a.length = Math.max(a.length, length) // こちらでも
}
冒頭のaを与えて fillUp(a, 10) を実行すると確かに a[9] に undefined は入るし a.length も10になります。
が、lengthが10だからといって10回ループする事を期待して a.forEach() を実行しても実際には3回しかループしません。
fillUp(a, 10)
b=a.length
a.forEach(() => --b) // bはゼロになるはず
b
更に、「undefinedの要素を別の値に置き換えた配列を作りたい」といった処理も失敗します。
a2 = a.map(v => v === undefined ? 'empty' : v)
a2[1] // 'empty'に…ならない！
今aは具体的にはどういう状態か、以下で確認できます。
[...Array(a.length)].map((x,i) => ({index:i, exists: (i in a), value: a[i]}) )
おわかりいただけただろうか。
紛らわしいので何とかしたい
万能薬は無い気がします。どなたかご存知なら教えてください。
参照する側で気を付けるなら a.~ をやめて [...Array(a.length)].map((x,i) => a[i]).~ を使います。面倒臭い！
修正前
a.map(v => v === undefined ? 'empty' : v)
修正後
[...Array(a.length)].map((x,i) => a[i]).map(v => v === undefined ? 'empty' : v)
データを作る側で対処するなら、地道に埋めたてます。
修正前
function fillUp(arr, length) {
arr[length - 1] = arr[length - 1];
}
修正後
function fillUp(arr, length) {
[...Array(length)].forEach((x,i) => arr[i] = arr[i])
}
という事はpopも実際に代入されている値しか取り出さないのでは？
あ、そこはlength準拠の挙動なんですね…。
番外編 - これは添え字？
a.lengthは1から変わらず、 "2.1" というキーの独自プロパティが生えただけでした。 forEach や map や pop も2.1には反応しません。「だからどうした？」とか言わない。