【JavaScript】push()とpop()の使い方【サンプルコード付】

こんちには。

勉強メモといってもどういうことを書けばいいかわからなかったのですが、これから自分でサンプルコードを書いて動作を確認してそれをブログにまとめるといったレベルのことからでも始めてみようと思います。

今回はJavaScriptの配列のメソッドであるpush()とpop()の使い方、動作について解説します。

pushメソッド

pushメソッドは配列の末尾に指定した要素を追加するメソッドです。

基本構文

array.push(n1, n2, ...)  

引数 : 追加したい要素

戻り値 : 追加したあとの配列の長さ

サンプルコード

var array = ["ringo", "gorira", "rappa"];

var tmp = array.push("painappule");
console.log("push後の配列:" + array);
console.log("pushの戻り値:" + tmp);

実行結果

しりとりをやって出たワードを配列に入れていっていると考えて下さい。（なぜかローマ字なのは突っ込まないで笑）
りんご→ゴリラ→ラッパの次にパイナップルを追加したいのでパイナップルをpushします。
push後の配列を確認すると配列にパイナップルが入っているのが確認でき、その配列の長さが４だということも戻り値からわかります。

popメソッド

popメソッドは配列の末尾の要素を取り出すメソッドです。

基本構文

array.pop()  

引数 : なし

戻り値 : 削除した要素

サンプルコード

var array = ["ringo", "gorira", "rappa"];

array.push("pan");
console.log("push後の配列" + array)

var tmp = array.pop();
console.log("pop後の配列:" + array);
console.log("popの戻り値:" + tmp);

実行結果

こちらもしりとりでラッパの次にパンを入れてしまったのでゲーム終了となってしまいました。
ですが、誰かがパンの手前からやり直したいと言い出したので配列の最後尾の要素であるパンをpopで取り出します。
実行結果からpop後の配列からパンが消えていること、popの戻り値がパンであることが確認できると思います。

まとめ

今回は配列を操作する基本的なメソッドであるpush()とpop()を紹介しました。
push,popの動作の仕方はスタックとキューといったアルゴリズムを理解する上で必要な基本動作ですのでぜひ使い方、動作を確認してみて下さい！