✍🏻 [Code Camp_TIL] 15일차: 데이터 복사, 스프레드 연산자

데이터 복사

자바스크립트에서 데이터를 복사하는 방법은 다음과 같다.

let aaa = "철수"
let bbb = aaa

console.log(aaa) // 철수
console.log(bbb) // 철수

여기서 복사본인 bbb의 값을 재할당하면, 원본인 aaa의 값은 변하지 않고, bbb의 값만 바뀌는 것을 알 수 있다.

bbb = "영희"

console.log(aaa) // 철수
console.log(bbb) // 영희

하지만 객체와 배열은 복사본을 바꾸면 원본이 바뀐다.

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

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

// 데이터 재할당
child2.name = "영희"

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

객체와 배열은 문자열, 숫자, boolean 값과는 다르게 변수에 값을 할당하면 값 자체가 아닌, 값을 담고 있는 주소가 저장된다는 특성이 있다!

원본과 복사본이 각각 같은 주소를 가리키고 있기 때문에, child2의 값을 변경하면 child1의 값도 같이 변경되는 것이다.

그렇다면 어떻게 객체와 배열을 복사할 수 있을까? 사실 객체를 복사한다는 개념은 존재하지 않는다. 원본 객체와 같은 값을 가진 객체를 새로 만들 수 있을 뿐이다!

// child3에 child2 복사
let child3 = {
    name: child2.name,
    age: child2.age,
    school: child2.school
}

child3 // {name: '영희', age: 8, school: '다람쥐초등학교'}

// child3의 name 변경
child3.name = "훈이"

child3 // {name: '훈이', age: 8, school: '다람쥐초등학교'}
child2 // {name: '영희', age: 8, school: '다람쥐초등학교'}

위와 같이 child2와 같은 값을 가지는 child3이라는 객체를 새로 만들고, child3의 값을 변경하면, child2와 child3은 각각 다른 주소를 갖고 있기 때문에 복사가 가능하게 되는 것이다.

스프레드 연산자

위에서 child2를 복사하여 child3을 만들 때처럼 원본 child2의 모든 값을 따로따로 가져오는 것은 번거로운 과정이다. 객체에 데이터가 많을수록 그럴 것이다. 이럴 때 사용할 수 있는 것이 스프레드 연산자이다. 스프레드 연산자는 다음과 같이 써줄 수 있다.

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

// 스프레드 연산자 사용!
let child3 = {...child2}

스프레드 연산자를 사용해서 객체를 복사하면, 복사본의 값을 변경해도 원본의 값이 바뀌지 않는다!

let child4 = {
	...child2
}

child4 // {name: '영희', age: 8, school: '다람쥐초등학교'}

즉 child4의 값을 변경해도 child2의 값은 변경되지 않는다.

profile2라는 객체를 복사해서 profile1의 name 값을 변경해주었더니, profile1의 name만 바뀌고, profile2의 name은 그대로이다.

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

let profile2 = {
    ...profile1
}

profile1.name = "영희"

profile1 
// {name: '영희', age: 8, school: '공룡초등학교', hobby: {…}}
profile2 
// {name: '철수', age: 8, school: '공룡초등학교', hobby: {…}}

그렇다면 객체 안에 객체가 있는 경우(중첩 객체) 복사가 잘 이루어질까?

영희의 첫 번째 취미를 축구로 바꿔보자.

profile1.hobby.first = "축구"

profile1
// {name: "영희", age: 8, school: "공룡초등학교", 
// hobby: {
//   first: "축구", second: "프로그래밍"}
// }

profile2
// {name: "철수", age: 8, school: "공룡초등학교",
//    hobby: {
//        first: "축구",
//        second: "프로그래밍"
//    }
// }

분명 영희의 첫 번째 취미만 변경했는데 철수의 첫 번째 취미까지 바뀌어버렸다. hobby라는 객체도 주소로 값이 저장된다. profile1의 hobby 객체와 profile2의 hobby 객체는 같은 주소를 가지고 있기 때문에 값을 바꾸면 같이 바뀌어버린다.

이처럼 스프레드 연산자를 이용한 복사는 얕은 복사(Shallow-Copy)라고 한다.

깊은 복사

그렇다면 스프레드 연산자로 복사해주지 못하는 부분까지 복사하려면 어떻게 해야할까? 객체나 배열을 JSON.stringify를 사용해서 문자열로 만들어준 후에, 다시 JSON.parse를 사용해서 객체 형태로 만들어주면 된다!

---