자바스크립트에서 배열을 다룰 때, 배열을 복사하거나 병합하는 것은 흔히 필요한 작업입니다. 배열을 복사하여 원본 배열을 수정하지 않고 독립적으로 작업할 수 있고, 배열을 병합하여 여러 배열을 하나로 합칠 수 있습니다. 이번 블로그에서는 자바스크립트에서 배열을 복사하는 방법(Shallow Copy와 Deep Copy)과 배열을 병합하는 방법에 대해 알아보겠습니다.

Shallow Copy와 Deep Copy

배열을 복사하는 가장 간단한 방법은 아래와 같이 할당 연산자(=)를 이용하는 것입니다.

let originalArray = [1, 2, 3];
let copiedArray = originalArray;

copiedArray.push(4);

console.log(originalArray); // [1, 2, 3, 4]
console.log(copiedArray);   // [1, 2, 3, 4]

그러나 이 방식은 원본 배열과 복사된 배열이 같은 메모리를 참조하기 때문에, 복사된 배열을 수정하면 원본 배열도 영향을 받게됩니다. 이를 얕은 복사(Shallow Copy)라고 합니다.

따라서 원본 배열을 수정하지 않고 독립적으로 복사된 배열을 얻으려면 아래와 같이 slice() 메소드를 사용하면 됩니다.

let originalArray = [1, 2, 3];
let copiedArray = originalArray.slice();

copiedArray.push(4);

console.log(originalArray); // [1, 2, 3]
console.log(copiedArray);   // [1, 2, 3, 4]

이 방법으로 배열을 복사하면, 복사된 배열을 수정해도 원본 배열은 변경되지 않습니다.

또 다른 복사 방법으로는 깊은 복사(Deep Copy)를 사용하는 방법이 있습니다. 깊은 복사는 원본 배열의 구조를 완전히 복사하여 새로운 배열을 만들기 때문에, 복사된 배열을 수정해도 원본 배열은 변경되지 않습니다.

let originalArray = [1, 2, 3];
let copiedArray = JSON.parse(JSON.stringify(originalArray));

copiedArray.push(4);

console.log(originalArray); // [1, 2, 3]
console.log(copiedArray);   // [1, 2, 3, 4]

위 예제에서는 JSON.stringify()와 JSON.parse()를 이용하여 깊은 복사를 수행하였습니다. 하지만 이 방법은 배열 내에 객체가 있는 경우, 해당 객체들이 정확히 복사되지 않을 수 있으므로 유의해야 합니다.

배열 병합(Merge)

자바스크립트에서 배열을 병합하는 방법에는 여러가지가 있습니다. 가장 간단한 방법은 concat() 메소드를 사용하는 것입니다.

let array1 = [1, 2, 3];
let array2 = [4, 5, 6];
let mergedArray = array1.concat(array2);

console.log(mergedArray); // [1, 2, 3, 4, 5, 6]

또 다른 방법으로는 전개 구문(Spread Operator)을 사용하는 방법입니다.

let array1 = [1, 2, 3];
let array2 = [4, 5, 6];
let mergedArray = [...array1, ...array2];

console.log(mergedArray); // [1, 2, 3, 4, 5, 6]

이 방법은 ES6부터 도입된 기능으로, 배열을 펼쳐서 각 요소를 전달하는 역할을 합니다.

결론

자바스크립트에서 배열을 복사하거나 병합하는 방법을 알아보았습니다. 배열을 복사할 때는 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)의 차이를 이해하고 사용해야 하며, 배열을 병합할 때는 concat() 메소드나 전개 구문(Spread Operator)을 활용할 수 있습니다. 이러한 기법들을 잘 활용하여 배열을 효율적으로 다룰 수 있도록 해야 합니다.