JavaScriptの配列操作で頻繁に使われるのが、配列への要素の追加です。
配列に新しい要素を追加する方法はいくつかありますが、最もシンプルで使いやすいのがpush()メソッドです。
この記事では、JavaScriptのpush()メソッドについて、初心者向けにわかりやすく解説していきます。
これからJavaScriptを学ぶ方にとって、配列の操作は避けて通れない重要なトピックです。ぜひこの機会に、push()メソッドをマスターしましょう！
- 現役のフルスタックエンジニアとして活躍中
- 開発チームリーダーとして複数プロジェクトをリード
- 副業プログラミングスクール講師として数百名以上を指導してきた教育のプロ
- プログラミングスクールのカリキュラム執筆経験あり
push()メソッドとは
push()メソッドは、配列の末尾に新しい要素を追加するためのメソッドです。
配列に.push()とドット記法でつなげ、引数に追加したい要素を指定するだけで使えます。一般的な構文は次の通りです。
配列.push(追加する要素);引数には、数値や文字列、配列、オブジェクトなど様々なデータを指定できます。
配列に要素を追加する基本的な使い方
実際に配列に要素を追加する基本的な使い方を見ていきましょう。
const fruits = ['apple', 'banana'];
fruits.push('orange');
console.log(fruits);
// 実行結果: ["apple", "banana", "orange"]この例では、fruits配列に文字列の'orange'を追加しています。
push()を使うと、元の配列に対して破壊的な変更が加えられ、追加した要素は配列の末尾に置かれることに注意しましょう。
複数の要素を一度に追加する
push()メソッドでは、複数の要素を一度に追加することもできます。
その場合は、追加したい要素をカンマ区切りで引数に指定します。
const numbers = [1, 2];
numbers.push(3, 4, 5);
console.log(numbers);
// 実行結果：[1, 2, 3, 4, 5]push()メソッドの返り値
push()メソッドは、要素を追加した後の配列の長さ（要素数）を返します。
返り値を変数に代入すれば、追加後の配列の長さを取得できます。
const numbers = [1, 2];
const newLength = numbers.push(3, 4);
console.log(newLength); // 実行結果：4
console.log(numbers); // 実行結果：[1, 2, 3, 4]この例では、numbers配列に2つの要素を追加した後の長さ4が、newLength変数に代入されています。
連想配列（オブジェクト）にはpush()メソッドは使えない
JavaScript の配列とよく似た構造に連想配列（オブジェクト）があります。
連想配列とは、キーと値のペアで管理されるデータ構造のことです。
普通の配列では使えるpush()メソッドですが、連想配列には使うことができないので注意が必要です。
const person = { name: '太郎', age: 20 };
person.push( {height: 170} );
console.log(person);
// 実行結果：Uncaught TypeError: person.push is not a functionこのようにエラーが発生してしまいます。
連想配列にプロパティを追加するには、存在しないキーを指定してそこに値を代入する方法を使います。
const person = { name: '太郎', age: 20 };
person.height = 170;
console.log(person);
// 実行結果：{name: "太郎", age: 20, height: 170}配列にオブジェクトを追加する
今度は逆に、配列の中にオブジェクトを追加する方法を見ていきましょう。
push()メソッドを使えば、配列に様々な型のデータを追加できると説明しました。オブジェクトも例外ではありません。
const dataList = ['one', 2, true];
dataList.push( {x: 10, y: 20} );
console.log(dataList);
// 実行結果：["one", 2, true, {x: 10, y: 20}]この例のように、オブジェクトリテラルをpush()の引数に渡せば、配列の末尾にオブジェクトが追加されます。
push()メソッドとpop()メソッドの違い
push()によく似たメソッドとして、pop()があります。
混同しやすいこの2つのメソッドの違いを理解しておきましょう。
- push()メソッド：配列の末尾に要素を追加する
- pop()メソッド：配列の末尾から要素を取り除く
つまり、やっていることは正反対ということです。
const numbers = [1, 2, 3, 4];
numbers.pop();
console.log(numbers);
// 実行結果：[1, 2, 3]pop()は配列の末尾から要素を1つ取り除き、取り除いた要素を返り値として返します。
配列に要素を追加するその他の方法
push()以外にも、配列に要素を追加する方法はいくつかあります。
それぞれの特徴を簡単に見ていきましょう。
インデックスを指定して要素を追加する
存在しないインデックスを指定して要素を追加する方法です。
const fruits = ['apple', 'banana'];
fruits[2] = 'orange';
console.log(fruits);
// 実行結果：["apple", "banana", "orange"]unshift()メソッドで配列の先頭に要素を追加する
unshift()メソッドは、配列の先頭に要素を追加します。
push()とは逆の動作をするメソッドと言えます。
const fruits = ['banana', 'orange'];
fruits.unshift('apple');
console.log(fruits);
// 実行結果：["apple", "banana", "orange"]concat()メソッドで配列を結合する
concat()メソッドは、2つ以上の配列を結合して新しい配列を生成します。
元の配列は変更されず、結合された新しい配列が返り値となります。
const arr1 = [1, 2];
const arr2 = [3, 4];
const arr3 = arr1.concat(arr2);
console.log(arr3); // 実行結果：[1, 2, 3, 4]
console.log(arr1); // 実行結果：[1, 2]
console.log(arr2); // 実行結果：[3, 4]spread構文で配列を展開して要素を追加する
ES2015で導入されたspread構文（…）を使って配列を展開し、別の配列に要素を追加する方法もあります。
const arr1 = [1, 2];
const arr2 = [3, 4];
const arr3 = [...arr1, ...arr2];
console.log(arr3); // 実行結果：[1, 2, 3, 4]まとめ
この記事では、JavaScriptでpush()メソッドを使って配列に要素を追加する方法について解説しました。
要点をまとめると以下のようになります。
- push()メソッドは、配列の末尾に要素を追加するメソッド
- 複数の要素をまとめて追加することもできる
- push()メソッドは追加後の配列の長さを返す
- 連想配列（オブジェクト）にはpush()メソッドは使えない
- push()メソッドは要素の追加、pop()メソッドは要素の削除をする
配列操作はJavaScriptでは非常に重要で、よく使われます。
ここで紹介したpush()メソッドをはじめ、他の配列メソッドもしっかりマスターしておきましょう。
コードを書く機会を多く作って、配列の操作に慣れていくことが上達への近道です。
JavaScriptを効率的に身につける勉強法は？
JavaScript には興味があっても、プログラミング学習をはじめたばかりであれば、以下のような疑問を持つかもしれません。
- JavaScript を身に付けてエンジニアになるには何をすればいい？
- 何から勉強すればいいんだろう？
- 効率よく勉強するには？
JavaScriptは学ぶべき内容が非常に多いため、勉強法の選び方を間違うと時間・労力・お金が無駄になってしまいます…。
そのため、こちらの記事を参考に、ご自身に最適な学習方法を選んでみませんか？
