JavaScriptのshift()メソッドとpop()メソッドの違いを徹底解説

JavaScriptの配列操作には、要素を取り出すための便利なメソッドがいくつか用意されています。その中でもよく使われるのが shift() メソッドと pop() メソッドです。どちらも配列から要素を削除して返すという共通点がありますが、動作の対象となる位置が異なります。

shift()メソッドとは

shift() メソッドは、配列の先頭（インデックス0）にある要素を削除し、残りの要素をすべて前にずらします。そして、削除された要素の値を返します。配列の長さ（lengthプロパティ）が0の場合は undefined を返します。

pop()メソッドとは

pop() メソッドは、配列の末尾（最後）にある要素を削除し、その要素を返します。このメソッドも元の配列の長さが1つ減るため、配列の内容が変更されることに注意してください。

実行例

以下のコードで、両メソッドの違いを確認してみましょう。

let fruits = ['apple', 'mango', 'orange', 'kiwi'];
let fruits2 = ['apple', 'mango', 'orange', 'kiwi'];
console.log(fruits.pop());
console.log(fruits2.shift());
console.log(fruits);
console.log(fruits2);

出力結果

kiwi
apple
[ 'apple', 'mango', 'orange' ]
[ 'mango', 'orange', 'kiwi' ]

結果のポイント

pop() は末尾の「kiwi」を返し、shift() は先頭の「apple」を返しています。また、どちらのメソッドも元の配列自体が変更される点に注意が必要です。これは破壊的メソッドと呼ばれる動作です。

パフォーマンスの違い

shift() は pop() よりも処理速度が遅くなります。理由は、先頭の要素を削除した後、残りのすべての要素を一つずつ左に移動させる必要があるためです。一方、pop() は末尾の要素を削除するだけなので、他の要素を移動させる必要がありません。大きな配列を頻繁に操作する場合は、このパフォーマンスの違いを考慮するとよいでしょう。