자바스크립트 배열 복사 완벽 가이드: 스프레드 연산자부터 Array.from()까지

자바스크립트에서 배열을 복사하는 것은 단순히 대입 연산자(=)를 사용한다고 해결되는 문제가 아닙니다. 한번 시도해 본 적이 있다면, 이 방법이 원본 배열에 대한 링크만 생성한다는 사실에 놀랐을 것입니다. 대체 무슨 일이 일어난 걸까요?

이 가이드에서는 자바스크립트에서 배열을 복사하는 방법을 알아보겠습니다. 세 가지 배열 복사 전략의 코드를 직접 살펴보며, 바로 실무에 적용할 수 있도록 안내해 드리겠습니다.

자바스크립트 배열 복사의 문제점

어느 정도는 "=" 연산자가 새로운 변수에 배열을 복사하는 것처럼 보입니다. 하지만 엄밀히 말하면 이것은 복사가 아니라 포인터에 가깝습니다. "=" 연산자는 원본 배열에 대한 참조(reference)를 생성할 뿐, 기존 배열의 복제본을 만들지 않기 때문입니다.

대입 연산자만 사용해서 배열을 복사하려고 하면 어떻게 되는지 확인해 보겠습니다:

var berries = ["Strawberry", "Gooseberry", "Raspberry"];
var fruits = berries;

console.log(fruits);

코드 실행 결과:

[ "Strawberry", "Gooseberry", "Raspberry" ]

배열이 복사된 것처럼 보입니다. "fruits" 변수에 "berries" 배열의 모든 값이 담겨 있습니다.

이번에는 "fruits" 배열에 새로운 항목을 추가해 보겠습니다:

fruits.push("Melon");
console.log(fruits);
console.log(berries);

"fruits" 배열에 "Melon"을 추가한 후, 두 배열의 값을 콘솔에 출력합니다:

[ "Strawberry", "Gooseberry", "Raspberry", "Melon" ]
[ "Strawberry", "Gooseberry", "Raspberry", "Melon" ]

"fruits"와 "berries" 모두 같은 값을 가지고 있습니다. 그 이유는 우리가 배열을 실제로 복제한 것이 아니라, 원본에 대한 참조만 생성했기 때문입니다.

"berries" 배열을 조작할 때마다 그 변경 사항은 "fruits" 배열에도 동일하게 반영됩니다.

대입 연산자로는 배열을 복사할 수 없으므로 다른 방법을 사용해야 합니다. 다행히도 배열 복사본을 만드는 방법은 여러 가지가 있습니다. 가장 많이 사용되는 세 가지 방법은 다음과 같습니다:

각각의 방법을 하나씩 자세히 살펴보겠습니다.

스프레드 연산자는 ES6(ECMAScript 2015)에서 도입된 기능으로, iterable 객체의 내용에 접근할 수 있게 해줍니다. 이 연산자는 주로 배열의 얕은 복사(shallow copy)를 만들 때 사용됩니다.

스프레드 연산자는 줄임표(…)처럼 점 세 개로 구성됩니다. 앞서 만든 "berries" 배열을 복사해 보겠습니다:

var berries = ["Strawberry", "Gooseberry", "Raspberry"];
var fruits = [...berries];
fruits.push("Melon");

스프레드 연산자를 사용해 배열의 복사본을 만들었습니다. 두 배열의 값이 올바른지 확인해 보겠습니다:

console.log(berries);
console.log(fruits);

코드 실행 결과:

[ "Strawberry", "Gooseberry", "Raspberry" ]
[ "Strawberry", "Gooseberry", "Raspberry", "Melon" ]

"Melon" 값은 "fruits" 배열에만 추가되었습니다. 스프레드 연산자를 사용해 "berries" 배열의 복제본을 만들었기 때문입니다. 이제 "fruits"는 독립적인 배열이며, 그 값들은 "berries" 배열과 분리되어 있습니다.

오랫동안 검증된 방법인 for 루프 역시 배열 복사본을 만드는 좋은 방법입니다.

코드 줄 수가 더 많아 스프레드 연산자만큼 선호되지는 않지만, for 루프는 객체를 확실하게 복사할 수 있는 안정적인 방법입니다.

var berries = ["Strawberry", "Gooseberry", "Raspberry"];
var fruits = [];

for (var i = 0; i < berries.length; i++) {
	fruits[i] = berries[i]
}

두 개의 배열을 선언했습니다: berries와 fruits. fruits는 처음에 빈 배열입니다. 그런 다음 for 루프를 사용해 "berries" 배열의 모든 항목을 순회하며, 각 항목의 값을 "fruits" 배열로 복사합니다.

두 배열이 서로 분리되어 있는지 테스트해 보겠습니다:

fruits.push("Grapefruit");
console.log(berries);
console.log(fruits);

코드 실행 결과:

[ "Strawberry", "Gooseberry", "Raspberry" ]
[ "Strawberry", "Gooseberry", "Raspberry", "Grapefruit" ]

성공입니다! "berries"와 "fruits"는 이제 완전히 독립된 두 개의 배열입니다.

Array.from() 메서드는 iterable 객체를 배열로 변환합니다. iterable의 각 항목을 순회하며 새로운 배열에 추가하기 때문에, 배열 복사에 활용할 수 있습니다.

다시 한번 "berries" 배열을 복사해 보겠습니다:

var berries = ["Strawberry", "Gooseberry", "Raspberry"];
var fruits = Array.from(berries);

이 방법은 스프레드 연산자와 마찬가지로 단 두 줄의 코드면 충분합니다. 간결하고 효율적으로 배열을 복사할 수 있는 방법입니다. 이제 새로 만든 배열들을 테스트해 보겠습니다:

fruits.push("Pineapple");
console.log(berries);
console.log(fruits);

코드 실행 결과:

[ "Strawberry", "Gooseberry", "Raspberry" ]
[ "Strawberry", "Gooseberry", "Raspberry", "Pineapple" ]

배열이 성공적으로 복사되었습니다.

방법만 제대로 알면 자바스크립트에서 배열을 복사하는 것은 어렵지 않습니다.

배열의 독립적인 복사본을 만들고 싶다면 대입 연산자만으로는 부족합니다. 대입 연산자는 기존 배열을 가리키는 참조를 생성할 뿐, 새로운 배열을 만들지 않기 때문입니다.

스프레드 연산자, for 루프, 또는 Array.from() 메서드를 사용하면 배열의 복사본을 손쉽게 만들 수 있습니다. 이제 여러분도 전문가처럼 자바스크립트에서 배열을 복사할 준비가 되었습니다.