JavaScript の Array の初期化につきまして

Question

array1 と array2 は同じものに見えますが map を適用すると結果が異なる理由がわからず苦慮しております。

var array1 = new Array(3);
var array2 = Array.apply(null, Array(3));

console.log(array1);  // [undefined, undefined, undefined]
console.log(array2);  // [undefined, undefined, undefined]

console.log(array1.map(()=>3));  // [undefined, undefined, undefined]
console.log(array2.map(()=>3));  // [3, 3, 3]

こちらのサイトを見て配列の初期化を知りました。

new Array で初期化すると、空の配列になってしまうため、map 処理がスキップされてしまう。
そのため、Array.prototype.map()を使っても、ゼロで初期化することができない。
【JavaScript】配列をゼロで初期化する方法

また apply についてはこちらの記事を参考にして、理解はまだ及んでないのですが、現在確認しております。

applyとcallの使い方を丁寧に説明してみる

何か参考になるページ等ご教示いただけましたら、幸いでございます。
どうぞ、よろしくお願いいたします。

---

ご回答いただき、誠にありがとうございます。
ご指導いただいた内容を元に再度整理いたしまいた。

上記は CodePen での実行結果
以下は Chrome での実行結果

var array1 = Array(3);  // new Array(3); と等価
var array2 = Array.apply(null, Array(3));

// 
console.log(array1);  // [empty,     empty,     empty    ]
console.log(array2);  // [undefined, undefined, undefined]

// 1) CodePen だと empty ではなく undefined と表示されてしまう。
//    console.log(array1);  
//    -> [undefined, undefined, undefined]

// 2) empty は、存在しない。
//    console.log(empty);
//    -> Uncaught ReferenceError: empty is not defined

// 3) empty は null とも違いそう。




// 4) インデックスを指定して empty を取得しようとすると 
//    empty が undefined になる。
//    このとき undefined との厳密等価演算は true になる。
console.log(array1[0]);  // undefined
console.log(array2[0]);  // undefined
console.log(array1[0] === array1[1]);  // true

// 配列の型も
console.log(typeof(array1));  // object
console.log(typeof(array2));  // object

// その中の要素の型も同じ
console.log(typeof(array1[0]));  // undefined
console.log(typeof(array2[0]));  // undefined
console.log(typeof(array1[0]) == typeof(array2[0]))  // true

// keys は異なる
console.log(Object.keys(array1)) // => []
console.log(Object.keys(array2)) // => [0, 1, 2]

// 結果 map の結果も異なる。
console.log(array1.map(()=>3));  // [empty, empty, empty]
console.log(array2.map(()=>3));  // [3, 3, 3]

/* ここで... */
// ここで次のようにすると
array1[0] = 0;
array1[2] = 2;

// 以下のようになる。
console.log(array1);  // [0, empty, 2]
console.log(Object.keys(array1)) // => [0, 2]
console.log(array1.map(()=>3));  // [3, empty, 3]

Answer 1

array1 と array2 は同じものに見えますが map を適用すると結果が異なる理由がわからず苦慮しております。

array2の方は、Array.applyとなっていますが、.applyには**lengthを見て添字の値をコピーする**機能がありますので、その過程でArray(undefined, undefined, undefined)と呼んだのと同じ扱いになって、本当にundefinedが3つはいった配列が出来上がります。

両者の違いはObject.keysではっきりします。

console.log(Object.keys(array1)) // => []
console.log(Object.keys(array2)) // => [0, 1, 2]

（なお、Arrayに関してはnewありでもなしでも動作は変わりません）

Comments

[nico25]

ご回答いただき、誠にありがとうございます。
おそらくまだ理解には届いていないと思うのですが、
とても参考になりました。
今後とも、どうぞよろしくお願い申し上げます。

[nico25]

また new Array(3) と Array(3) の違いも
実は気になっていたので
教えていただいて本当に助かりました。