JavaScriptのnew Array()とは？使い方・注意点を基礎から解説

JavaScriptで配列を作成する方法の一つに、new Array()があります。
柔軟に配列を生成できる便利な書き方ですが、使い方によっては意図しない挙動になることもあるため、正しい理解が重要です。

この記事では、new Array()の基本から注意点、実務での使いどころまでをわかりやすく解説します。

new Array()とは

new Array()は、JavaScriptの組み込みオブジェクトであるArrayのコンストラクタを使って配列を生成する方法です。

// new-array-basic.js
const arr = new Array();

console.log(arr); // []

このように、空の配列を生成できます。

ただし、配列の生成にはリテラル（[]）を使う方法もあり、用途によって使い分けが必要です。

👉 配列の基本については、以下の記事も参考になります。
→「JavaScriptの配列とは？基本から操作方法まで解説」

new Array()の基本的な使い方

要素を指定して配列を作る

複数の値を引数として渡すと、それらを要素とする配列が作成されます。

// new-array-elements.js
const arr = new Array(1, 2, 3);

console.log(arr); // [1, 2, 3]

通常の配列リテラルと同じ結果になります。

// array-literal.js
const arr = [1, 2, 3];

console.log(arr); // [1, 2, 3]

このケースでは、リテラルの方がシンプルで可読性が高いため、一般的にはこちらが推奨されます。

配列の長さを指定して作る

数値を1つだけ渡すと、「その長さを持つ空の配列」が作られます。

// new-array-length.js
const arr = new Array(5);

console.log(arr);        // [ <5 empty items> ]
console.log(arr.length); // 5

この配列は、要素が未定義の「空スロット（empty）」状態です。

new Array()の注意点

数値1つの場合は「長さ」になる

以下のコードは、一見すると[5]という配列になりそうですが、実際は異なります。

// new-array-single-number.js
const arr = new Array(5);

console.log(arr); // [ <5 empty items> ]

一方、リテラルでは次のようになります。

// array-single-number.js
const arr = [5];

console.log(arr); // [5]

この違いは、初心者がつまずきやすいポイントです。

空配列ではない（empty slotの存在）

new Array(5)で作られた配列は、実際には値が入っていません。

// new-array-map.js
const arr = new Array(3);

const result = arr.map((value) => {
  return value;
});

console.log(result); // [ <3 empty items> ]

mapやforEachが実行されない点に注意が必要です。

👉 ループ処理については以下も参考になります。
→「JavaScriptのforEachとは？配列ループの基本」

配列を初期化する方法

new Array()で作成した配列は、そのままでは扱いにくいため、初期化するのが一般的です。

fill()で初期化する

// new-array-fill.js
const arr = new Array(3).fill(0);

console.log(arr); // [0, 0, 0]

map()と組み合わせる

// new-array-map-init.js
const arr = new Array(3).fill(null).map((_, index) => {
  return index;
});

console.log(arr); // [0, 1, 2]

この方法は、インデックスを使った配列生成でよく使われます。

Array.from()を使う

より安全でわかりやすい方法として、Array.from()もあります。

// array-from.js
const arr = Array.from({ length: 3 }, (_, index) => {
  return index;
});

console.log(arr); // [0, 1, 2]

👉 関数の扱いについては、以下の記事も参考になります。
→「JavaScriptのコールバック関数とは？基本から実践まで徹底解説」

new Array()と配列リテラルの違い

基本的には、配列リテラル（[]）が推奨されます。

new Array()の使いどころ

一定の長さの配列を作りたい場合

// new-array-usecase.js
const arr = new Array(5).fill(1);

console.log(arr); // [1, 1, 1, 1, 1]

このように、あらかじめサイズが決まっている配列を作る場合に便利です。

パフォーマンスを意識した初期化

大きな配列を事前に確保したい場合にも利用されます。

ただし、実務では可読性が優先されることが多いため、過度な最適化は不要です。

まとめ

new Array()は柔軟な配列生成ができる一方で、以下の点に注意が必要です。

• 数値1つの場合は長さとして扱われる
• empty slotによりループが動かないことがある
• 初期化が必要なケースが多い

基本的には、配列リテラル（[]）やArray.from()を使う方が安全でわかりやすいです。
ただし、長さ指定など特定の用途ではnew Array()も有効に活用できます。

関連記事

• JavaScriptの配列とは？基本から操作方法まで解説
• JavaScriptのforEachとは？配列ループの基本
• JavaScriptのコールバック関数とは？基本から実践まで徹底解説
• JavaScriptの高階関数とは？基本から実務での使い方まで徹底解説