자바스크립트(JavaScript)로 배열에 요소 추가하는 방법 총정리

자바스크립트에서 배열에 새로운 요소를 추가할 때는 추가하고 싶은 위치에 따라 서로 다른 메서드를 사용합니다. 이 글에서는 배열의 끝, 시작, 그리고 특정 위치에 요소를 삽입하는 세 가지 방법을 예제 코드와 함께 자세히 알아보겠습니다.

1. 배열 끝에 요소 추가하기 — push()

배열의 맨 끝에 요소를 추가하려면 push 메서드를 사용합니다.

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

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

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

push는 가변 인수(variable arguments)를 지원하기 때문에 한 번에 여러 개의 요소를 동시에 추가할 수도 있습니다.

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

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

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

2. 배열 시작에 요소 추가하기 — unshift()

배열의 맨 앞에 요소를 추가하려면 unshift 메서드를 사용합니다.

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

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

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

unshift

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

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

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

3. 배열의 특정 위치에 요소 추가하기

때로는 배열의 원하는 위치(인덱스)에 정확히 요소를 삽입해야 할 때가 있습니다. 하지만 자바스크립트는 이 기능을 기본적으로 제공하지 않기 때문에, 직접 함수를 만들어야 합니다. 이 함수를 Array.prototype에 추가하면 모든 배열 객체에서 바로 사용할 수 있습니다.

Array.prototype.insert = function(data, position) {
    if (position >= this.length) {
        this.push(data)
        // position이 배열 전체 길이보다 크면 맨 끝에 추가
    } else if (position <= 0) {
        this.unshift(data)
        // position이 0 이하면 맨 앞에 추가
    } else {
        // 기존 요소들을 오른쪽으로 한 칸씩 이동
        for (let i = this.length; i >= position; i--) {
            this[i] = this[i - 1];
        }
        this[position] = data;
    }
}

let arr = [1, 2, 3, 4];
arr.insert(-1, 2);
console.log(arr);

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

[1, 2, -1, 3, 4]

이렇게 정의한 후에는 생성하는 모든 배열 객체에서 insert 메서드를 사용할 수 있습니다.

splice() 메서드로 특정 위치에 삽입하기

사실 별도의 함수를 만들지 않아도, 내장 메서드인 splice를 활용하면 원하는 위치에 손쉽게 요소를 삽입할 수 있습니다.

var months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
console.log(months);

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

['Jan', 'Feb', 'March', 'April', 'June']

splice 메서드의 각 인수는 다음과 같은 의미를 가집니다.

첫 번째 인수: 요소를 삭제하거나 삽입할 시작 인덱스
두 번째 인수: 삭제할 요소의 개수 (삽입만 할 경우 0)
세 번째 인수부터: 배열에 삽입할 값들

위 예제에서는 인덱스 1 위치에서 아무것도 삭제하지 않고(개수 0) 'Feb'만 삽입했기 때문에, 월 목록 사이에 Feb가 자연스럽게 들어간 것을 확인할 수 있습니다.