定義と使用方

push()関数は、配列の末尾に1つ以上の要素を追加（push、後ろから押し込む）関数です。

特徴

  • 配列の末尾に新しい1つ以上の要素を追加します。
  • 新しい配列を返さず、元の配列自体を直接変更します。
  • このとき、追加された要素の分だけ配列の長さも増加します。
  • 追加後の配列の長さを整数で返します。

基本の例

JavaScript 
const arr = [1, 2, 3];

// 配列の末尾に1つの要素を追加します。
arr.push(4);
console.log(arr); // 出力: [1, 2, 3, 4]

// 配列の末尾に複数の要素を追加します。
arr.push(5, 6, 7);
console.log(arr); // 出力: [1, 2, 3, 4, 5, 6, 7]

unshift()関数はこれと類似していますが、配列の先頭に1つ以上の新しい要素を追加します。

構文

JavaScript 
arr.push(element1)
arr.push(element1, element2)
arr.push(element1, element2, /* …, */ elementN)

arrは、push()関数を適用する配列オブジェクトです。

パラメーター

push()関数のパラメーターの説明
element1, elementN 配列の末尾に追加する要素です。
配列に追加する1つ以上の値を指定できます。

戻り値

返り値は、配列に要素が追加された後の総要素数を示します。この値は整数（例：1、2、3、...）で返されます。

JavaScript push()関数の戻り値 
const arr = [1, 2, 3];

// 配列の末尾に1つの要素を追加し、返り値を保存
const totalElements = arr.push(4);
console.log(totalElements); // 出力: 4

例

次はpush()関数を使用する例です。

1つの要素を追加

単一の要素を追加するには、push()関数に追加したい要素をパラメーターとして指定します。

JavaScript 
const fruits = ["apple", "banana", "cherry"];

// 配列の末尾に1つの要素を追加
fruits.push("date");

// 配列の内容を確認
console.log(fruits); // 出力: ['apple', 'banana', 'cherry', 'date']

複数の要素を追加

複数の要素を追加するには、push()関数に追加したい要素をコンマ（,）で区切って順番に並べます。以下の例で確認できます。

JavaScript 
const fruits = ["apple", "banana", "cherry"];

// 配列の末尾に複数の要素を追加
fruits.push("date", "elderberry");

// 配列の内容を確認
console.log(fruits); // 出力: ['apple', 'banana', 'cherry', 'date', 'elderberry']

オブジェクトを追加

push()関数に通常の要素を追加するように、オブジェクト（object）を追加できます。以下の例で確認できます。

JavaScript 
const myArray = []; // 空の配列を作成

const object1 = {name: "John", age: 30};
const object2 = {name: "Jane", age: 25};

myArray.push(object1); // 配列の末尾にオブジェクトを追加
myArray.push(object2);

console.log(myArray); // 出力: [{name: 'John', age: 30}, {name: 'Jane', age: 25}]

push()関数を使用せずに配列の末尾に値を追加する方法

JavaScriptで配列の末尾に要素を追加する最も一般的で便利な方法はpush()関数を使用することですが、他の方法もあります。いくつかの代替方法を以下に示します。

  • 配列のconcat()関数を使用
  • スプレッド構文を使用
  • 配列のlengthプロパティを利用

concat()関数を使用

配列のconcat()関数を使用して、新しい配列を作成し、追加する要素を含めることができます。これにより、既存の配列を変更せずに新しい配列を返します。

JavaScript 
const arr = [1, 2, 3];
const newArr = arr.concat(4);
console.log(newArr); // 출력: [1, 2, 3, 4]

コード補足説明
配列のconcat()関数は、2つ以上の配列を順番に結合して新しい配列を返す関数です。パラメーターが配列でない値の場合は、呼び出した配列オブジェクトの末尾にその値を追加します。

スプレッド構文を使用

スプレッド構文を使用して要素を配列に追加できます。

JavaScript 
const arr = [1, 2, 3];
const newItem = 4;
const newArr = [...arr, newItem];
console.log(newArr); // 出力: [1, 2, 3, 4]

コード補足説明
スプレッド構文は、...（ドット3つ）の後に配列オブジェクトを置くと、その要素を簡単に個別に展開して並べることができるJavaScriptの文法です。

lengthプロパティを利用

配列のlengthプロパティを使用して、配列の末尾に要素を追加できます。この方法は、配列の現在の長さを利用して次のインデックスに値を代入する方式（arr[arr.length] = value;）です。

JavaScript 
const arr = [1, 2, 3];
arr[arr.length] = 4;
console.log(arr); // 出力: [1, 2, 3, 4]

この方法は、1つの要素を追加するには簡潔ですが、複数の要素を追加する場合はループを使用する必要があるなど、不便な場合があります。

仕様書

push()関数の仕様書
仕様書
push() ECMAScript Language Specification
#sec-array.prototype.push

ブラウザ互換性

push()関数のブラウザ互換性
メソッド
デスクトップ Chrome
Chrome
デスクトップデスクトップ Edge
Edge
デスクトップ Firefox
Firefox
Safari
Safari
Node.js
Node.js
push() 1 12 1 1 0.10

参考資料

関連項目