Array.pop() & Array.shift()

dlsals0530·2022년 5월 17일
0

JS 알아보기

목록 보기
13/18
post-thumbnail

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은 마지막 요소와 인덱스를 지워주기만 하면 된다.
  • 삭제하는 마지막 요소 제외하고는 건드리는 요소가 없다.

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

profile
3D를 좋아하는 FE 개발자입니다.

2개의 댓글

comment-user-thumbnail
2022년 5월 17일

shift가 pop보다 성능이 훨씬 우수하군요 !! 정말 특별한 경우가 아니라면 shift보단 pop을 사용하도록 노력해야겠습니다 ㅎㅎ 요즘 알고리즘 문제 풀이를 하면서 이런 시간 복잡도에 대해 관심을 많이 갖게 되는 것 같습니다!! 수고하셨습니다 😊😆

답글 달기
comment-user-thumbnail
2022년 5월 17일

shift 함수가 시간이 오래걸리는 건 알았지만 동작 방식에 대해서는 생각해보지 않았는데, 좋은 내용 감사합니다. 인덱스를 다 땡겨야 하는부분은 당연시하게 생각했던거 같네요.
오늘도 수고하셨습니다. []~( ̄▽ ̄)~*

답글 달기