JavaScriptのArray push()メソッドの使い方をを現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptのArray push()メソッドの使い方について現役エンジニアが解説しています。Array push()メソッドとは、作成した配列に要素を追加できるメソッドです。JavaScriptのpushメソッドの使い方をcallメソッドやapplyメソッドを使った例で解説します。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
JavaScriptのArray push()メソッドの使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。
JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。
なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。
今回は、JavaScriptに関する内容だね！
どういう内容でしょうか？
JavaScriptのArray push()メソッドの使い方について詳しく説明していくね！
お願いします！
目次
Array push()メソッドとは
作成した配列に要素を追加できるメソッドです。Arrayオブジェクトのメソッドで、作成した配列オブジェクトからも利用できます。
var arr = [1,2,3] var ret=arr.push(4)
この場合、arrの4つ目の値として、追加した値がはいり、返り値に要素数が返却されます。
注意が必要なのは、この書き方の場合は要素を一つずつ追加する必要があるという点です。複数の要素を追加したいときに下記の様に記載すると、配列を要素として追加することになります。
var arr = [1,2,3] var addarr = [4,5,6] var ret = arr.push(addarr) > [1,2,3,[4,5,6]]
複数を追加する場合は
var arr = [1,2,3] var ret = arr.push(4,5,6) > [1,2,3,4,5,6]
もしくは、applyを利用する方法があります。こちらは、Arrayオブジェクトのメソッドを利用します。
Array push()メソッドの使い方
call()の場合
まずは、書き方から説明します。
Array.prototype.push.call(追加される配列,追加したい要素,追加したい要素・・・)
ここで、ポイントは複数を追加したい場合は、追加したい要素を複数個並べる点です。はじめにご紹介した、push()と同じになります。まとめると
var arr = [1,2,3] var ret = arr.push(4,5,6) var arr2 = [1,2,3] Array.prototype.push.call(arr2 ,4,5,6)
この二つの書き方は等価となります。
apply()の場合
こちらもまずは、書き方から説明します。
Array.prototype.push.apply(追加される配列,追加したい配列)
一つの要素を追加する場合は、call()でもapply()でも変わりはありません。配列を追加する場合は、apply()を利用する必要があります。
おまけにcall()とapply()の違いに関して説明しておきます。両方ともFunctionオブジェクトのprototypeです。先ほどの例の様に「関数.call()、関数.apply()」と書きます。
そして、実際に処理されるのは呼び出し側の関数になります。ともに２つの引数をとり、第一引数をthisとして利用します。違いが出るのが第二引数移行で、callの場合は、複数指定する事ができ、それぞれの引数に対しての処理を行いなます。
一方、applyの場合は第二引数は配列一つとなっていて、関数内部では分割された値として処理されます。
実際に書いてみよう
では、実際にどの様に処理の差があるのか見ていきましょう。
01 <!DOCTYPE html>
02 <html>
03 <script>
04 var items = ["林檎","苺","柿"]
05 console.log(items.length)
06 console.log(items)
07 var ret = items.push("梨");
08 console.log(ret)
09 console.log(items)
10 Array.prototype.push.call(items,["蜜柑","桃"]);
11 console.log(items)
12 Array.prototype.push.apply(items,["西瓜","無花果"]);
13 console.log(items)
14 items.push(["檸檬","葡萄"]);
15 console.log(items)
16 </script>
17 </html>
筆者プロフィール
| 小宮山晃史（こみやまこうじ)
現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。 iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
