[자바스크립트_개념정리] 스프레드

전개 구문 spread ‘ … ‘

배열과 같이 반복 가능한 객체를 전개 구문을 사용해서 확장시킨다

정보의 소스를 펼쳐서 복사하여 다른 용도로 활용할 수 있다

- 함수로 호출할 경우에는 인수로 확장

- 배열 리터럴에서는 요소로 확장

- 객체 리터럴에서는 속성(키-값의 쌍)으로 확장

1. 함수로 호출하는 경우

: 반복가능한 객체를 함수로 호출해서 인수를 따로 따로 넣어준다

=> 위 방법으로 배열 nums를 함수의 인수로 넣을 경우 배열 자체를 인식하기 때문에 어떻게 출력해야할지 모름으로 NaN가 반환됨

배열자체가 아니라 그 속의 요소 하나 하나씩 따로 인수로 넣어야 하는데

’ … ‘ 를 붙이면 배열이 펼쳐지게 되면서 인수가 따로 들어가게 된다

=> nums의 숫자(요소)들이 따로 인수로 들어가 최댓값, 최솟값을 반환할 수 있다

[ 스프레드 구문 특징 확인하기 ]

=> nums 배열 자체가 출력되고

=> 스프레드 구문은 nums 배열의 요소가 분리되어 각각 출력됨

[ 문자열 전개 ]

=> 스프레드 구문을 사용하면 문자가 하나씩 펼쳐져 진다

=> 문자열을 하나씩 넣은 것과 결과가 같음

=> ‘…’ 을 쓰면 문자열 덩어리가 문자 하나하나로 분리되면서 인수가 분리되는 것과 같음

2. 배열 리터럴에서의 스프레드

: 배열의 컨텐츠를 복사해서 새로운 배열을 만든다

[ 두 개 이상의 배열을 묶기 ]

=> 순서를 바꿀 수도 있고, 추가를 할 수 도 있다

3. 객체 리터럴에서의 스프레드

: 객체에 있는 속성을 복사해 새로운 객체를 만들 수 있으며

배열과 마찬가지로 두 개 이상의 객체를 묶기, 객체 복사, 수정이 가능하다

=> 객체가 합쳐질 때 같은 이름의 속성이 있는 경우 나중에 복사된 속성이 유효하다

=> 속성을 수정 (취미 : 등산 => 노래듣기),  추가(나이 26세)

[ 객체리터럴 스프레드 구문 활용 연습 ]

[ 배열이나 문자열을 펼쳐서 객체리터럴로 만들기 ]

=> 인덱스가 속성 이름(key)이 됨

전개를 사용하여 새로운 객체를 만드는 이유

객체를 복사하는 경우는 라이브러리나 react도구로 작업할 때인데

이때 객체를 변형하지 않고 복사하는 것이 중요함