[Javascript] spread 연산자의 이점 / 객체의 참조 값

어렴풋이 알고 있던 내용인데 되새기기 위해 정리해보았다.

 

 

state를 업데이트 할 때 {...state}나 [...state]로 사용 하는 경우를 많이 봐왔는데,

왜 일까? 배열이나 객체를 개별적인 요소로 열거하는것 외에

spread 연산자를 사용함으로써의 이점은 또 무엇이 있을까?

 

{} === {}  //  false

일단 객체는 동일한 값이여도 다른 객체로 인식을 한다.

 

기존의 객체에 spread연산자를 사용하여 값을 비교해보자.

const prev = {a: “A”}
const next = {…prev}

prev === next // false
// * 겉의 껍데기 {} 를 바꾸어 주었기 때문에 false로 표현된다.

prev.a === next.a // true
// * 겉의 껍데기는 다르지만 내부는 참조값을 복사했기 때문에 안의 내용은 같다.

 

const prev = {a: "A"}
const next = {a: "A"}

prev === next // false

prev.a === next.a // true
// *이 부분은 결국 “A” === “A”를 비교하는 것이기 때문에 같은 값으로 보인다.

 

 

그래서 동일한 참조값들을 지닌 "다른" 객체를 만들고 싶을 때 사용할 수 있다.

 

 

객체 안의 객체가 있을 경우를 살펴보자.

const test = {name: "jay", class: {a:"A", b:"B"}}
const compare1 = {name: "jay", class: {a:"A", b:"B"}}
const compare2 = {...test, name:"hay"}

test === compare1 /// false
test.class === compare1.class // false
test.class === compare2.class // true

compare2에는 test안의 값들을 참조값으로 복사하여 할당하고
name의 값만 변경해주었기 때문에 compare2.class는 그대로 test.class를 참조하고 있기 때문에
같은 값으로 인식한다.

 

참조 값이 같다면 동일한 메모리주소의 값을 사용하고 있는 것이므로
메모리를 낭비를 줄일 수 있다.