script.js - spread

let person={name:"kim", age:12}

let person2 = {...person}
console.log(person2)

<출력결과>

{ name: 'kim', age: 23 }

 

<해설>

person이라는 객체를 그대로 복사하고 싶다면...

{...person} = 새로운 객체가 생성됨

 

let person={name:"kim", age:23}

let person2 = {...person}
let person3 = person
console.log(person2)
console.log(person3)

<출력결과>

{ name: 'kim', age: 23 }
{ name: 'kim', age: 23 }

 

==

굳이 ...을 사용해야 할까?

두 개의 복사 매커니즘(방법)이 다름!

 

person3 문장은 객체의 주소값만 가져온다.(복사한다.) - 즉 객체는 하나이고 그 객체를 참조하는 변수가 2개.

새로운 객체가 아니라 기존에 있는 객체를 person3도 참조할 뿐이다. 

객체는 하나인데 person2와 person3가 같이 보고 있다.

 

...을 넣게되면 객체가 복사가 되서 실제로 객체를 하나 더 생성하는 것!(생기는 것) - 내용은 같지만 객체 자체가 2개이다. 

 

console.log(person==person2)
console.log(person==person3)

<출력결과>

false
true

 

false,true인 이유: 하나의 객체를 둘이 바라보고 있는것. 

 

* person2 문장은 새로운 객체를 가리키고 있는것! *

 

===

[추가]

let person={name:"kim", age:23}

let person2 = {...person,adress:"seoul"}
let person3 = person
console.log(person2)
console.log(person3)

<출력결과>

{ name: 'kim', age: 23, address: 'seoul' }
{ name: 'kim', age: 23 }

 

[수정 및 변경]

let person={name:"kim", age:23}

let person2 = {...person,name:"lee"}
let person3 = person
console.log(person2)
console.log(person3)

<출력결과>

{ name: 'lee', age: 23 }
{ name: 'kim', age: 23 }

 

{배열에도 똑같이 적용된다.}

let a = [1,2]
let b = [...a,3]
console.log(b)

<출력결과>

[ 1, 2, 3 ]

 

let a = [1,2]
let b = [...a,3]
console.log(b)

let c = [...a,...b]
console.log(c)

<출력결과>

[ 1, 2, 3 ]
[ 1, 2, 1, 2, 3 ]

 

 

객체를 복사를 해서 그 내용을 그대로 가져온다!!!