【JavaScript入門】pushで配列に要素を追加する方法(連想配列/pop)

こんにちは、ライターのマサトです!今回は、配列の要素を追加するのによく使われる「push」メソッドを学習していきましょう!

この記事では、

  • 「push」とは?
  • 配列に要素を追加する方法
  • 「push」の返り値について

という基本的な内容から、連想配列へのデータの追加方法、配列へのオブジェクトの追加方法、「push」「pop」の違いについて、concatメソッドで配列を結合する方法などの応用的な使い方に関しても解説していきます。

この記事で、「push」メソッドをしっかり学習して自分のスキルアップを目指しましょう!

「push」とは?

それでは、まず最初に「push」の基本的な使い方から学習を始めましょう!

「push」はArray(配列)オブジェクトの組み込みメソッドとして用意されており、主に配列データの末尾に任意の要素を追加するために利用されます。一般的な構文は次のようになります!

var items = 配列データ;

items.push( 追加する要素, 要素, 要素・・・ );

配列データに「 .(ドット) 」で繋げるように「push」を記述し、新しく追加する要素を指定するだけで使えるようになります。追加する要素は、1つでも複数あっても構いません。

データの種類も、数値・文字列・配列・オブジェクト…など、さまざまなデータを追加することが可能です。

配列に要素を追加する方法

今度は、実際に「push」を使って配列へデータを追加してみましょう!次のコード例を見てください。

var items = [1,2,3,4];

//配列「items」に数値データを追加する
items.push( 5,6,7,8 );

console.log( items );

実行結果

[1, 2, 3, 4, 5, 6, 7, 8]

このサンプルでは、配列「items」に新しく数値データ「5,6,7,8」が追加されているのが分かります。「push」メソッドで追加されたデータは、既存の配列末尾へ順番に追加されていくので、元のデータに変更が加えられるという点に注意をしましょう!

「push」の返り値について

実は、「push」メソッドには「返り値」として、配列の「要素数」を返してくれる機能があります。次のサンプル例を見てみましょう!

var items = [1,2,3,4];

//要素数を取得する
var result = items.push();

console.log( result );

実行結果

4

このサンプルのように、「push」の引数を空にして返り値を変数へ代入すると、その配列の「要素数」を取得することが出来るわけです。つまり、「items.length」と同じ結果になるということですね。

連想配列では「push」を使えない?

JavaScriptには、通常の「配列」とは別に複雑な構造をした「連想配列(オブジェクト)」が存在します。

そして、ポイントは「push」メソッドが配列には使えるけど、連想配列には利用できないという点です!例えば、次のコード例を見てください。

var items = [1,2,3,4];

items.push( [5,6,7,8] );

console.log( items );

実行結果

[ 1,2,3,4, [5,6,7,8] ]

このサンプルでは、配列「items」の中にもう1つ別の配列を追加した多次元配列を作成しています。「push」を使って、配列の中に別の配列を追加するのは特に問題ありませんね。

今度は、連想配列の中に別の配列を追加してみましょう。

var obj = { name:'太郎', age:30 };

obj.push( ['花子', 28] );

console.log( obj );

実行結果

Uncaught TypeError: obj.push is not a function

この例では、連想配列「obj」を作成してその中に別の配列を追加しようとしているのですが、実行結果を見るとエラーになっているのが分かります。

このことから分かるように、「push」はあくまで配列の組み込みメソッドなので、連想配列(オブジェクト)には「push」というメソッドが用意されていないために利用できないわけです。

ちなみに連想配列に要素を追加するには、まだ連想配列にないキー文字列を指定して値を代入します。疑似コードは以下のようになります。

arr[キー文字列] = 値 //新規キーと値をセット

連想配列への追加方法について詳しく知りたい方は以下の記事を参考にしてください。

【JavaScript入門】連想配列(Dictionary)の取得/追加/ソートまとめ
更新日 : 2019年7月5日

配列にオブジェクトを追加しよう

JavaScriptのオブジェクトは、構造的には連想配列と同じです。先ほども解説した通り、このオブジェクトの中にデータや配列などを「push」で追加することはできません。

しかし、配列の中にオブジェクトを追加することは可能なので、ちょっと実践してみましょう!

var items = [1,2,3,4];

//オブジェクトを配列の中に追加する
items.push( {one: 1, two: 2, three: 3} );

console.log( items );

実行結果

[ 1,2,3,4, {one:1, two:2, three:3} ]

このサンプルでは、配列「items」の中にオブジェクトデータを「push」メソッドで追加しているのが分かります。つまり、「push」メソッドは配列データの中に文字や数値、配列やオブジェクトのような複雑なデータを追加することができるというわけですね。

また、多次元配列の中にある任意の配列にデータを追加する場合には次のようになります!

