実行環境 Node.js 15.2.1

公開日 February 28, 2021, GMT+9

コード例の出力としてconsole.logを使用しています。

使用方法がわからない場合は以下のページを参照してからコード例を確認してください。

console.logの使用方法

push(Array、配列)

このページでは豊富な例を用いてJavaScript(js)のArrayオブジェクトのpushメソッドの使い方を学ぶことができます。

JavaScript(js)のpushメソッドはArrayオブジェクト(配列)のメソッドの1つです。

「呼び出し元の配列の末尾」に「引数で指定した値」を追加します。
返り値として、「要素を追加した後の呼び出し元の配列の長さ(length)」を返します。

// 記述例

const 要素追加後の配列の長さ = 要素を追加したい配列.push(配列末尾に追加する要素)

TL;DR

基本

const array1 = ['js', 'javascript'];
console.log(array1);
==> [ 'js', 'javascript' ]
console.log(array1.length);
==> 2

// 引数に配列末尾に追加したい値を指定する、返り値は追加後の配列の長さ
const returnValue1 = array1.push('typescript');
console.log(array1);
==> [ 'js', 'javascript', 'typescript' ]
console.log(returnValue1);
==> 3
console.log(array1.length);
==> 3







// 複数の引数(不定数の引数)を与えることもできる
const array2 = ['js', 'javascript'];
const returnValue2 = array2.push('Foo', 'Bar', 'Ninja');
console.log(array2);
==> [ 'js', 'javascript', 'Foo', 'Bar', 'Ninja' ]
console.log(returnValue2);
==> 5
console.log(array2.length);
==> 5






// オブジェクトの追加
const array3 = [true, 100];
const object3 = { id: 1, name: 'js' };
const returnValue3 = array3.push(object3);
console.log(array3);
==> [ true, 100, { id: 1, name: 'js' } ]
console.log(returnValue3);
==> 3






// 配列の追加
const array4 = [100, 200];
const array4_1 = ['JS', 'JavaScript'];
const returnValue4 = array4.push(array4_1);
console.log(array4);
==> [ 100, 200, [ 'JS', 'JavaScript' ] ]
console.log(returnValue4);
==> 3






// 配列をスプレッド構文(spread syntax)で展開する
const array5 = [100, 200];
const array5_1 = ['JS', 'JavaScript'];
// array5.push('JS', 'JavaScript')と記述した場合と同じ結果になる
const returnValue5 = array5.push(...array5_1);
console.log(array5);
==> [ 100, 200, 'JS', 'JavaScript' ]
console.log(returnValue5);
==> 4

配列に似たオブジェクトに対する使用

// 配列に似たオブジェクトに対する呼び出し.1
const object1 = { 0: 'Foo', 1: 'Bar', length: 2 };
const returnValue1 = Array.prototype.push.call(object1, 'js', 'javascript');
console.log(object1);
==> { '0': 'Foo', '1': 'Bar', '2': 'js', '3': 'javascript', length: 4 }
console.log(returnValue1);
==> 4






// 配列に似たオブジェクトに対する呼び出し.2
const object2 = { 0: 'A', 1: 'B', length: 2 };
const returnValue2 = Array.prototype.push.apply(object2, ['js', 'javascript']);
console.log(object2);
==> { '0': 'A', '1': 'B', '2': 'js', '3': 'javascript', length: 4 }
console.log(returnValue2);
==> 4

解説

// 記述例

const 要素追加後の配列の長さ = 要素を追加したい配列.push(配列末尾に追加する要素)

基本

pushメソッドは「呼び出した配列の末尾」に「引数で指定した値」を追加し、「呼び出した配列」を変更します。
返り値は「要素が追加された配列の長さ(length)」になります。

引数として、すべての型の値を取ることができます。
また、引数を複数指定することができ(不定数の引数、残余引数、可変長引数、rest parameters)、 末尾に追加される順番は引数に指定した順番通りになります。

const array1 = ['A', 'B'];
console.log(array1);
==> [ 'A', 'B' ]
console.log(array1.length);
==> 2

const returnValue1 = array1.push('C');
console.log(array1);
==> [ 'A', 'B', 'C' ]
console.log(returnValue1);
==> 3
console.log(array1.length);
==> 3







// 複数の引数を指定する場合
const array2 = ['A', 'B'];
const returnValue2 = array2.push('C', 'D', 'E');
console.log(array2);
==> [ 'A', 'B', 'C', 'D', 'E' ]
console.log(returnValue2);
==> 5
console.log(array2.length);
==> 5






// オブジェクトの追加
const array3 = ['A', 'B'];
const object3 = { id: 1, name: 'C' };
const returnValue3 = array3.push(object3);
console.log(array3);
==> [ 'A', 'B', { id: 1, name: 'C' } ]
console.log(returnValue3);
==> 3






// 配列の追加
const array4 = ['A', 'B'];
const array4_1 = ['C', 'D'];
const returnValue4 = array4.push(array4_1);
console.log(array4);
==> [ 'A', 'B', [ 'C', 'D' ] ]
console.log(returnValue4);
==> 3






// 配列をスプレッド構文(spread syntax)で展開
const array5 = ['A', 'B'];
const array5_1 = ['C', 'D'];
const returnValue5 = array5.push(...array5_1);
console.log(array5);
==> [ 'A', 'B', 'C', 'D' ]
console.log(returnValue5);
==> 4

配列に似たオブジェクトに対する使用

callメソッドやapplyメソッドを使用することで「配列に似たオブジェクト」に対してもpushメソッドを使用することができます。

対象オブジェクトは数値のプロパティやlengthプロパティなどを持っているなど、配列に似た特徴を備えている必要があります。

// 配列に似たオブジェクトに対する呼び出し.1
const object1 = { 0: 'A', 1: 'B', length: 2 };
const returnValue1 = Array.prototype.push.call(object1, 'C', 'D');
console.log(object1);
==> { '0': 'A', '1': 'B', '2': 'C', '3': 'D', length: 4 }
console.log(returnValue1);
==> 4






// 配列に似たオブジェクトに対する呼び出し.2
const object2 = { 0: 'A', 1: 'B', length: 2 };
const returnValue2 = Array.prototype.push.apply(object2, ['C', 'D']);
console.log(object2);
==> { '0': 'A', '1': 'B', '2': 'C', '3': 'D', length: 4 }
console.log(returnValue2);
==> 4

1次情報

Array.prototype.push() - MDN web docs

スプレッド構文 - MDN web docs

Function.prototype.call() - MDN web docs

Function.prototype.apply() - MDN web docs

残余引数 - MDN web docs