【JavaScript入門】配列の「push」をマスターするコツを伝授!

javascript-array-push-tutorial-top
マサト
書いた人 マサト

こんにちは、ライターのマサトです!

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

「push」を学ぶと、配列データに新しい要素を追加したり「データ同士」を連結することも可能で、複雑な構造を持つ配列も手軽に扱えるようになります。

この記事では、基本的な使い方から始まり、「push」メソッドが持つ特性や応用的な活用方法まで、整理しながらまとめて学習できるようになっているので参考にしてみてください!

「push」を使ってみよう!

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

一般的な構文は次のようになります!

配列データに「 .(ドット) 」で繋げるように「push」を記述し、新しく追加する要素を指定するだけで使えるようになります。

追加する要素は、1つでも複数あっても構いません。

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

次のサンプルで、基本的な使い方を見てみましょう!

出力結果は…

となります。

このサンプルでは、配列「items」に新しく数値データが追加されているのが分かります。

「push」メソッドで追加されたデータは、既存の配列末尾へ順番に追加されていくので、元のデータに変更が加えられるという点に注意が必要です!

複雑な配列を扱ってみよう!

今度は、少し複雑な多次元配列を試してみましょう!

先ほどのサンプルでは、数値データを追加しただけでしたが、今度は配列を追加してみましょう!

出力結果は…

となります。

配列データの中に配列が末尾に挿入されたカタチになるので、多重構造のデータ(多次元配列)になるわけです。

同じように、「連想配列」を追加してみましょう。

出力結果は…

となります。

配列の中に、連想配列を持ったデータに変わったのが分かりますね。

次のサンプルでは、複雑な構造をしている配列データに、新しいデータを追加する例です。

出力結果は…

となります。

元の配列データ「items」の中には2種類の「配列」と1つの「連想配列」が格納されています。

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

返り値について!

実は、「push」メソッドには「返り値」として、配列の要素数を返してくれる機能があります。

次のサンプル例を見てみましょう!

出力結果は…

となります。

このサンプルのように書くと、「push」メソッドの「返り値」を変数に代入することが出来ます。

配列「items」に「5」を追加すると、この配列は「1〜5」までの数値が格納されたことになるので、要素数「5」という結果が表示されます。
つまり、「items.length」と同じ結果になるわけです。

ところが、注意が必要なのは多次元配列になった時です。

次のサンプルでは、「返り値」はどのようになるでしょうか?

出力結果は…

となります。

今回の配列「items」の要素数は「3」ですが、出力結果は「5」になっています。

ポイントは、「push」メソッドを使って挿入した配列の要素数が「返り値」になるという点です!

つまり、今回の場合だと「items」の1番目の配列データに挿入したので、この配列の要素数が「返り値」になるというわけです。(「一郎〜五郎」まであるので要素数は5となる)

まとめ

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

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

・「push」は、配列の末尾に新しいデータを挿入する!
・「push」を使うと、元の配列データに変更が加えられる!
・多次元配列を使う場合は、どのデータにアクセスするかを記述する!
・「push」の返り値は、挿入した配列の要素数を返す!

となります!

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

JavaScriptカリキュラム無料公開中!

この記事はJavaScript入門完全攻略ガイド【基礎学習/アプリ開発/仕事獲得】の一部になります。このカリキュラムは、プログラミング入門者が、JavaScriptの基礎学習からアプリ開発、さらには仕事獲得まで体系的に学べる内容となっています。

JavaScript学習に必要な情報を一つにまとめていますので効率よくJavaScriptを学ぶことが出来ます。この機会に是非活用していただければと思います。


33歳、未経験だった僕がフリーエンジニアになれた理由
現在フリーでWEBエンジニアをやられている濱口直行さん。33歳で、プログラミングを学び始め、約半年という短い期間で独立までされた学習ログを余すことなくインタビューさせていただきました。

プログラミングを学習中の方はもちろん、独立をお考えの方まで幅広く活用できる記事になっています。この機会に是非活用していただければと思います。


JavaScriptを最短で習得したい方へ

弊社マンツーマンレッスンでは、未経験者の方でも安心して学習できるように

  • プログラミング基礎学習
  • オリジナルアプリ開発
  • 仕事獲得

まで徹底したサポートを行っています。

まずは『無料体験レッスン』で、弊社のコンサルタントと一緒にあなた専用の学習方法やカリキュラムを考えてみませんか?

JavaScriptならではの学習方法や仕事獲得方法など、より具体的なアドバイスもさせていただいています。

詳しくは下の画像をクリックして弊社サービス内容をご確認ください。

cta_js5

プログラミング学習者必見

専属講師に質問し放題、レッスンし放題、最短1ヶ月でフリーランスエンジニア
プログラミング学習カリキュラム無料公開中
Ruby学習カリキュラム無料公開中
 1記事最大11,000円!テックライター募集


LINEで送る
Pocket

この記事が気に入ったら
いいね!をしてフォローしよう

最新情報をお届けします

書いた人

マサト

マサト

JavaScriptが大好きで、趣味も仕事もJavaScriptを中心に活動していたら、いつの間にかフリーランスになってました。
おじさん世代になってからプログラミングを始めた経緯があり、分からないことだらけだった経験を踏まえて、読者に分かりやすい記事制作をモットーにしています。

JavaScript以外の趣味は、旅をしながらの登山やアジア巡りなど。