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分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
筆者プロフィール
| 小宮山晃史（こみやまこうじ)
現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。 iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
