---
title: Array.prototype.shift()
slug: Web/JavaScript/Reference/Global_Objects/Array/shift
tags:
  - Array
  - JavaScript
  - Method
  - Prototype
  - Reference
translation_of: Web/JavaScript/Reference/Global_Objects/Array/shift
---
<div>{{JSRef}}</div>

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

<p>{{EmbedInteractiveExample("pages/js/array-shift.html")}}</p>

<h2 id="구문">구문</h2>

<pre class="syntaxbox"><code><var>arr</var>.shift()</code>
</pre>

<h3 id="반환_값">반환 값</h3>

<p>배열에서 제거한 요소. 빈 배열의 경우 {{jsxref("undefined")}} 를 반환합니다.</p>

<h2 id="설명">설명</h2>

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

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

<h2 id="예제">예제</h2>

<h3 id="배열에서_한_요소_제거하기">배열에서 한 요소 제거하기</h3>

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

<pre class="brush: 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"
</pre>

<h3 id="while_반복문_안에서_shift()_사용하기">while 반복문 안에서 shift() 사용하기</h3>

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

<pre><code>var names = ["Andrew", "Edward", "Paul", "Chris" ,"John"];

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

<h2 id="명세">명세</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('ES3')}}</td>
   <td>{{Spec2('ES3')}}</td>
   <td>Initial definition. Implemented in JavaScript 1.2.</td>
  </tr>
  <tr>
   <td>{{SpecName('ES5.1', '#sec-15.4.4.9', 'Array.prototype.shift')}}</td>
   <td>{{Spec2('ES5.1')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-array.prototype.shift', 'Array.prototype.shift')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="브라우저_호환성">브라우저 호환성</h2>

<p>{{Compat("javascript.builtins.Array.shift")}}</p>

<h2 id="같이_보기">같이 보기</h2>

<ul>
 <li>{{jsxref("Array.prototype.push()")}}</li>
 <li>{{jsxref("Array.prototype.pop()")}}</li>
 <li>{{jsxref("Array.prototype.unshift()")}}</li>
</ul>