Array.prototype.shift() 사용법

shift() 함수는
배열의 시작 부분에서(shift, 앞 부분으로 빼내듯이 이동시켜) 첫 번째 요소를 제거하는 함수입니다.
제거된 요소를 반환합니다.

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

// 배열의 시작 부분에서 첫 번째 요소를 제거합니다.
arr.shift();
console.log(arr); // 출력: [2, 3]

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

구문

JavaScript 
arr.shift()

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

반환 값

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

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

// 배열의 시작 부분(첫 번째 값)에서 하나의 요소를 제거합니다.
const removedItem = arr.shift();
console.log(arr); // 출력: [2, 3]
console.log("반환 값 -", removedItem); // 출력: 출력: "반환 값 - 1"

// 배열이 비어있을 경우 1
const emptyArray_1 = [];
const emptyArray_1_removedItem = emptyArray_1.shift(); // // 제거할 첫 번째 요소 값이 없이 배열이 비어 있음

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

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

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

주의할 점과 여러 상황

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

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

반환 값

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

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

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

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

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

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

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

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

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

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

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

// 배열의 마지막 요소를 제거
delete fruits[0];

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

배열에서 첫 번째 요소를 제거하기 위해서 delete 키워드를 사용하지 않는 것이 좋습니다.

반복문과 함께 사용해서 배열 필터링

shift() 함수는 반복문과 함께 사용하여 배열을 필터링하거나 배열의 요소를 순차적으로 처리하는데 유용한 도구 중 하나입니다.

아래의 예제에서는 배열에서 양수 값만을 추출하여 보여줍니다.

JavaScript 
const numbers = [3, -2, 8, -5, 7, -1, 6];
const positiveNumbers = [];

while ((number = numbers.shift()) !== undefined) {
    if (number > 0) {
        positiveNumbers[positiveNumbers.length] = number; // 양수만 추출하여 새 배열에 추가
    }
}

console.log(positiveNumbers); // 출력: [3, 8, 7, 6]

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

명세서

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

브라우저 호환성

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

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

참고문헌

같이 보기