JavaScriptのpushの使い方！配列の末尾に追加する

JavaScriptで配列の末尾に要素を追加するpushメソッドについて書いています。

pushメソッドを使うと、配列の最後に新しい要素を追加することができます。
配列を動的に操作する場合に便利です。

実際に動くサンプルを使って、以下の操作を解説します。

pushメソッドの基本的な使い方

pushメソッドは、配列の末尾に1つ以上の要素を追加します。
基本的な構文は以下のとおりです。

array.push(element1, ..., elementN)

• element1, ..., elementN: 配列に追加する要素（必須）。

配列に要素を追加する

const fruits = ['apple', 'banana'];
fruits.push('orange');

console.log(fruits); // 結果：['apple', 'banana', 'orange']

fruits配列を作成して、次の行でpushを呼び出しています。

‘orange’を渡しているので、配列の末尾に’orange’が追加されています。
pushメソッドによって、fruits配列が変更されていることに注意してください。

複数の要素を一度に追加する

pushメソッドを使って、複数の要素を一度に追加することもできます。

const fruits = ['apple', 'banana'];
fruits.push('orange', 'grape', 'mango');

console.log(fruits); // 結果：['apple', 'banana', 'orange', 'grape', 'mango']

fruits配列の末尾に’orange’、’grape’、’mango’の3つの要素が追加されています。
このように、pushメソッドにたいして、複数要素を渡すことでも追加できます。

pushメソッドの戻り値

pushメソッドは、新しい配列の長さを返します。

const fruits = ['apple', 'banana'];
const newLength = fruits.push('orange');

console.log(newLength); // 結果：3

pushメソッドを使ったときに、戻り値をnewLengthで受けています。
結果、’orange’が追加された後のfruits配列の長さである「3」がnewLength変数に格納されています。

nullやundefinedをpushすると？

pushメソッドは、nullやundefinedを要素として追加することも可能です。

const mixedArray = ['apple', 'banana'];
mixedArray.push(null, undefined);

console.log(mixedArray); // 結果：['apple', 'banana', null, undefined]

mixedArray配列に2つ要素を追加したあとに、次の行でnullとundefinedを追加しました。
mixedArray配列の末尾にnullとundefinedが追加されています。

オブジェクトをpushで追加する

pushメソッドは、オブジェクトを要素として追加することも可能です。

const objectsArray = [];
const myObject = { name: 'John', age: 30 };
objectsArray.push(myObject);

console.log(objectsArray); // 結果：[{ name: 'John', age: 30 }]

objectsArray配列を作っています。
次の行でmyObjectオブジェクトを作成して、objectsArray配列に追加しました。

結果、配列にオブジェクトが追加されたことが確認できました。
複数のオブジェクトも配列に追加して、処理することができます。

JavaScriptのpushメソッドの使い方まとめ

今回はJavaScriptのpushメソッドの使い方について解説しました。
記事の内容をまとめます。