var items = [ [1 ,2 ,3 ], ['あ','い','う','え'], {one:1, two:2, three:3}];

//「items」の1番目の配列内に新しいデータを追加
items[1].push( 'お' );

console.log( items );

実行結果

[ [1 ,2 ,3 ], ['あ','い','う','え','お',], {one:1, two:2, three:3} ]

元の配列データ「items」の中には2種類の「配列」と1つの「オブジェクト」が格納されています。

「items[1].push()」と記述することで、「items」の1番目の配列(「あ〜え」までの文字データ)に新しいデータを追加することが出来るわけです。このサンプルでは、新しく文字データ「お」を挿入しているのが分かりますね。

当然ですが、「items[2].push( {four:4} );」のように記述してオブジェクトの中に別のデータを追加しようとするとエラーになります。(あくまで「push」は配列に利用できるメソッドなのです…)

「push」「pop」の違いについて

ここまで、「push」の使い方について学習してきましたが、JavaScriptにはよく似たメソッドとして「pop」が存在します。

どちらも配列の要素を操作するメソッドなのですが、「push」は配列の末尾にデータを追加するのに対して、「pop」は配列の末尾のデータを削除するために利用されます。次のコード例を見てください。

var array = [1,2,3,4,5];

array.pop();

console.log(array);

実行結果

[1,2,3,4]

このサンプルでは、配列「array」に「pop」メソッドを使っており、実行結果から分かるように末尾の数値「5」が削除されているのが分かりますね。

「push」メソッドがデータの追加で、「pop」メソッドがデータの削除であるという点は勘違いしやすいので忘れいないようにしましょう!

concatメソッドで配列を結合する方法

ここでは、concatメソッドで配列を結合する方法を解説します。concatメソッドは呼び出し元の配列の後ろに、引数に指定した配列を追加します。次のプログラムで確認してみましょう。

var array1 = ['sa', 'mu'];
var array2 = ['ra', 'i'];
var result = array1.concat(array2);

console.log(result);

実行結果:

sa,mu,ra,i

このようにして、2つの配列を結合することができました。concatメソッドの詳しい使い方はこちらの記事で解説しているので、ぜひ確認してください。

【JavaScript入門】concat()で配列・文字列を結合やコピーする方法
更新日 : 2018年9月3日

配列の使い方総まとめ

この記事では紹介しきれなかった配列の様々な使い方はこちらの記事で詳しく解説しているので、ぜひ確認してください。

【JavaScript入門】配列の使い方と操作まとめ(初期化・追加・結合・検索・削除)
更新日 : 2020年3月10日

まとめ

今回は、配列の「push」メソッドについて学習しました!

最後に、ポイントをもう一度まとめてみましょう!

・「push」は、配列の末尾に新しいデータを挿入する
・「push」を使うと、元の配列データに変更が加えられる
・返り値として配列の要素数を取得することができる
・連想配列(オブジェクト)には「push」が利用できない
・「push」はデータの追加で「pop」はデータの削除

となります!

上記内容が理解できるまで、繰り返しコードを書いてみてどのように実行されるかを確認するようにしておきましょう!

LINEで送る
Pocket

ITエンジニアへ転職したい方におすすめ

自分を評価してくれる企業に転職して年収を上げたい! 自分のスキルにあった独自案件を知りたい!
エンジニアは今もっとも注目されている職業の1つ。エンジニアになって年収を増やしたい方や、あなたのスキルに見合った企業へ転職したいエンジニアの方も多いですよね。

しかし、大手の転職媒体は扱う求人数が多くても、誰もが登録しているので競争率もかなり高くなっています。そのため、あなたの条件に見合った企業を見つけても転職するためには、相応の努力とスキルが必要となります。

こういった媒体では、未経験からエンジニアを目指す方やエンジニア歴2〜3年で転職を考えている方にとって、最適な転職環境とはいえません。

そこでオススメしたいのが、未経験者や若手エンジニア向けの独自案件を多く掲載している「侍ワークス」です。

侍ワークスは、独自案件を多く掲載しているだけでなく、

・応募から就業まで一貫したサポート

・就業後もアフターフォロー

といった経験の浅い方や初めてエンジニアを目指す方にも安心のフォロー体制が整っています。もちろん登録は完全無料!しかも案件を見るだけなら登録も不要です。

まずは、お気軽にどんな求人があるか見てみてください。あなたにピッタリの企業がきっと見つかりますよ! 侍ワークスの求人情報を見る

書いた人

マサト

マサト

フリーランスのIT系ライターを8年従事。侍ブログ編集部としては、これまで270記事以上の記事を執筆。
独学でJavaScript, Node.js, Linuxを3年学習。個人プロダクトのWebメディア・アプリ作成経験あり。