JavaScriptでpush()を使って配列に要素を追加する方法【初心者向け】

当サイトでは一部リンクに広告が含まれています
アイキャッチ

JavaScriptの配列操作で頻繁に使われるのが、配列への要素の追加です。

配列に新しい要素を追加する方法はいくつかありますが、最もシンプルで使いやすいのがpush()メソッドです。

この記事では、JavaScriptのpush()メソッドについて、初心者向けにわかりやすく解説していきます。

これからJavaScriptを学ぶ方にとって、配列の操作は避けて通れない重要なトピックです。ぜひこの機会に、push()メソッドをマスターしましょう!

この記事を書いた人
筆者のプロフィールアイコン
  • 未経験からWebエンジニアとして転職成功(年収 30% アップ)
  • 現役のフルスタックエンジニアとして活躍中
  • 開発チームリーダーとして複数プロジェクトをリード
  • 副業プログラミングスクール講師として数百名以上を指導してきた教育のプロ
目次

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()メソッドですが、連想配列には使うことができないので注意が必要です。

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 はフロントエンドのすべてに通じますので、体系的に学んでおくと給与アップにもつながりますよ。



おすすめのプログラミングスクールについては、別の記事でまとめていますので是非ご覧ください。

現役のエンジニア兼プログラミングスクール講師として、自信を持っておすすめできるスクールだけを紹介しています!

目次