[javascript] 자바스크립트 배열 삽입 (array insert)

참고: https://www.freecodecamp.org/news/insert-into-javascript-array-at-specific-index/

array는 JavaScript에서 매우 중요한 부분입니다. 배열을 통해 데이터 컬렉션을 저장하고 조작할 수 있습니다. 경우에 따라 배열의 특정 인덱스에 새 요소를 삽입해야 할 수도 있습니다. 이 작업을 수행하려면 push() 메소드 또는 splice() 메소드를 사용해야 합니다. 이 포스트에서는 위 두 가지 기술을 사용하여 배열의 특정 인덱스에 요소를 추가하는 방법을 자세히 알아보겠습니다.

JavaScript 배열의 작동 방식

배열의 특정 인덱스에 삽입하는 방법에 대해 알아보기 전에 JavaScript의 배열을 간단히 살펴보겠습니다. 배열은 모든 데이터 타입에 대한 컬렉션입니다. 이는 Array 생성자 또는 그냥 리터럴을 통해 배열을 만들 수 있습니다. 다음은 배열 생성자를 사용하여 배열을 만드는 예제입니다:

const arrayConstructor = new Array(1, 2, 3);
console.log(arrayConstructor);

다음은 리터럴 표기법으로 배열을 생성하는 예제입니다:

const literalArray = [1, 2, 3];
console.log(literalArray);

위 두 가지 예제 모두 1, 2, 3 을 포함하는 컬렉션을 얻었습니다.

push() 메소드로 배열의 특정 인덱스에 요소 삽입

JavaScript array의 push() 메소드는 한 개 또는 그 이상의 요소를 배열의 끝에 추가합니다. 다음은 push() 메소드의 문법입니다:

array.push(element1, element2, ..., elementN);

여기서 array는 요소를 추가하고자 하는 배열이고 element1, element2 등은 배열 끝에 추가하려는 요소입니다. 예를 들어 과일 배열이 있고 그 끝에 요소를 추가하고 싶다고 가정해 보겠습니다:

const fruits = ['apple', 'banana', 'cherry'];
fruits.push('date');

console.log(fruits);

위의 코드에서는 push() 메소드를 사용하여 과일 배열의 끝에 대추야자를 추가했습니다.

배열의 끝이 아닌 배열의 특정 인덱스에 요소를 삽입해야 하는 경우가 있습니다. 이러한 시나리오에서는 array.slice()와 함께 push() 메소드를 사용할 수 있습니다. 다음은 배열의 특정 인덱스에 요소를 삽입하는 단계입니다:

1. 새로운 빈 배열 생성
2. 삽입 하려는 특정 인덱스 전 까지의 요소를 원본 배열에서 새 배열로 복사
3. 새 배열에 삽입하려는 요소 추가
4. 인덱스 다음의 나머지 요소들을 원본 배열에서 새 배열로 복사

다음의 예를 통해 위의 단계를 설명하겠습니다. 일단 숫자 배열이 있다고 가정해보겠습니다:

const numbers = [1, 2, 4, 5];

그리고 원본 배열의 인덱스 2(JavaScript의 배열 인덱스는 0 부터 시작합니다.)에 숫자 3을 삽입하려고 합니다. 이를 수행하는 방법은 다음과 같습니다:

const index = 2;
const newNumbers = [
    ...numbers.slice(0, index),
    3,
    ...numbers.slice(index)
];

console.log(newNumbers);

위 예제에서는 slice() 메소드를 사용하여 인덱스 2 이전의 요소를 복사하여 새 배열 newNumbers에 넣습니다. 그 다음 3을 넣고 다시 slice() 메소드를 사용하여 인덱스 2 뒤의 나머지 요소들을 복사합니다. 결과적으로 새 배열은 [1, 2, 3, 4, 5]가 되었습니다.

위의 예제에서 스프레드 연산자(...)는 배열을 합치는데 사용되었습니다. 하지만 이 방법은 slice() 라는 또 다른 메소드를 사용하게되어 초보자가 코드를 이해하기 어렵게 만들기 때문에 최선의 방법은 아닙니다. 더 직관적인 splice() 메소드를 사용하는 방법을 알아보겠습니다.

splice() 메소드로 배열의 특정 인덱스에 요소 삽입

JavaScript array의 splice() 메소드는 배열에서 요소를 추가하거나 제거하는 용도로 사용합니다. splice() 메소드를 사용하면 배열의 특정 인덱스에 요소를 삽입할 수 있습니다. 다음은 splice() 메소드의 문법입니다:

array.splice(start, deleteCount, item1, item2, ..., itemN);

• array는 변경을 원하는 원본 배열입니다.
• start는 배열에서 수정을 원하는 부분의 시작 인덱스 입니다.
• deleteCount는 start 인덱스로 부터 지우고 싶은 요소의 갯수입니다.
• item1, item2 등은 start 인덱스에서 부터 추가하고 싶은 요소들 입니다.

예를 들어 다음과 같은 숫자의 배열이 있다고 가정해보겠습니다:

const numbers = [1, 2, 4, 5];

그리고 numbers 배열의 인덱스 2에 숫자 3을 넣고 싶은 경우 다음과 같이 splice() 메소드를 사용할 수 있습니다:

numbers.splice(2, 0, 3);
console.log(numbers);

위의 코드에서는 numbers 배열에서 splice() 메소드를 호출했습니다. start를 2로 설정하고 deleteCount는 0 으로 하고 숫자 3 이라는 요소를 인덱스 2에 추가했습니다. 이 메소드의 실행 결과는 [1, 2, 3, 4, 5]가 됩니다.

정리

이 포스트에서는 JavaScript 배열의 특정 인덱스에 요소를 삽입하는 두 가지 주요 기술을 알아봤습니다. splice() 메소드를 사용하는 방법이 구문이 더 짧고 직관적이므로 선호되는 옵션입니다.

관련 글

자바스크립트 array.slice() 사용 방법

자바스크립트 array.splice() 사용 방법

자바스크립트 array.push() 사용 방법