JavaScriptで配列に複数のオブジェクトを追加する方法をわかりやすく解説

JavaScriptでは、1つの配列に複数のオブジェクトや値を追加する方法がいくつかあります。用途に応じて適切な手法を選ぶことで、コードの可読性や保守性が大きく向上します。ここでは、代表的な方法をサンプルコードとともに詳しく見ていきましょう。

push()メソッドで配列の末尾に追加する

push()は、配列の末尾に要素を追加するための最も基本的なメソッドです。繰り返し呼び出して要素を1つずつ追加することもできますし、一度に複数の引数を渡してまとめて追加することも可能です。

例

let arr = [];
arr.push(1);
arr.push(2);
console.log(arr);

出力

[1, 2]

さらに、push()には複数の値を同時に渡すこともできます。

arr.push(3, 4, 5); // 一度に複数の要素を追加できる

unshift()メソッドで配列の先頭に追加する

unshift()は、push()とは逆に、配列の先頭に要素を追加するメソッドです。push()と同じように、複数の引数を渡してまとめて追加することもできます。

例

let arr = [];
arr.unshift(1);
arr.unshift(2);
console.log(arr);

出力

[2, 1]

unshift()は常に配列の先頭に挿入されるため、後から追加した要素ほど前に来る点に注意してください。

スプレッド構文で配列を展開・結合する

ES2015以降で利用できるスプレッド構文（...）を使うと、既存の配列を別の配列の中へ展開しながらコピーできます。元の配列を変更せずに新しい配列を作成したい場合に特に便利です。

例

let arr1 = [1, 2, 3];
let arr2 = ['hello', ...arr1, 'world'];
console.log(arr2);

出力

['hello', 1, 2, 3, 'world']

この例では、元の配列arr1は変更されず、展開された要素を含む新しい配列arr2が生成されます。

concat()メソッドというもう一つの選択肢

concat()も、複数の配列や値を結合して新しい配列を作るための方法です。スプレッド構文と同様に、元の配列は変更されません。

例

let arr1 = [1, 2, 3];
let arr2 = arr1.concat([4, 5], 6);
console.log(arr2);

出力

[1, 2, 3, 4, 5, 6]

まとめ

• 配列の末尾に追加するなら push()
• 配列の先頭に追加するなら unshift()
• 元の配列を変更せず新しい配列を作りたいなら スプレッド構文 や concat()

それぞれの特徴を理解したうえで目的に合わせて使い分けることで、より読みやすく保守性の高いJavaScriptコードを書けるようになります。