[알고리즘] JS 배열 복사 / 얕은 복사, 깊은 복사

1. 문제점

 

1.) 문제배경

leetcode 문제를 풀다가 내가 의도한 것과는 다르게 재귀구문이 동작하는 경우가 있다.

그리고 대부분의 경우 매개변수를 넘겨주거나 할당할 때 slice()나 전개 연산자를 통해 복사해주면 해결이 되었다.

왜 slice()와 전개연산자로 넘겨주지 않으면 이상하게 동작하는 걸까?

 

 

2.) 예시코드

const array = [1,2,3];
const array2 = array;

array2[0] = 6;

console.log(`array: ${array} \n array2: ${array2}`);

array를 다른 변수에 할당하고 해당 변수에서 값을 바꿔보았다.

 

array = [1,2,3];
array2 = [6,2,3];

나는 위 값을 기대했으나 실제로 콘솔에 출력된 값은 기존의 배열과 복사한 배열 모두가 바뀐 결과였다.

 

콘솔창 결과

 

3.) 결론

즉 JS 배열은 얕은 복사가 되어 복사를 한 값이 변경되면 기존의 값까지 변경이 된다!

 

---

2. 얕은 복사 / 깊은 복사

 

그럼 여기서 얕은 복사, 깊은 복사가 뭘까?

 

1.) 원시값과 참조값

JS에선 원시값과 참조값, 2개의 값으로 나뉜다.

 

• 원시값 : Number, String, null ... 등의 단순한 자료형을 가진 값
• 참조값 : Object, Symbol... 등의 여러 자료형을 가진 값

 

2.) 원시값의 복사

원시값을 변수에 저장하게 되면 그 변수는 자신의 메모리에 실제 값을 저장하고 복사할 때, 다른 저장공간을 사용한다. 

다른 저장 공간을 사용하기 때문에 기존의 값에는 아무런 영향을 미치지 않는다. 이것을 깊은 복사라고 한다.

 

 

3.) 참조값의 복사

객체 등의 참조값을 변수에 저장하면 변수는 그 참조값이 저장된 메모리를 가리킨다. 따라서 값을 복제하면 해당 값의 주소값이 넘어가고, 복사된 값을 변경하면 원본 값도 변경되는 것이다. 이를 얕은 복사라고 한다.

 

 

---

 

3. 배열복사 시

 

1.) slice()

slice()메소드는 기본적으로 얕은 복사를 한다. 하지만 복사하고자 하는 값이 1차원 배열의 경우 깊은 복사를 수행하는 것처럼 보인다. 그 이유는 1차원 배열의 경우 원시값만을 포함하고 있고 원시값은 기본적으로 깊은 복사를 수행하기 때문이다.

 

따라서 2차원 배열과 다르게 1차원 배열을 수정하면 기존의 배열은 영향을 받지 않는다.

 

1차원 배열 slice()

const array = [1,2,3];
const array2 = array.slice();

array2[0] = 6;

console.log(`array: ${array} \n array2: ${array2}`);

기존값은 영향을 받지 않음

2차원 배열 slice()

const array = [[1],[2],[3]];
const array2 = array.slice();

array2[0][0] = 6;

console.log(`array: ${array} \n array2: ${array2}`);

 

2.) spread 연산자

spread 연산자도 깊은 복사가 된다.

 

const array = [1,2,3];
const array2 = [...array];

array2[0] = 6;

console.log(`array: ${array} \n array2: ${array2}`);

 

 

 

---

참고 블로그

 

https://bbangson.tistory.com/78

[JavaScript] 깊은 복사, 얕은 복사