JavaScript에서 배열의 시작 부분에 새로운 요소를 추가해야 할 때는 unshift() 메서드를 사용합니다. 이 메서드는 하나 이상의 요소를 배열의 맨 앞에 삽입하고, 변경된 배열의 새 길이(length)를 반환하는 특징을 가지고 있습니다.
unshift() 메서드의 기본 동작
unshift()는 인자로 전달된 요소들을 순서대로 배열 앞쪽에 추가합니다. 예를 들어 arr.unshift("water")처럼 호출하면 "water"가 배열의 첫 번째 요소가 되고, 기존 요소들은 뒤로 한 칸씩 밀려납니다.
예제 코드
아래 코드를 실행하면 배열의 맨 앞에 새로운 요소를 추가하는 과정을 직접 확인할 수 있습니다.
<html>
<head>
<title>JavaScript Array unshift Method</title>
</head>
<body>
<script>
var arr = new Array("orange", "mango", "banana", "sugar");
// 배열 맨 앞에 "water" 추가
var length = arr.unshift("water");
document.write("Returned array is : " + arr);
document.write("<br /> Length of the array is : " + length);
</script>
</body>
</html>
실행 결과
Returned array is : water,orange,mango,banana,sugar Length of the array is : 5
실행 결과를 보면 원래 4개였던 배열에 "water"가 첫 번째 위치에 추가되어 총 5개의 요소를 갖게 된 것을 확인할 수 있습니다. 또한 unshift()는 새 배열 자체가 아니라 배열의 새 길이(5)를 반환한다는 점에 유의하세요.
참고: 여러 개의 요소를 한 번에 추가하기
unshift()는 여러 인자를 전달하면 전달된 순서 그대로 배열 앞에 추가할 수 있습니다.
var arr = ["mango", "banana"];
var length = arr.unshift("apple", "orange");
// arr → ["apple", "orange", "mango", "banana"]
// length → 4
반대로 배열의 끝에 요소를 추가하고 싶다면 push() 메서드를 사용하면 됩니다. 두 메서드는 서로 짝을 이루는 관계이므로 함께 익혀두면 배열 조작이 훨씬 편리해집니다.