최근 알고리즘에 푹 빠져 공부를 하던 중
얕은 복사 라는 말을 듣고 궁금하기 시작했다.
복사면 그냥 복사지 무슨 깊고 얕은게 있나 할 수 있다. (난 그랬다.)
이번에는 깊은 복사와 얕은 복사 그리고 참조에 대해서 정리해보려한다.
참조
let arr = [1,2,3];
let arr1 = arr
위 코드를 간단히 설명하면 변수 arr1에 arr를 참조한 것이다.
이후 코드는 콘솔창에 적은거처럼 편하게 적겠다.
arr[0] = 3
arr1[0] = ?
arr를 arr1에 참조했기 때문에 위와 같이 기존의 arr[0]에 다시 3을 할당한다면,
arr1[0] = 3 이 되는 것이다.
참조한 값이 바뀌면 받은 값도 바뀌는 특징이 있다는 걸 알 수 있다.
얕은 복사
이번 복사와 참조를 공부하면서
얕은 복사와 참조를 거리를 두면서까지 이해할 필요는 없다고 생각했다.
얕은 복사는 외부 껍데기. 즉, {}, [] 에 관한 것들은 복사가 되지만
안의 내용들은 참조가 된다.
코드로 보자.
let arr = [1,2,3];
let arr1 = [...arr];
이렇게 spread 연산자를 이용해 얕은 복사가 가능하다.
arr[0] = 5 // 기존 arr의 0번째 인덱스의 값을 변경해준 뒤
arr1[0] = ? // 값이 어떻게 나올지 생각해보자
5가 아닌 1이 나오게 된다.
얕은 복사한 arr의 0번째 인덱스가 바뀌었는데도 arr1의 0번째 인덱스는 여전히 1이다.
얕은 복사한 내부의 데이터 타입은 기본형 타입이기 때문에 참조가 없다.
이땐 깊은 복사가 되기때문에 값이 변하지 않는 것이다.
외부 껍데기 {} , [] 에 관한 것들은 복사가 된다.
그 안에 내용들은 참조가 된다.
만약 그 안의 내용들이 기본형 타입이라면 참조가 없지만
그 안의 내용들이 array , object 라면 참조가 된다.
이게 무슨 말이냐면
const a = {
name: "gunho",
age: 25,
};
const b = 10;
const c = {
name: "banana",
};
const arr = [a, b, c];
const arr1 = [...arr];
각 변수 a b c를 arr에 담았고 arr1에 얕은 복사하였다.
여기서
arr[0].name = "QQQ" 한 뒤
arr1[0] 을 하게 되면
{name : "QQQ", age : 25} 로 바뀌게 된다.
원시형 타입은 바뀌지 않고 참조형 타입은 값이 바뀌는 걸 볼 수 있다.
사용법
객체를 얕은 복사할 땐
{ …shallowCopy}
배열을 얕은 복사할 땐
[ …shallowCopy]
깊은 복사
얕은 복사의 특징에서 안의 내용들의 참조마저 끊고 싶을 땐 , 깊은 복사를 사용하게 된다.
깊은 복사는 실제 값을 새로운 메모리 주소에 복사한다.
깊은 복사의 여러 방법 중 가장 간단한 방법을 적어보자면,
const arr = JSON.parse(JSON.stringify(arr))
이렇게 하면 얕은 복사에선 안됐던 안의 배열 , 객체 의 참조 마저 끊기게 된다.
참조 / 얕은 복사 / 깊은 복사 각자 특징을 확인해보고 올바르게 적용하자
