06 -3 얕은 복사(참조 복사)와 깊은 복사(... 전개 연산자)

객체에 없는 속성에 접근하면 undefined 자료형이 나온다.

 

얕은 복사 : 단순히 다른 이름을 붙이는 형태 뿐인 복사

 

const a = [1, 2]

const b = a

b.push(3)

b.push(4)

 

console.log(a) // [1, 2, 3, 4]

console.log(b) // [1, 2, 3, 4]

=> 이름(a, b)만 다르지 같은 배열 값이 나온다.

 

반대로, 깊은 복사 : 복사한 배열이 각각 완전히 독립적으로 작동한다.

- 최신 자바스크립트의 전개 연산자를 사용해 [...배열] 같이 입력하면 된다.

 

const a = [1, 2]

const b = [...a]

b.push(3)

b.push(4)

 

console.log(a) // [1, 2]

console.log(b) // [1, 2, 3, 4]

 

마찬가지로 '객체'도 전개 연산자를 사용한 깊은 복사가 가능하다.

 

const cloud = {name : 'cloud', age: 6, species : 'dog'}

const star = {...cloud}
star.name = star
star.age = 10

console.log(JSON.stringify(cloud))
console.log(JSON.stringify(star))

// {"name" : "cloud", "age" : 6, "species" : "dog"}
// {"name" : "star", "age" : 10, "species" : "dog"}

 

변경하고 싶은 속성만 추가하기

 

const cloud = {name : 'cloud', age: 6, species : 'dog'}

const star = {...cloud, name: 'star', age: '10', boolean: true}

console.log(JSON.stringify(cloud))
console.log(JSON.stringify(star))

// {"name" : "cloud", "age" : 6, "species" : "dog"}
// {"name" : "star", "age" : 10, "species" : "dog", "boolean" : true}

 

- 전개 연산자[...배열(or 객체)]를 위의 코드 예시처럼 앞에 전개하거나 뒤에 전개할 수 있는데 그 위치에 따라 결과가 달라진다.

const star = {name: 'star', age: '10', boolean: true, ...cloud}

// 전개 연산자를 뒤에 전개하면 {"name" : "cloud", "age" : 6, "species" : "dog"} -> 복사 전의 값으로 출력된다.

 

* 전개 연산자의 자료 추가 : [...배열(or 객체), 자료, 자료, 자료] ex) [...a, 3, 4] // [1, 2, 3, 4]