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);
==> 41次情報
Array.prototype.push() - MDN web docs
Function.prototype.call() - MDN web docs