Array.prototype.shift()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

shift() 메서드는 배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환합니다. 이 메서드는 배열의 길이를 변하게 합니다.

시도해보기

const array1 = [1, 2, 3];

const firstElement = array1.shift();

console.log(array1);
// Expected output: Array [2, 3]

console.log(firstElement);
// Expected output: 1

구문

js
arr.shift();

반환 값

배열에서 제거한 요소. 빈 배열의 경우 undefined 를 반환합니다.

설명

shift 메서드는 0번째 위치의 요소를 제거 하고 연이은 나머지 값들의 위치를 한칸 씩 앞으로 당깁니다. 그리고 제거된 값을 반환 합니다. 만약 배열의 length가 0이라면 undefined를 리턴 합니다.

shift는 의도적인 일반형태로써; 이 메서드는 배열과 유사한 형태의 객체에서 호출 하거나 적용 할 수 있습니다. 연속된 일련의 마지막 항목을 나타내는 길이 속성을 가지고 있지 않은 객체의 제로베이스 수치 속성에는 의미 있는 작동을 하지 않을 수 있습니다. (Objects which do not contain a length property reflecting the last in a series of consecutive, zero-based numerical properties may not behave in any meaningful manner.)

예제

배열에서 한 요소 제거하기

아래 코드는 myFish 라는 배열에서 첫번째 요소를 제거 하기 전과 후를 보여 줍니다. 그리고 제거된 요소도 보여줍니다.

js
var myFish = ["angel", "clown", "mandarin", "surgeon"];

console.log("myFish before: " + myFish);
// "제거전 myFish 배열: angel,clown,mandarin,surgeon"

var shifted = myFish.shift();

console.log("myFish after: " + myFish);
// "제거후 myFish 배열: clown,mandarin,surgeon"

console.log("Removed this element: " + shifted);
// "제거된 배열 요소: angel"

while 반복문 안에서 shift() 사용하기

shift() 메서드는 while 문의 조건으로 사용되기도 합니다. 아래 코드에서는 while 문을 한번 돌 때 마다 배열의 다음 요소를 제거하고, 이는 빈 배열이 될 때까지 반복됩니다.

js
var names = ["Andrew", "Edward", "Paul", "Chris", "John"];

while ((i = names.shift()) !== undefined) {
  console.log(i);
}
// Andrew, Edward, Paul, Chris, John

명세

Specification
ECMAScript® 2025 Language Specification
# sec-array.prototype.shift

브라우저 호환성

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
shift

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

같이 보기