実行環境 Node.js 15.2.1

公開日 2021年2月14日 JST

コード例の出力としてconsole.logを使用しています。

使用方法がわからない場合は以下のページを参照してからコード例を確認してください。

console.logの使用方法

pop(Array、配列)

このページでは豊富な例を用いてJavaScript(js)のArrayオブジェクト(配列)のpopメソッドの使い方を学ぶことができます。

JavaScript(js)のpopメソッドはArrayオブジェクト(配列)のメソッドの1つです。
「呼び出し元の配列の末尾の要素」を削除し、削除した要素の値を返り値として返します。

TL;DR

基本

// 末尾の要素を削除し、要素の値を返り値として返す
const array1 = ['js', 'javascript', 'typescript'];
const returnValue1 = array1.pop();
console.log(array1);
==> [ 'js', 'javascript' ]
// 返り値は削除した値
console.log(returnValue1);
==> typescript





const array2 = [{ name: 'Olivia', major: 'Economics' }, { name: 'Dina', major: 'Law' }];
const returnValue2 = array2.pop();
console.log(array2);
==> [ { name: 'Olivia', major: 'Economics' } ]
console.log(returnValue2);
==> { name: 'Dina', major: 'Law' }





// 空配列の場合の返り値はundefined
const array3 = [];
const returnValue3 = array3.pop();
console.log(array3);
==> []
console.log(returnValue3);
==> undefined

配列に似たオブジェクトに対する使用

// 配列に似たオブジェクトに対する呼び出し.1
const object1 = { 0: 'A', 1: 'B', 2: 'C', length: 3 };
const returnValue1 = Array.prototype.pop.call(object1);
console.log(object1);
==> { '0': 'A', '1': 'B', length: 2 }
console.log(returnValue1);
==> C





// 配列に似たオブジェクトに対する呼び出し.2
const object2 = { 0: 'A', 1: 'B', 2: 'C', length: 3 };
const returnValue2 = Array.prototype.pop.apply(object2);
console.log(object2);
==> { '0': 'A', '1': 'B', length: 2 }
console.log(returnValue2);
==> C

解説

基本

popメソッドは「呼び出し元の配列の末尾の要素」を削除し、削除された値を返り値として返します。

空配列に対して使用すると返り値はundefinedとなり、呼び出し元の配列にも変化はありません。

const array1 = [true, true, true, false];
const returnValue1 = array1.pop();
console.log(array1);
==> [ true, true, true ]
// 返り値は削除された要素の値
console.log(returnValue1);
==> false





// 空配列
const array2 = [];
const returnValue2 = array2.pop();
console.log(array2);
==> []
console.log(returnValue2);
==> undefined

配列に似たオブジェクトに対する使用

callメソッドやapplyメソッドを使用することで「配列に似たオブジェクト」に対してpopメソッドを使用することもできます。

対象のオブジェクトは数値のプロパティとlengthプロパティなどを持っていることが必要であり、 条件を満たさないオブジェクトに対してpopメソッドを呼び出しても期待通りの挙動にはなりません。

// 配列に似たオブジェクトに対する呼び出し.1
const object1 = { 0: 'Foo', 1: 'Bar', 2: 'Ninja', length: 3 };
const returnValue1 = Array.prototype.pop.call(object1);
console.log(object1);
==> { '0': 'Foo', '1': 'Bar', length: 2 }
console.log(returnValue1);
==> Ninja





// 配列に似たオブジェクトに対する呼び出し.2
const object2 = { 0: 'Foo', 1: 'Bar', 2: 'Ninja', length: 3 };
const returnValue2 = Array.prototype.pop.apply(object2);
console.log(object2);
==> { '0': 'Foo', '1': 'Bar', length: 2 }
console.log(returnValue2);
==> Ninja

1次情報

Array.prototype.pop() - MDN web docs

Function.prototype.call() - MDN web docs

Function.prototype.apply() - MDN web docs