JavaScriptのpop()の使い方を基礎からやさしく解説

JavaScriptのpop()は、配列の最後の要素を取り出して削除するメソッドです。
配列操作の基本としてよく使われるため、早い段階で意味と動きをしっかり理解しておくことが大切です。

push()と対になるメソッドとして登場することも多く、配列の末尾を操作したい場面で活躍します。
配列の基本から確認したい場合は、先に「JavaScriptの配列操作まとめ（map・filter・reduce）」もあわせて読むと理解しやすくなります。

この記事では、JavaScriptのpop()について、基本の使い方から注意点、よくある疑問まで、順番にわかりやすく解説します。

JavaScriptのpop()とは

pop()は、配列の最後の要素を削除し、その削除した要素を返すメソッドです。

たとえば、['赤', '青', '緑']という配列に対してpop()を使うと、最後の'緑'が取り出され、配列の中身は['赤', '青']になります。

pop()の重要なポイントは、次の2つです。

配列の末尾を対象にする

pop()が操作するのは、配列の最後の要素です。
先頭や途中の要素は対象になりません。

元の配列が変更される

pop()は新しい配列を作るのではなく、元の配列そのものを書き換えるメソッドです。
この点は、元の配列を残したい場面では特に注意が必要です。

pop()の基本構文

pop()の基本構文は次のとおりです。

配列.pop();

引数は不要です。
実行すると、配列の最後の要素が削除され、その値が返されます。

pop()の基本的な使い方

まずは、最も基本的な例を見てみます。

const fruits = ['りんご', 'みかん', 'バナナ'];

const removedItem = fruits.pop();

console.log(removedItem); // バナナ
console.log(fruits); // ['りんご', 'みかん']

このコードでは、fruits配列の最後にある'バナナ'が削除されます。
そして、削除された値がremovedItemに入ります。

pop()は、削除するだけでなく、削除した値も受け取れるのが特徴です。

pop()は何を返すのか

pop()は、削除した要素を返します。
この返り値を使うことで、削除しながら値を別の処理に活用できます。

const numbers = [10, 20, 30];

const lastNumber = numbers.pop();

console.log(lastNumber); // 30
console.log(numbers); // [10, 20]

このように、最後の要素を変数に入れて使いたいときにも便利です。

配列が空のときのpop()

配列が空の場合にpop()を使うと、エラーにはなりません。
その代わり、undefinedが返されます。

const emptyArray = [];

const result = emptyArray.pop();

console.log(result); // undefined
console.log(emptyArray); // []

空配列のまま変化せず、返り値だけがundefinedになります。
そのため、値がある前提で処理を書く場合は注意が必要です。

pop()で元の配列が変わることに注意

pop()は破壊的メソッドです。
つまり、元の配列の内容を直接変更します。

const colors = ['赤', '青', '黄'];

colors.pop();

console.log(colors); // ['赤', '青']

このように、pop()を実行した時点で元の配列から最後の要素が消えます。

元の配列を残したい場合は、事前にコピーを作ってから使う方法が適しています。

const original = ['A', 'B', 'C'];
const copied = [...original];

const removedValue = copied.pop();

console.log(removedValue); // C
console.log(original); // ['A', 'B', 'C']
console.log(copied); // ['A', 'B']

配列をコピーしたい場合は、「JavaScriptのslice()の使い方」や「JavaScriptのArray.from()についての解説」も参考になります。

pop()とpush()の関係

pop()は配列の最後から取り出し、push()は配列の最後に追加します。
この2つはセットで覚えると理解しやすいです。

const items = ['ノート', 'ペン'];

items.push('消しゴム');
console.log(items); // ['ノート', 'ペン', '消しゴム']

const removedItem = items.pop();
console.log(removedItem); // 消しゴム
console.log(items); // ['ノート', 'ペン']

末尾に追加するのがpush()、末尾から取り出すのがpop()です。
push()については、「JavaScriptのpush()の使い方を解説した記事」もあわせて読むと整理しやすくなります。

pop()とshift()の違い

pop()と似た配列メソッドにshift()があります。
違いは、どこから要素を取り出すかです。

pop()は最後の要素を削除する

const animals = ['犬', '猫', '鳥'];

const result = animals.pop();

console.log(result); // 鳥
console.log(animals); // ['犬', '猫']

shift()は最初の要素を削除する

const animals = ['犬', '猫', '鳥'];

const result = animals.shift();

console.log(result); // 犬
console.log(animals); // ['猫', '鳥']

配列の末尾を扱うならpop()、先頭を扱うならshift()です。
shift()について詳しく確認したい場合は、「JavaScriptのshift()の使い方解説」も役立ちます。

