자바스크립트의 shift() 메서드는 배열의 첫 번째 요소를 제거하는 데 사용됩니다. 이 메서드를 호출하면 해당 요소가 배열에서 삭제되고, 제거된 요소가 반환되며, 배열의 길이도 1만큼 줄어듭니다.
shift() 메서드 문법
array.shift()
shift() 메서드는 매개변수를 받지 않으며, 만약 배열이 비어 있다면 undefined를 반환합니다. 반대로 마지막 요소를 제거하려면 pop() 메서드를 사용하면 됩니다.
예제 1: shift() 기본 사용법
다음은 자바스크립트에서 shift() 메서드를 구현한 예제입니다.
<!DOCTYPE html>
<html>
<body>
<h2>데모 제목</h2>
<p id="test"></p>
<script>
var arrStud = ["Laptop", "Desktop", "Tablet"];
document.getElementById("test").innerHTML = "초기 배열 = " + arrStud + ", <br>제거된 첫 번째 요소 = " + arrStud.shift();
</script>
</body>
</html>출력 결과
위 코드를 실행하면 초기 배열에서 "Laptop"이 제거되고, 제거된 요소가 화면에 표시됩니다.
예제 2: 버튼 클릭으로 첫 번째 요소 제거하기
이번에는 버튼을 클릭할 때마다 배열의 첫 번째 요소가 제거되도록 구현해 보겠습니다.
<!DOCTYPE html>
<html>
<body>
<h2>차량 종류</h2>
<button onclick="display()">결과 보기</button>
<p id="test"></p>
<script>
var car = ["Hatchback", "Convertible", "SUV", "AUV", "MUV"];
document.getElementById("test").innerHTML = "초기 배열 = " + car;
function display() {
car.shift();
document.getElementById("test").innerHTML = "첫 번째 요소 제거 후 배열 = " + car;
}
</script>
</body>
</html>출력 결과
초기 상태에서는 전체 차량 배열이 표시됩니다.
위 화면에서 "결과 보기" 버튼을 클릭해 보세요.
버튼을 클릭하면 shift() 메서드가 실행되어 배열의 첫 번째 요소인 "Hatchback"이 제거된 것을 확인할 수 있습니다.
정리
- shift()는 배열의 첫 번째 요소를 제거하고 그 값을 반환합니다.
- 배열이 비어 있으면
undefined를 반환합니다. - 원본 배열이 직접 변경(mutate)됩니다.
- 마지막 요소를 제거하려면 pop(), 첫 번째 위치에 요소를 추가하려면 unshift()를 사용하세요.