[JavaScript] 배열(Array) - shift / unshift / pop / push

자바스크립트로 배열에 값을 추가하거나 제거할 때 사용하는 메서드로는 shift, unshift, pop, push 가 있다. 각각의 차이점을 알아보자.

📍 push()

배열의 맨 끝에 값을 추가한다. 하나 이상의 요소를 추가할 수 있으며, 추가된 새로운 길이를 반환한다.
아래 코드가 실행되었을 때, 배열은 'pink', 'sky', 'purple'가 된다.

📍 pop()

배열의 맨 끝 값(마지막 요소)을 제거하고 그(제거된) 요소를 반환한다.
빈 배열의 경우 undefined를 반환한다.

let colors = ['pink', 'sky'];

colors.push('purple'); // 3

colors.pop(); // 'purple'

📍 unshift()

배열의 맨 앞에 값을 추가하고, 추가된 배열의 길이를 반환한다.
아래 코드가 실행되었을 때, 배열은 'black', 'red', 'blue'가 된다.

📍 shift()

배열의 맨 앞의 값(첫 번째 요소)을 제거하고, 그(제거된) 요소를 반환한다.
빈 배열인 경우 pop()과 마찬가지로 undefined가 반환된다.

let colors = ['red', 'blue'];

colors.unshift('black'); // 3

colors.shift(); // 'black'

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/shift