자바스크립트 배열 맨 앞에 요소 추가하는 방법 – unshift() 완벽 정리

자바스크립트에서 배열의 시작 부분에 요소 추가하기

자바스크립트에서 배열의 맨 앞(시작 부분)에 새로운 요소를 추가하려면 unshift() 메서드를 사용하면 됩니다. 이 메서드는 배열의 첫 번째 위치에 하나 이상의 요소를 삽입하고, 변경된 배열의 새로운 길이(length)를 반환합니다.

기본 사용 예제

다음은 기존 배열의 시작 부분에 "Cabbage"를 추가하는 간단한 예제입니다.

let veggies = ["Onion", "Raddish"];
veggies.unshift("Cabbage");
console.log(veggies);

실행 결과는 다음과 같습니다.

["Cabbage", "Onion", "Raddish"]

여러 개의 요소를 한 번에 추가하기

unshift() 메서드는 가변 인자(variable number of arguments)를 지원하기 때문에 여러 개의 요소를 동시에 추가할 수도 있습니다. 이때 전달된 순서대로 배열의 앞쪽부터 차례로 배치됩니다.

let veggies = ["Onion", "Raddish"];
veggies.unshift("Cabbage", "Carrot", "Broccoli");
console.log(veggies);

실행 결과는 다음과 같습니다.

["Cabbage", "Carrot", "Broccoli", "Onion", "Raddish"]

반환값 활용하기

unshift()는 요소가 추가된 후 배열의 새 길이를 반환합니다. 이 반환값을 활용하면 배열의 크기를 손쉽게 확인할 수 있습니다.

let veggies = ["Onion", "Raddish"];
let newLength = veggies.unshift("Cabbage");
console.log(newLength); // 3
console.log(veggies);   // ["Cabbage", "Onion", "Raddish"]

스프레드 연산자를 사용한 대체 방법

ES6의 스프레드 연산자(...)를 사용하면 원본 배열을 변경하지 않고, 새로운 배열을 생성하면서 앞쪽에 요소를 추가할 수 있습니다. 불변성(immutability)을 유지해야 하는 상황에서 유용합니다.

let veggies = ["Onion", "Raddish"];
let newVeggies = ["Cabbage", ...veggies];
console.log(newVeggies); // ["Cabbage", "Onion", "Raddish"]

정리

unshift()는 배열의 시작 부분에 요소를 추가하며 원본 배열을 직접 변경(mutate)합니다. 여러 개의 인자를 전달하면 한 번에 여러 요소를 추가할 수 있고, 반환값으로는 추가 후 배열의 새로운 길이를 제공합니다. 반면 원본 배열을 그대로 유지하고 싶다면 스프레드 연산자나 concat()을 사용하는 것이 좋습니다.