pop()を繰り返し使う例

pop()は1回だけでなく、繰り返し使うこともできます。
実行するたびに末尾の要素が1つずつ取り出されます。

const numbers = [1, 2, 3, 4];

console.log(numbers.pop()); // 4
console.log(numbers.pop()); // 3
console.log(numbers.pop()); // 2
console.log(numbers); // [1]

このように、後ろから順に値を取り出したいときに便利です。

while文と組み合わせる使い方

配列の要素がなくなるまで順番に取り出したい場合は、while文と組み合わせることもあります。

const tasks = ['確認', '修正', '保存'];

while (tasks.length > 0) {
  const task = tasks.pop();
  console.log(task);
}

console.log(tasks); // []

実行結果は次の順になります。

• 保存
• 修正
• 確認

このように、最後に入っている要素から順番に処理されます。

繰り返し処理の基本を先に確認したい場合は、「JavaScriptのwhile文の使い方」もあわせて読むと理解しやすいです。

pop()がよく使われる場面

pop()は、単に配列の末尾を消すだけでなく、実務でも基本操作としてよく登場します。

最後に追加したデータを取り消したいとき

最後に追加した要素だけを削除したい場面では、pop()が向いています。

const history = ['入力1', '入力2', '入力3'];

const cancelled = history.pop();

console.log(cancelled); // 入力3
console.log(history); // ['入力1', '入力2']

一時的に最後の要素を取り出したいとき

最後の要素を削除しつつ、その値を別の処理に使いたい場合にも便利です。

const messages = ['開始', '処理中', '完了'];

const latestMessage = messages.pop();

console.log(latestMessage); // 完了
console.log(messages); // ['開始', '処理中']

pop()のよくある勘違い

pop()はシンプルなメソッドですが、初学者がつまずきやすい点もあります。

新しい配列を返すわけではない

map()やfilter()のように新しい配列を返すメソッドではありません。
返ってくるのは削除した要素そのものです。

const data = ['A', 'B', 'C'];

const result = data.pop();

console.log(result); // C
console.log(data); // ['A', 'B']

途中の要素は削除できない

pop()で削除できるのは最後の要素だけです。
途中の要素を削除したい場合はsplice()など別の方法を使います。

const members = ['田中', '佐藤', '鈴木'];

// 最後の要素だけ削除される
const removedMember = members.pop();

console.log(removedMember); // 鈴木
console.log(members); // ['田中', '佐藤']

配列の途中を削除したい場合は、「JavaScriptのsplice()についての解説」が参考になります。

pop()とlengthの関係

pop()を使うと、配列の要素数も自動で1減ります。

const list = ['HTML', 'CSS', 'JavaScript'];

console.log(list.length); // 3

list.pop();

console.log(list.length); // 2
console.log(list); // ['HTML', 'CSS']

要素が削除されるので、lengthも連動して変化します。
この性質は、ループ処理や配列の残り件数を確認したい場面で役立ちます。

pop()を使った簡単なサンプル

最後に、pop()の動きをまとめて確認できる簡単なサンプルを紹介します。

const products = ['パソコン', 'マウス', 'キーボード'];

console.log('最初の配列:', products);

const removedProduct = products.pop();

console.log('削除した要素:', removedProduct);
console.log('削除後の配列:', products);

const nextRemovedProduct = products.pop();

console.log('さらに削除した要素:', nextRemovedProduct);
console.log('現在の配列:', products);

このコードでは、pop()を2回使って、配列の末尾から順に要素を取り出しています。
実際に手元で動かすと、pop()の挙動が直感的に理解しやすくなります。

JavaScriptのpop()のまとめ

JavaScriptのpop()は、配列の最後の要素を削除し、その値を返すメソッドです。

基本ポイントを整理すると、次のとおりです。

pop()の要点

• 配列の最後の要素を削除する
• 削除した要素を返す
• 元の配列が変更される
• 空の配列に使うとundefinedが返る

pop()は、配列の末尾を扱ううえで非常に基本的なメソッドです。
push()、shift()、unshift()とあわせて覚えることで、配列操作の土台が固まりやすくなります。

まずは小さな配列で実際に試しながら、どの値が返るのか、配列がどう変わるのかを確認していくのがおすすめです。

関連記事

• JavaScriptのpush()の使い方を解説した記事
• JavaScriptのshift()の使い方解説
• JavaScriptのunshift()についての解説
• JavaScriptのslice()についての解説
• JavaScriptのsplice()についての解説
• JavaScriptの配列操作まとめ（map・filter・reduce）
• JavaScriptのArray.from()についての解説