복사를 할 때
문자열과 숫자는 원본 값을 그대로 가져오기만 할 뿐
그 자체로 서로 완전히 다른 존재다.
객체는 다른데
원본 객체의 변화가 복사된 객체에 영향을 준다.
객체와 배열은 해당 데이터를 heap이라 불리우는 저장소에 보관해두고 주솟값을 저장해 둔다.
원본에 영향을 주지 않는 완전히 새로운 복사본을 만들기 위해
Shallow Copy를 시도한다.
const profile3 = {
name: profile.name, // profile.name의 값(문자열)을 직접 주입
age: profile.age,
school: profile.school,
};
profile.name = '훈이';
profile3.name; // '영희'
// 실제 값인 문자열을 복사해주었기 때문에 서로 영향을 끼치지 않음
위의 방식은 각각의 값을 하나씩 직접 복사하기 때문에 spread 연산자를 사용한다.
const profile4 = { ...profile };
profile.name = '지수';
profile4.name; // '훈이'
// 스프레드 문법
const result = [];
const arr = [1, 2, 3];
const arr2 = [4, 5, 6];
result.push(...arr, ...arr2); // [1, 2, 3, 4, 5, 6]
const student = {
name: '홍길동',
age: 17,
grade: 'A',
};
// { ...student } === { name: '홍길동', age: 17, grade: 'A' }
spread 연산자는 괄호 안에서 ... 을 객체나 배열 앞에 작성해 사용한다.
말 그대로 객체나 배열을 펼쳐준다라고 생각하면 된다.
그러나 spread 연산자를 사용하더라도 객체 내의 객체는 원본 객체와 같은 주소값을 공유한다.
그래서
Deep Copy를 시도한다.
newProfile
/
{
name: '철수',
age: 13,
school: '다람쥐초등학교',
hobby: {
one: '수영',
two: '프로그래밍',
}
}/
JSON.stringify(newProfile); // '{"name":"철수","age":13,"school":"다람쥐초등학교","hobby":{"one":"수영","two":"프로그래밍"}}'
JSON.stringify()는 인자로 들어온 데이터를 문자열로 변화시킨다.
이를 통해 원본 객체와는 다른 객체의 모양을 한 문자열을 돌려받는다.
JSON.parse()는 JSON.stringify()를 통해 얻어낸 문자열을 객체 형태로 변환시켜 준다.
이렇게 깊은 복사를 통해 만들어진 것은
원본과 같은 주솟값을 복사한 객체가 아닌 완전히 독립적인 하나의 객체임을 확인할 수 있다.
