자바스크립트 shift()와 pop() 메서드의 차이점 완벽 정리

shift()와 pop() 메서드란?

자바스크립트 배열에서 요소를 제거할 때 가장 많이 사용되는 메서드가 바로 shift()와 pop()입니다. 두 메서드 모두 원본 배열을 직접 변경(mutation)한다는 공통점이 있지만, 제거하는 요소의 위치가 다르다는 핵심적인 차이가 있습니다.

shift() 메서드

shift()는 배열의 첫 번째 요소(인덱스 0)를 제거하고, 나머지 요소들을 한 칸씩 앞으로 이동시킨 후 제거된 값을 반환합니다. 만약 배열의 길이(length)가 0이라면 undefined를 반환합니다.

pop() 메서드

pop()은 배열의 마지막 요소를 제거하고 해당 요소를 반환합니다. 이 메서드 역시 호출 시 배열의 length 속성을 변경합니다.

예제 코드

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()이 더 빠른 이유

pop()은 마지막 요소만 제거하면 되기 때문에 시간 복잡도가 O(1)로 매우 효율적입니다. 반면 shift()는 첫 번째 요소를 제거한 뒤 남은 모든 요소를 한 칸씩 왼쪽으로 이동시켜야 하므로 시간 복잡도가 O(n)이며, 배열의 크기가 클수록 상대적으로 느려집니다.

한눈에 보는 비교

정리

앞쪽 요소를 제거할 때는 shift(), 뒤쪽 요소를 제거할 때는 pop()을 사용하면 됩니다. 특히 대용량 데이터를 다룰 때는 성능 차이를 고려하여 불필요한 shift() 호출을 줄이는 것이 좋습니다.