JavaScriptのpush()とは？配列に要素を追加する基本と使い方を徹底解説

JavaScriptの配列操作において、要素を追加する処理は非常に頻繁に登場します。その中でも基本となるのが push() メソッドです。

この記事では、push()の基本から実践的な使い方までを丁寧に解説します。あわせて、他の配列操作との違いも理解できる内容となっています。

push()とは？

push()は、配列の末尾に要素を追加するためのメソッドです。

基本構文

array.push(追加する要素);

• 配列の最後に要素を追加する
• 戻り値として「新しい配列の長さ」を返す

push()の基本的な使い方

まずはシンプルな例から確認します。

要素を1つ追加する

// push-basic.js
const fruits = ["apple", "banana"];

const result = fruits.push("orange");

console.log(fruits); // ["apple", "banana", "orange"]
console.log(result); // 3

• “orange”が配列の末尾に追加される
• 戻り値は配列の長さ（3）になる

複数の要素をまとめて追加する

push()は複数の要素を同時に追加できます。

複数追加の例

// push-multiple.js
const numbers = [1, 2];

numbers.push(3, 4, 5);

console.log(numbers); // [1, 2, 3, 4, 5]

• 引数をカンマ区切りで並べるだけでOK
• 配列の末尾に順番通り追加される

配列に配列を追加する場合

配列をそのまま追加すると、「配列の中に配列」が入ります。

ネストされるケース

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

arr.push([3, 4]);

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

• 配列が1つの要素として追加される

配列を展開して追加する（応用）

配列の中身だけを追加したい場合は、スプレッド構文を使います。

スプレッド構文を使う

// push-spread.js
const arr = [1, 2];
const addItems = [3, 4];

arr.push(...addItems);

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

• … を使うことで配列を展開できる
• 要素ごとに追加される

push()の戻り値に注意

push()は「追加後の配列」ではなく「配列の長さ」を返します。

よくある間違い

// push-mistake.js
const arr = [1, 2];

const result = arr.push(3);

console.log(result); // 3（配列ではない）

配列を取得したい場合は、元の変数をそのまま使う必要があります。

push()と似ているメソッドとの違い

push()と混同しやすいメソッドとの違いも押さえておくと理解が深まります。

unshift()との違い

• push()：末尾に追加
• unshift()：先頭に追加

// unshift-example.js
const arr = [2, 3];

arr.unshift(1);

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

concat()との違い

concat()は新しい配列を作成します。

// concat-example.js
const arr1 = [1, 2];
const arr2 = [3, 4];

const result = arr1.concat(arr2);

console.log(result); // [1, 2, 3, 4]
console.log(arr1);   // [1, 2]（変更されない）

• push()：元の配列を変更する
• concat()：新しい配列を返す

関連記事：JavaScriptのconcat()とは？配列を結合する方法

splice()との違い

splice()は途中に追加・削除ができます。

// splice-example.js
const arr = [1, 4];

arr.splice(1, 0, 2, 3);

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

関連記事：JavaScriptのsplice()とは？配列の追加・削除・置き換えを1つで行う方法

push()が使われる場面

push()は以下のような場面でよく使われます。

ループ処理での追加

// push-loop.js
const result = [];

for (let i = 1; i <= 5; i++) {
  result.push(i);
}

console.log(result); // [1, 2, 3, 4, 5]

• 配列を動的に生成するときに便利

条件に応じて追加

// push-condition.js
const numbers = [1, 2, 3, 4, 5];
const evens = [];

for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] % 2 === 0) {
    evens.push(numbers[i]);
  }
}

console.log(evens); // [2, 4]

このような処理は、JavaScriptのfilter()とは？配列の絞り込みを徹底解説 とあわせて理解すると効率的です。

push()を使う際の注意点

元の配列が変更される

push()は破壊的メソッドです。

// push-mutation.js
const arr = [1, 2];

arr.push(3);

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

元の配列を保持したい場合は、concat()やスプレッド構文を使う必要があります。

まとめ

push()は、配列の末尾に要素を追加する最も基本的なメソッドです。

• 配列の末尾に要素を追加する
• 複数要素もまとめて追加できる
• 戻り値は配列の長さ
• 元の配列が変更される（破壊的メソッド）

配列操作の基礎として、確実に理解しておきたい重要なメソッドです。

関連記事

• JavaScriptの配列操作まとめ（map・filter・reduce）
• JavaScriptのfilter()とは？配列の絞り込みを徹底解説
• JavaScriptのmap()とは？配列を変換する方法
• JavaScriptのreduce()とは？配列を1つにまとめる方法
• JavaScriptのsplice()とは？配列を自由に操作する方法