본문 바로가기

Front/Java Script

오브젝트의 가변성(참조형) & Spread Operator ([ ... ], { ... })

 

오브젝트의 가변성

 

변수에 원시형 데이터(primitive type : number, String, boolean, null, undefined)를 할당하게 되면 데이터 자체가 변수에 할당되지만,

오브젝트를 변수에 할당하면 변수에는 오브젝트가 들어있는 메모리의 주소(참조값, reference)가 할당된다.

 

a = 1

b = a

b = 5

//결과 a=1, b=5

 

위의 코드에서 원시형 데이터는 number는 다른 변수에 할당한 후, 데이터를 변경해도 원본 데이터 a에 영향을 미치지 않는다.

 

 

 

a = [ 1, 2, 3 ]

b = a

b.push(4)

//결과 a=[1,2,3,4],   b=[1,2,3,4]

 

위의 코드에서 배열오브젝트는 다른 변수에 할당한 후, 데이터를 변경하면 원본 데이터 a에 영향을 미친다는 것을 알 수 있다.

 

 

 

** 나의 이해.

가변성이란? 데이터가 복사되었을 때, 원본 데이터에 영향을 미치는 성질.

오브젝트는 원본 데이터에 영향을 미칠 수 있기 때문에 가변성을 가졌다.

그렇기 때문에 객체를 복사할 때는 주의해야하며,

불변성을 유지하기 위해 Spread Operator, Object.assign() 등을 사용할 수 있다.

 

 

 


 

Spread Operator

 

[ ...배열명 ], { ...객체명 } 와 같이 사용한다.

 

Spread Operator는 Shallow-cloning(얕은 복사)을 한다.

그래서 오브젝트의 불변성을 유지하기 위해 사용할 수 있다.

 

변수에 오브젝트를 할당할 경우, 변수는 오브젝트의 참조값(레퍼런스)을 가지고 있다.

Spread Operator는 단순히 참조값을 가져오는 것이 아니라 

오브젝트에 있는 모든 아이템들을 새로운 오브젝트로 가지고 오기때문에 기존의 오브젝트와는 다른 오브젝트가 된다. (같지 않다)

하지만, 오브젝트 안의 내용들을 일일이 복사해서 새로운 것을 만드는 것이 아니라 참조값을 복사해온다.

 

정리하면, 오브젝트의 껍데기는 새로 만들고, 내용물의 참조값을 복사해와서 기존과는 다른 오브젝트를 만들게 된다.

기존의 오브젝트와는 다르기 때문에 새로운 오브젝트에 새로운 내용을 추가하거나 삭제해도 기존의 오브젝트에 영향을 미치지 않는다. 

 

 

 

'Front > Java Script' 카테고리의 다른 글

상속 (prototype)  (0) 2021.04.29
전역객체 / this & this의 제어  (0) 2021.04.20
객체의 생성 ( 생성자 & new )  (0) 2021.04.20
함수의 호출(call & apply)  (0) 2021.04.20
arguments VS parameter  (0) 2021.04.20