Javascriptで任意の値を持つn個の配列を作成する

ネットで見つけた方法は

どうやら下記コードで目的は達成できるらしい。

 new Array(10).fill(0).map(() => 0)
 // => [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

いったい、どうしてこうなるのか。

何が行われているのか？

new Array()

かっこの中に入れたLength分の配列を作成する。

つまりnew Array(10)であれば10個の値を含む配列を作成してくれる。

ちなみに値はundefinedになる

[undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined]

fill()

fill() メソッドは、開始位置（既定値は 0）から終了位置（既定値は array.length）までのすべての要素を、静的な値に変更した配列を返します。

つまり先ほど作った10個のundefinedを持つ配列のundefinedを0に変更してくれるということ？

console.log(new Array(10).fill(0))
// [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

ということらしい。

この時点でタイトル（n個の任意の値を持つ配列を作成する）という目的は達成されている。

いったいmap()は何をしているのか？

map()

このコードでいえばmap()は配列の個数分取り出して0を入れるという、まったく生産性のない動きをしている。

つまり本タイトルという目的を達成するためであれば、不要以外の何物でもない。

n個の任意の値を持つ配列を作成する方法

ということで結論は、

console.log(new Array(10).fill(0))
// [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

に落ち着いた。

map()が必要な場合は？

ちなみにmap()が必要な時は、必要とする値がオブジェクトの時らしい。

javascript fillでオブジェクトの配列を作成した際の注意点

上に詳しく説明されているけど、どうやら指定した個数分参照渡しされているということ。つまり、3つの配列を作り、その2番目のkeyを変更しようとしたところ、すべてのkeyが変更される結果になる。

const v = new Array(3).fill({hello: 'Hello', world:'World'})
v[2].hello = 'goodbye'
console.log(v)
// [
//     {
//         "hello": "goodbye",
//         "world": "World"
//     },
//     {
//         "hello": "goodbye",
//         "world": "World"
//     },
//     {
//         "hello": "goodbye",
//         "world": "World"
//     }
// ]

そのため、mapで入れなおす必要がある。

念のためシンプルな個数分の配列で行ったけど、問題なかった。

const v = new Array(10).fill(0)
v[2] = 2
console.log(v)
// (10) [0, 0, 2, 0, 0, 0, 0, 0, 0, 0]

オブジェクトの時だけことは起こるらしい。

# Javascriptで任意の値を持つn個の配列を作成する