얕은 복사, 깊은 복사 그리고 불변 객체

Sunghoman·2022년 9월 23일

JavaScript

목록 보기

6/11

이번 제목은 엄청 길다

영화 이름같다

조제, 호랑이 그리고 물고기들
2003년 영화인데 재밌음

두 다리가 불편한 조제(여자 주인공)와
츠네오(남자 주인공)의 로맨스 스토리인데
결국 이어지진 않는다

조제와의 이별 후,
새로 만나기 시작한 여자친구와 걷던 츠네오가 갑자기 주저앉아 오열하는 장면이 있는데

"헤어져도 친구처럼 지낼 수 있는 사람이 있지만, 조제는 두번 다시 만날 수 없을 것이다."

크 전 이거 보고 울었음

근데 뜬금없이 왜 영화이야기냐구여?

남자 주인공 츠네오의 마음속에서
조제(여자 주인공)는 평생 그 때 모습으로, 변하지 않고 남아있을거잖아요

근데 자바스크립트에서도 변하지 않는게 있음
그거 알아볼거임

불변 객체

불변 객체는 말 그대로 변하지 않는 객체임

제가 앞선 포스트에서 const로 지정한 값은
변수 재선언, 재할당 안된다고 했음

오 그럼 정말 const로 선언한 객체는 진짜 불변 객체일까?

const test = {};
test.name = "sungho";

console.log(test) // {"sungho"}

ES6에서 const는 할당된 값이 상수가 되는 것이 아닌, 바인딩된 값이 상수가 됨
즉, test 변수가 상수가 되기 때문에,
const로 선언한 test변수에 재할당은 불가능하지만, 객체의 속성은 변경 가능함

그래서 객체의 속성이 변경되면서 변수에 바인딩된 객체의 내용까지 변경 되니까
불변객체라고 하기는 힘들듯

Object.freeze()

자바스크립트에서 기본적으로 제공하는 메소드임
이름부터 얼린다

let test = {
	name: "sungho";
}
Object.freeze(test); //얼렸음

test.name = "kimsungho";
console.log(test); //{name: "sungho"} 안바뀜

오 그러면, 저 급속냉동 쓰면 불변객체 만들기 가능?

켁 근데 Object.freeze()는 동결된 객체를 반환하지만
객체의 재할당이 가능함

test = {
	age = 27;
}
console.log(test); //{age: 27}

그럼 Object.freeze()도 불변 객체는 아닌듯

그럼 어떡해여?

const랑 Object.freeze() 같이 쓰면 되지 않을까여

const test = {
	'name': "sungho";
}
Object.freeze(test);

const로 바인딩한 변수를 상수화 시키고,
Object.freeze()로 급속냉동 시키면
객체의 재할당과 객체의 속성 둘 다 변경 불가능한 상태니까
불변 객체일듯

얕은 복사 & 깊은 복사

복사는 뭔지 알겠는데 얕은건 뭐고 깊은건 뭔가요
array, object 자료형은 변수 여러개 담을 때 사용하는 애들이거든여
그냥 "="이걸로 복사하면 안됩니다

얕은복사

이거 보셈

let ilsan = ["일산 호수공원", "이케아 고양", "고양 스타필드"];
let copy = ilsan;
//"고양 스타필드'를 "하남 스타필드"로 바꾸고싶어잉~
copy[2] = "하남 스타필드";
console.log(ilsan); //[ '일산 호수공원', '이케아 고양', '하남 스타필드' ]
console.log(copy); //[ '일산 호수공원', '이케아 고양', '하남 스타필드' ]

엥 전 copy만 변경했는데 왜 원래 자료도 변경되나여

자바스크립트에서는 사실
["일산 호수공원", "이케아 고양", "고양 스타필드"]라는 array를
ilsan에 넣어주세요~
라고 알아듣는게 아니라

사실 미지의 공간에 넣어둠
그리고 array가 어디 있는지 알려주는 화살표를
변수에 담습니다.

사실 미지의 공간은 RAM임
그리고 변수에는 RAM에 array가 어디 있는지 알려주는 화살표만 갖고 있는거임

그래서 ilsan == copy 찍어보면 true라고 나올걸요
똑같은 화살표 값을 갖고 있으니까

진짜네요

근데 copy를 수정했는데 왜 원본까지 바뀌나요

저 변수는 array값이 없다니까여
우린 화살표만 복사한거임. 즉, 주소값을 복사한거라서
원래의 array도 같이 변경된거에여

이게 얕은복사임

깊은 복사

아까 copy 수정하니까 원본까지 수정되어 버렸죠
얕은복사 해서 그런거임

그럼 깊은복사 하면 안그러겠네여

let ilsan = ["일산 호수공원", "이케아 고양", "고양 스타필드"];
let copy = [...ilsan];
//"고양 스타필드'를 "하남 스타필드"로 바꾸고싶어잉~
copy[2] = "하남 스타필드";
console.log(ilsan); //[ '일산 호수공원', '이케아 고양', '고양 스타필드' ]
console.log(copy); //[ '일산 호수공원', '이케아 고양', '하남 스타필드' ]

오 이번엔 문제없이 잘 바뀌네여

저 [...] << 이건 뭔가요

...은 괄호 벗겨주세요
[] 그리고 다시 씌워주세요

이러면 완전히 독립적인 array 사본이 생깁니다
갖고있던 화살표도 달라짐

이게 Spread Operator라는 깊은 복사의 한 종류임

다른 방법은 없나요?

하나 더 있음

Json으로 변환해놓고 복사하는거임

let ilsan = ["일산 호수공원", "이케아 고양", "고양 스타필드"];
let copy = JSON.parse(JSON.stringify(ilsan));
//"고양 스타필드'를 "하남 스타필드"로 바꾸고싶어잉~
copy[2] = "하남 스타필드";
console.log(ilsan); //[ '일산 호수공원', '이케아 고양', '고양 스타필드' ]
console.log(copy); //[ '일산 호수공원', '이케아 고양', '하남 스타필드' ]