JavaScriptのpop()入門｜配列の末尾の要素を削除・取得する

pop()は、配列の末尾から要素を1つ取り出して返すメソッドです。取り出された要素は配列から削除されます。スタック（後入れ先出し）データ構造の実装や、配列の末尾要素の処理に使われます。元の配列を直接変更する破壊的メソッドです。

基本的な使い方

pop()は引数を取らず、配列の最後の要素を削除して返します。配列が空の場合はundefinedを返します。

JavaScript

const fruits = ["りんご", "バナナ", "みかん", "いちご"];

// 末尾の要素を取り出す
const last = fruits.pop();
console.log("取り出した要素:", last);
console.log("残りの配列:", fruits);

// もう一度取り出す
const secondLast = fruits.pop();
console.log("取り出した要素:", secondLast);
console.log("残りの配列:", fruits);

// 空の配列からpop
const empty = [];
console.log(empty.pop());

実行結果

取り出した要素: いちご
残りの配列: ["りんご", "バナナ", "みかん"]
取り出した要素: みかん
残りの配列: ["りんご", "バナナ"]
undefined

スタック構造の実装

push()とpop()を組み合わせることで、LIFO（Last In, First Out）のスタックデータ構造を簡単に実装できます。ブラウザの戻る機能や操作の取り消しなどに使われるパターンです。

JavaScript

// 元に戻す機能（Undo）の実装
const history = [];
let currentState = "";

function doAction(action) {
  history.push(currentState); // 現在の状態を保存
  currentState = action;
  console.log(`実行: ${action} | 履歴: ${history.length}件`);
}

function undo() {
  if (history.length === 0) {
    console.log("これ以上戻れません");
    return;
  }
  const previous = history.pop();
  console.log(`元に戻す: ${currentState} → ${previous || "(空)"}`);
  currentState = previous;
}

doAction("テキスト入力");
doAction("太字に変更");
doAction("画像挿入");
undo();
undo();
console.log("現在の状態:", currentState);

実行結果

実行: テキスト入力 | 履歴: 1件
実行: 太字に変更 | 履歴: 2件
実行: 画像挿入 | 履歴: 3件
元に戻す: 画像挿入 → 太字に変更
元に戻す: 太字に変更 → テキスト入力
現在の状態: テキスト入力

実践的な活用例

pop()はバッチ処理やキューの処理、配列の段階的な消費に便利です。

JavaScript

// タスクキューの処理（末尾から取り出す）
const taskQueue = ["メール送信", "レポート作成", "データ集計", "バックアップ"];

while (taskQueue.length > 0) {
  const task = taskQueue.pop();
  console.log(`処理中: ${task} | 残り: ${taskQueue.length}件`);
}

// 文字列のパス操作
const path = "/users/tanaka/documents/report.pdf";
const parts = path.split("/").filter(Boolean);

const fileName = parts.pop();
const directory = "/" + parts.join("/");
console.log("ファイル名:", fileName);
console.log("ディレクトリ:", directory);

// 末尾の要素を安全に取得（非破壊）
const numbers = [10, 20, 30, 40];
const lastItem = numbers.at(-1); // ES2022
console.log("末尾要素:", lastItem);
console.log("配列は変更なし:", numbers);

実行結果

処理中: バックアップ | 残り: 3件
処理中: データ集計 | 残り: 2件
処理中: レポート作成 | 残り: 1件
処理中: メール送信 | 残り: 0件
ファイル名: report.pdf
ディレクトリ: /users/tanaka/documents
末尾要素: 40
配列は変更なし: [10, 20, 30, 40]

末尾要素の取得だけならat(-1)を使う

配列の末尾要素を参照するだけで削除は不要な場合、ES2022のat(-1)を使えば配列を変更せずに取得できます。array[array.length - 1]よりも簡潔に書けます。

注意点

pop()は元の配列を変更する破壊的メソッドです。空の配列に対してpop()を呼んでもエラーにはなりませんが、undefinedが返されます。ループでpop()を使う場合、配列の長さが変化するため意図しない動作に注意してください。

まとめ

pop()は配列の末尾から要素を取り出して返す破壊的メソッド
空の配列ではundefinedを返す
push()と組み合わせてスタック構造を実装できる
末尾の参照だけならat(-1)を使う（非破壊的）
ループ内で使う場合は配列長の変化に注意