Array.prototype.pop() 사용법

pop() 함수는
배열의 맨 마지막 끝의 요소를 제거(pop, 맨 아래의 것을 위로 쏙 빼내는)하는 함수입니다.
제거된 요소를 반환합니다.

JavaScript 
const arr = [1, 2, 3];

// 배열의 마지막 끝의 요소를 제거합니다.
arr.pop();
console.log(arr); // 출력: [1, 2]

pop() 함수의 형식은 다음과 같습니다.

구문

JavaScript 
arr.pop()

arr은 pop() 함수를 적용할 배열입니다.

반환 값

pop() 함수로 배열에서 제거한 마지막 요소 값을 반환합니다.
pop() 함수로 제거할 마지막 요소 값이 없이 배열이 비어 있으면 undefined가 반환됩니다.

JavaScript pop() 함수의 반환 값 
const arr = [1, 2, 3];

// 배열의 마지막 끝의 요소를 제거합니다.
const removedItem = arr.pop();
console.log(arr); // 출력: [1, 2]
console.log("반환 값 -", removedItem); // 출력: "반환 값 - 3"

// 배열이 비어있을 경우 1
const emptyArray_1 = [];
const emptyArray_1_removedItem = emptyArray_1.pop(); // // 제거할 마지막 요소 값이 없이 배열이 비어 있음

console.log("반환 값 -", emptyArray_1_removedItem); // 출력: "반환 값 -" undefined

// 배열이 비어있을 경우 2
const emptyArray_2 = [1];
const emptyArray_2_removedItem = emptyArray_2.pop();

console.log("반환 값 -", emptyArray_2_removedItem); // 출력: "반환 값 - 1"

주의할 점과 여러 상황

pop() 함수를 사용할 때 중요한 몇 가지 개념과 주의할 점이 있습니다.

  • 반환 값
  • 원본 배열 수정 및 배열의 길이
  • 반복문과 함께 사용해서 역순 정렬
  • delete 키워드로 배열의 마지막 요소 제거하기

반환 값

pop() 함수는 제거한 요소를 반환합니다. 반환된 값을 변수에 저장할 수 있습니다.

JavaScript 
const fruits = ["apple", "banana", "cherry"];
const removedFruit = fruits.pop();

console.log(removedFruit); // 출력: "cherry"

원본 배열 수정 및 배열의 길이

pop() 함수는 원본 배열을 수정합니다. 따라서, 배열에서 요소를 제거하면 배열이 변경되고 배열의 길이가 줄어든다는 점을 이해해야 합니다.

JavaScript 
const fruits = ["apple", "banana", "cherry"];
fruits.pop();

console.log(fruits.length); // 출력: 2

코드 부연설명
배열의 length 속성은 배열에 포함된 요소의 개수를 숫자로 반환합니다.

반복문과 함께 사용해서 역순 정렬

pop() 함수와 반복문을 사용하여 배열을 역순으로 정렬할 수 있습니다.

JavaScript pop() 함수와 반복문을 사용하여 배열을 역순으로 정렬 
const fruits = ["apple", "banana", "cherry"];

// 역순으로 정렬하기 위한 빈 배열 생성
const reversedFruits = [];

// 역순으로 출력하기 위해 반복문 사용
while (fruits.length > 0) {
  reversedFruits.push(fruits.pop());
}

// 역순으로 정렬된 배열 출력
console.log(reversedFruits); // 출력: ["cherry", "banana", "apple"]

코드 부연설명
while 문은 조건식이 참(true)인 동안 코드 블록을 반복 실행하는 반복문입니다.

배열을 역순으로 정렬하려면 자바스크립트에는 reverse() 함수가 내장되어 있으며, 이 함수를 사용하면 배열을 간단하게 역순으로 정렬할 수 있습니다. reverse() 함수를 사용하는 것이 훨씬 편리하고 더 직관적입니다.

코드 부연설명
배열의 reverse() 함수는 배열의 요소 순서를 역순(reverse)으로 정렬하는 함수입니다.

JavaScript reverse() 함수를 사용하여 배열을 역순으로 정렬 
const fruits = ["apple", "banana", "cherry"];

// 배열을 역순으로 정렬
$reversedFruits = fruits.reverse();

// 역순으로 정렬된 배열 출력
console.log($reversedFruits);

// 역순으로 정렬된 배열 출력
console.log(reversedFruits); // 출력: ["cherry", "banana", "apple"]

delete 키워드로 배열의 마지막 요소 제거하기

pop() 함수 대신 delete 키워드를 사용하여 배열에서 마지막 요소를 제거하면 해당 요소의 값은 배열에서 제거되는 대신 비어 있게 됩니다. 배열의 길이도 변경되지 않습니다.

JavaScript 
const fruits = ["apple", "banana", "cherry"];

// 배열의 마지막 요소를 제거
delete fruits[fruits.length - 1];

// 배열 출력
console.log(fruits); // 출력: ["cherry", "banana", 비어 있음]
console.log(fruits[3]); // 출력: undefined

배열에서 마지막 요소를 제거하기 위해서 delete 키워드를 사용하는 것은 권장하는 방법이 아닙니다.

명세서

pop() 함수에 대한 명세서 사양
명세서 사양
pop() ECMAScript Language Specification
#sec-array.prototype.pop

브라우저 호환성

pop() 함수에 대한 브라우저 호환성
메서드
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
pop() 1 12 1 1

caniuse.com에서 더 자세한 정보를 확인해 보세요.

참고문헌

같이 보기