【JavaScript】pop()入門: 配列の最後の要素を取り出す技術

JavaScriptの配列操作には多数の便利なメソッドがありますが、「pop()」は特に重要です。この記事では、「pop()」メソッドの基本的な使い方や活用例、そして類似のメソッドとの違いについて詳しく解説します。

「pop()」の基本的な使い方

「pop()」とは？

「pop()」は、JavaScriptの配列に関連するメソッドの1つで、配列の最後の要素を取り出し、その要素を返す機能を持っています。実際には、取り出した要素が配列から削除されるため、配列の長さも1つ減少します。

let colors = ["red", "blue", "green"];
let lastColor = colors.pop();
console.log(lastColor); // "green"
console.log(colors); // ["red", "blue"]

「pop()」の使用例4パターン

1. スタックの実装

「pop()」は、データ構造の一つである「スタック」の実装に利用されます。スタックは、後入れ先出し(LIFO)の特性を持つため、最後に追加された要素を最初に取り出す動作が必要です。

let stack = [];
stack.push(1);
stack.push(2);
stack.push(3);
console.log(stack.pop()); // 3

2. 配列の調整

配列のサイズを動的に調整したい場面で、「pop()」を使用して、不要な要素を取り除くことができます。

let scores = [50, 60, 70, 80, 90, 100];
while(scores.length > 5) {
    scores.pop();
}
console.log(scores); // [50, 60, 70, 80, 90]

3. 一時的な変数への代入

最後の要素を取り出して、一時的な変数に代入する場面もあります。

let fruits = ["apple", "banana", "cherry"];
let myFruit = fruits.pop();
console.log(`I ate a ${myFruit}!`);

4. 条件付きでの要素の削除

条件を満たす場合のみ、配列から要素を削除する際にも「pop()」が利用できます。

let temperatures = [22, 25, 28, 31, 29];
if (temperatures[temperatures.length - 1] > 30) {
    temperatures.pop();
}
console.log(temperatures); // [22, 25, 28, 31]

「pop()」と「shift()」

「shift()」とは？

「shift()」は「pop()」とは逆に、配列の先頭の要素を取り出し、その要素を返すメソッドです。この操作により、配列の長さも1つ減少します。

let numbers = [10, 20, 30, 40];
let firstNumber = numbers.shift();
console.log(firstNumber); // 10
console.log(numbers); // [20, 30, 40]

「pop()」と「shift()」の違い

「pop()」は配列の最後の要素を、一方「shift()」は配列の先頭の要素を取り出します。どちらのメソッドも、要素を取り出すと同時にその要素を配列から削除します。

「pop()」を使用する際の注意点

配列が空の場合の挙動

「pop()」を空の配列で使用すると、何も返ってこない（undefined）ので注意が必要です。

let emptyArray = [];
let result = emptyArray.pop();

console.log(result);  // undefined

取り出された要素の再利用

「pop()」で取り出された要素は元の配列から削除されるので、再利用したい場合は変数に格納しておくことが重要です。

「pop()」の使い方まとめ

「pop()」は、JavaScriptの配列の最後の要素を取り出すメソッドです。スタックの実装や配列の動的な調整など、さまざまな場面で利用されます。しかし、元の配列を変更する副作用があるため、その動作を理解して使用することが重要です。類似のメソッドとして「shift()」があり、これは配列の先頭の要素を取り出す機能を持っています。