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>
実は私も！？独学で損する人の特徴
「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ
独学には向き不向きがあり、実はスクールが向いている人も大勢います。
そんな方のために参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
- ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
- ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った
少しでも当てはまる部分があれば、
スクールが向いているかもしれません。
お試しのつもりで、まずは一度
無料相談
に参加してみませんか？
現役エンジニア・デザイナーに何でも気軽に相談できる30分
を
すべて無料で
できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
筆者プロフィール
| 小宮山晃史（こみやまこうじ)
現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。 iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
プログラミングを独学していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
厳しい試験を通過した講師
があなたの相談に真摯に向き合います。
「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
