[JavaScript] 전개 구문(Spread Syntax)

추가 학습이 필요한 키워드

: 불변성(원시값, 참조값), [깊은 복사, 얇은 복사], concat 

 

전개 구문이라는 표현 그대로 배열 혹은 객체들을 펼칠 수 있게 해주는 JS 문법

전개하고자 하는 배열 또는 객체 앞에 점( . ) 세 개를 붙여주는 것으로 사용할 수 있다

단, 배열은 배열에 맞는, 객체는 객체에 맞는 데이터를 담을 공간이 필요한 점 유의

 

 

1. 배열

위 내용에 근거하면 Fruits_SS 안에 Fruits와 동일한 배열의 데이터가 저장되어 있을 것이다

Fruits와 Fruits_SS에 인덱스 번호, length, 데이터의 결괏값까지 완벽하게 동일한 것을 확인

하지만, 둘은 서로 다른 독립적인 배열임을 마지막 console.log 비교문을 통해 확인할 수 있다

 

배열에 데이터를 Spread Syntax를 통해 객체로 받아오는 것 또한 가능하다({ }로 감싼다)

배열을 객체로 받을 시 배열의 각 요소는 Property, 배열의 index가 Property의 name이 된다

 

 

2. 객체

위와 같이 객체로 데이터를 전개하여 받아오는 것도 가능하다

이때, 배열을 객체로 받을 때와는 다르게 Property의 name이 숫자가 아니기 때문에

요소의 이름으로 직접 검색하여 결괏값을 가져오는 것 또한 가능해진다

 

받아온 데이터를 전개하는 과정에서 데이터를 추가하는 것 또한 가능하다

L 이라는 이름으로 'Lemon' 이 잘 추가되었음을 확인할 수 있다

 

 

변수 할당과 전개 구문의 차이

* 해당 내용은 불변성, [깊은 복사, 얕은 복사]와 관련 (포스팅 추가 예정)

지금까지 살펴본 전개 구문이 아닌, 객체 데이터를 가진 Fruits 변수 자체를 Fruits_SS에 할당

결괏값에서 확인할 수 있듯이 둘은 완전히 동일한 객체인 것을 확인할 수 있다

즉, Fruits 또는 Fruits_SS 둘 중 어느 곳의 Property가 변경점이 생긴다면

나머지 한 쪽의 데이터도 그 변경점이 그대로 반영된다

 

Fruits의 변경점이 그대로 Fruits_SS에도 적용된 것을 확인할 수 있다

 

 

반대로 Spread Syntax는 서로 다른 독립적 객체로 서로간의 변경점을 공유하지 않는다

Fruits가 변경되었지만, Fruits_SS의 데이터는 최초 받아온 데이터 그대로임을 확인할 수 있다