JavaScriptのpopメソッドとは？基本の構文と使い方をわかりやすく解説

JavaScriptの配列には、データを操作するためのさまざまなメソッドが用意されています。その中のひとつがpopメソッドです。Web開発者は、配列から最後の要素を取り除きたいときや、取り除いた要素を使って何か処理を行いたいときに、このメソッドを活用します。本記事では、popメソッドの基本的な使い方を具体例とともにわかりやすく解説します。

popメソッドの構文

popメソッドの構文は非常にシンプルです。定義上、popメソッドは配列の最後の要素を削除し、その削除した要素を返す働きを持ちます。

let frozen = [ "Anna", "Elsa", "Olaf", "Kristoff", "Sven" ];
let popped = frozen.pop();

このコードをブラウザのコンソールに入力し（※入力方法がわからない場合は下記の補足を参照）、console.log(frozen)とconsole.log(popped)を実行すると、どのような結果になるでしょうか？

frozenは要素が1つ減った配列として返され、poppedには配列から削除された要素が格納されます。

※ 補足：Chrome / Firefox / SafariでJavaScriptコンソールを開く方法

Chrome / Firefox： Chromeでは、ページ上で右クリックして「検証（Inspect）」を選択します。Chrome DevToolsが開き、上部に複数のタブが表示されます。Firefoxも手順はほぼ同じですが、「要素を調査（Inspect Element）」を選択します。「Console」タブをクリックすれば、コードを試せる作業スペースが表示されます。

Safari： Safariの場合は、あらかじめ「開発」メニューを有効にしておく必要があります。Safariを開き、「Safari」→「環境設定」と進み、「詳細設定」タブを選択します。「メニューバーに“開発”メニューを表示」にチェックを入れます。環境設定を閉じたら、メニューバーの「開発」から「JavaScriptコンソールを表示」を選択してください。

これで準備完了です。上記のサンプルコード（または自分で考えたオリジナルの例）を入力してみましょう。frozenとpoppedの両方の変数を作成したら、console.logでそれぞれ出力し、コードが配列の要素に与える変化を実際に確認してみてください。

popメソッドは配列の長さ（length）を変更する点にも注意が必要です。配列に要素が存在する限り、何度でも繰り返し使用できます。また、空の配列に対してもエラーをスローすることなく実行できますが、その場合の戻り値は「undefined」になります。

ブートキャンプ参加者の81%が、受講後にテック業界でのキャリア展望への自信が高まったと回答しています。今すぐ自分に合ったブートキャンプを見つけてみませんか。

ブートキャンプ卒業生の平均的なキャリアチェンジ期間は、受講開始から初めての就職まで6ヶ月未満と短いことも特徴です。

まとめ

popメソッドは、配列から最後の要素を削除し、その要素を使ってさらに処理を行いたい場面で活躍する便利なメソッドです。末尾に要素を追加するpushメソッドとは正反対の動作であり、先頭の要素を削除して返すshiftメソッドともよく比較されます。これらの配列メソッドを使いこなせるようになると、JavaScriptでのデータ操作の幅がぐっと広がります。ぜひ実際にコードを書いて、挙動を確かめてみてください。