[Javascript] 객체의 복사 - 2차원배열과 스프레드 문법

원시값 복사

자바스크립트에서 기본타입인 숫자, 문자열, 불린값을 복사할 때는 원래의 값과 복사된 값이 서로 영향을 미치지 않습니다.

const 원래값 = 'Hello';
let 복사값 = 원래값;

복사값 = 'Hi';

console.log(원래값);  // "Hello"
console.log(복사값);  // "Hi"

서로 다른 메모리 공간을 차지하고 있기 때문에 복사값의 'Hello'를 'Hi'로 변경해도 원래값의 'Hello'는 아무 영향이 없습니다.

참조값 복사

참조값을 복사할 때는 원래값과 복사값이 서로 연결되어 있기 때문에 한쪽을 변경하면 다른 한쪽도 변경됩니다.

const 원래값 = [1, 2, 3];
let 복사값 = 원래값;

복사값[0] = 100;      // 복사값을 변경

console.log(원래값);  // [100, 2, 3];
console.log(복사값);  // [100, 2, 3];

const 원래값 = [1, 2, 3];
let 복사값 = 원래값;

원래값[0] = 100;      // 원래값을 변경

console.log(원래값);  // [100, 2, 3];
console.log(복사값);  // [100, 2, 3];

원래값과 복사값이 같은 값([1,2,3])을 참조하고 있기 때문에 서로 영향을 미치게 됩니다.

2차원 배열

2차원 배열은 아래와 같이 배열 안에 배열이 있는 형태입니다.

const 이차원배열 = [[1, 1, 1], [2, 2, 2], [3, 3, 3]];

// 보기 쉽게 다른 형태로도 표현해 보겠습니다.

이차원배열 = [
    [1, 1, 1],
    [2, 2, 2],
    [3, 3, 3],
  ]

위 이차원배열에 스프레드 문법을 사용해서 다른 변수를 만들어보겠습니다.

const 이차원배열 = [[1, 1, 1], [2, 2, 2], [3, 3, 3]];
let 다른배열 = [...이차원배열];

console.log(이차원배열 === 다른배열);        // 1. false
console.log(이차원배열[0] === 다른배열[0]);  // 2. true 

1번 결과를 보면 두 배열은 분명 다른 배열이지만 (참조가 아닌 복사, 다른 메모리)
2번 결과를 보면 두 배열의 안쪽 배열([1,1,1])은 같습니다. (같은 메모리 참조)
얕은 복사가 된 것입니다.

가장 바깥에 있는 배열인 [ ] 부분을 겉배열이라고 하고,
[1,1,1] 이 부분을 안쪽배열이라고 하겠습니다.

이차원배열과 다른배열은 겉배열은 다르지만 안쪽배열은 같은 값을 참조하고 있습니다.

이러한 특징 때문에 겉배열을 바꿀 때는 서로 영향이 없지만 안쪽배열을 바꿀 때는 서로 영향을 미칩니다.

이차원배열[0] = 100;   // 겉배열 변경

console.log(이차원배열);  // [100, [2,2,2], [3,3,3]]
console.log(다른배열);    // [[1,1,1], [2,2,2], [3,3,3]]

이차원배열[0][0] = 100;   // 안쪽배열 변경

console.log(이차원배열);  // [[100,1,1], [2,2,2], [3,3,3]]
console.log(다른배열);    // [[100,1,1], [2,2,2], [3,3,3]]

그렇다면 안쪽배열까지 복사(깊은복사, 다른메모리)하려면 어떻게 해야 할까요

스프레드 문법을 한번 더 사용해주면 됩니다.

const 이차원배열 = [[1, 1, 1], [2, 2, 2], [3, 3, 3]];
let 다른배열 = [...이차원배열];
다른배열[0] = [...이차원배열[0]];

console.log(이차원배열[0] === 다른배열[0]);  // (이번에는) false

다른배열을 수정해서 복사가 잘 이루어졌는지 확인해보겠습니다.

다른배열[0][0] = 100;

console.log(이차원배열);   // [[1,1,1], [2,2,2], [3,3,3]]
console.log(다른배열);     // [[100,1,1], [2,2,2], [3,3,3]]

다른배열을 변경했지만 이차원배열은 가만히 있는 모습이 잘 보입니다.