Spread Operator 스프레드 연산자

객체 또는 배열의 복사의 경우

let child1 = {
    name : "철수",
    age : 8,
    school: "다람쥐초등학교"
}

let child2 = child1

console.log(child2)
// {name: '철수', age: 8, school: '다람쥐초등학교'}

위의 예시를 사용할 경우, 값을 그대로 가져오긴 하나 같은 값을 공유하고 있어

child2.name = "영희"

console.log(child2)
// {name: '영희', age: 8, school: '다람쥐초등학교'}
console.log(child1)
// {name: '영희', age: 8, school: '다람쥐초등학교'}

값을 바꾸면 같은 자리의 값이 child2와 child1가 똑같이 변경된다.

그렇기 때문에 아래와 같은 방법으로 값을 직접 지정해줘야 한다

let child3 = {
    name: child2.name,
    age: child2.age,
    school: child2.school
}

---

위의 방법을 스프레드 연산자를 사용하면 값을 뿌려주는 방법으로 간단하게 복사할 수 있다

let child4 = {
    ...child2
}

---

let profile1 = {
    name: "철수",
    age: 8,
    school: "공룡초등학교",
    hobby: {
        first: "수영",
        second: "프로그래밍"
    }
}

let profile2 = {
    ...profile1
}

하지만 위의 방법으로 할 경우 첫번째 객체 안의 값을 복사하지만 또 다른 객체 안의 값은 주소를 그대로 복사해오기에 같은 값을 공유하고 있어 같이 수정이 된다.

이것을 얕은 복사 (shallow-copy) 라고 한다.

---

깊은 복사 (Deep-Copy)
객체를 가져올 때 객체 => 문자열로 바꿔야 하기 때문에 JSON을 사용한다. (객체 표기법 = JSON)

const profile2 = JSON.stringify(profile1)

console.log(profile2)
// '{
// 	"name":"영희",
// 	"age":8,
// 	"school":"공룡초등학교",
// 	"hobby": {
// 		"first":"축구",
// 		"second": "프로그래밍"
// 	}
// }'

그 후에 바꾼 문자열 => 객체(기존 객체가 아닌 '아주 새로운 객체'라고 한다)로 다시 바꿔줘야 하기 때문에 JSON.stringify안에 profile1을 넣은것을 JSON.parse안에 넣어주면 객체 => 문자열 => 객체로 바뀌게 된다.

const child1 = {
    name: {first:"김",last:"철수"},
    age: 13,
    school: "다람쥐초등학교"
}
const child2 = JSON.parse(JSON.stringify(child1))

child2.name.first = "최"
child2.name.last = "영희"

console.log(child2)
{
  name: {first: '최', last: '영희'},
  age: 13,
  school: "다람쥐초등학교"
}