JavaScriptで配列に追加する３つの方法

JavaScriptで配列に要素を追加する方法は、主に３つあります。本記事では、それぞれの方法と使用例を紹介します。

1. push() メソッド

最もメジャーな配列への追加メソッドはpush()になります。push() メソッドは、配列の末尾に一つまたは複数の要素を追加し、新しい配列の長さを返します。使用例は以下のとおりです。

let fruits = ['apple', 'banana'];
let newLength = fruits.push('orange');
console.log(fruits);  // 出力: ['apple', 'banana', 'orange']
console.log(newLength);  // 出力: 3

2. unshift() メソッド

unshift() メソッドは、配列の先頭に一つまたは複数の要素を追加します。追加後の配列の新しい長さを返します。push()とは異なり、要素を配列の先頭に追加するのが特徴です。

let numbers = [2, 3, 4];
let newLength = numbers.unshift(1);
console.log(numbers);  // 出力: [1, 2, 3, 4]
console.log(newLength);  // 出力: 4

3. スプレッド演算子を使用する

ES6から導入されたスプレッド演算子（...）を使用すると、配列内で既存の配列を展開して新しい要素を追加することができます。これにより、既存の配列を変更せずに新しい配列を作成することができます。

let initialArray = ['a', 'b'];
let newArray = [...initialArray, 'c', 'd'];
console.log(newArray);  // 出力: ['a', 'b', 'c', 'd']

この方法は、元の配列を変更せずに新しい配列を作成する場合に特に便利です。

まとめ

push() と unshift() は元の配列を変更（ミューテート）しますが、スプレッド演算子を使用した方法は新しい配列を作成します。これらの方法を適切に使い分けることで、JavaScriptでの配列操作をより効率的に行うことができます。