Array.pop() & Array.shift()

Array.pop()

배열이 있다면, 마지막 요소를 반환하는 함수다.

let arr = [1,2,3];

arr.pop(); // 3
arr.pop(); // 2
arr.pop(); // 1

console.log(arr); // []

Array.shift()

배열이 있다면, 첫 요소를 반환하는 함수다.

let arr = [1,2,3];

arr.shift(); // 1
arr.shift(); // 2
arr.shift(); // 3

console.log(arr); // []

두 함수의 성능 차이

위 두 함수는 일정 갯수 이하인 배열에서는 차이가 없이 빠르게 반환한다.

하지만, 1만 개 정도가 넘어가면 성능차이는 확실하게 난다.

1. shift()

let arr = Array.from({length: 100000}, (v) => 0);

var start = Date.now();
while(arr.length){
    arr.shift()
}
var end = Date.now()
console.log(end-start) // 평균 475ms

2. pop()

let arr = Array.from({length: 100000}, (v) => 0);

var start = Date.now();
while(arr.length){
    arr.pop()
}
var end = Date.now()
console.log(end-start) // 평균 1ms

10만 개만 되어도 눈에 띄게 차이가 난다.
100만 개도 시도해봤다.

pop은 4ms이 나오지만,
shift는 시간이 오래 걸리는지 결과가 나오지 않았다.

성능 차이가 나는 이유

• shift는 위 그림과 같이, 첫 요소를 지우고 나머지 모든 요소 index를 하나씩 앞당긴다.
• 그래서 배열이 크면 클수록 성능이 좋지 않다.
  
• pop은 마지막 요소와 인덱스를 지워주기만 하면 된다.
• 삭제하는 마지막 요소 제외하고는 건드리는 요소가 없다.

배열이 작다면 모두 상관이 없다.
하지만 확장성을 생각해야 하는 프로그래머라면,
이런 사소한 것도 왜 그렇게 되는지 확인을 해야겠다고 생각한다.
그래야 나중에 최적화하기에도 적합해질 수 있다고 생각한다.