35장 스프레드 문법 36장 디스트럭처링 할당 (모던 자바스크립트 Deep Dive)

모던 자바스크립트 Deep Dive 글 목록(스터디)
https://hello-kk.tistory.com/780

---

 

● 스프레드 문법(전개 문법)는 이터러블에 한정.

  Array, String, Map, Set, DOM 컬렉션(NodeList, HTMLCollection), arguments

● 이터러블이 아닌 일반 객체, 유사 배열 객체는 불가능

○ 스프레드 문법의 결과는 값이 아니다(개별적인 값의 목록) => 변수에 할당 불가능

 

○ Rest 파라미터 vs 스프레드 문법: 반대 개념(똑같이 생김)

Rest 파라미터	스프레드 문법
인수들의 목록 => 배열	배열(과 같은 이터러블) => 개별적인 값드의 목록

 

● 이터러블을 배열로 변환 => [...이터러블]

	기존 방식	★스프레드 문법★
concat	[1,2].concat([3,4])	[...[1,2], ...[3,4]]
splice	Array.prototype.splice.apply([1,4], [1,0].concat([3,4]))	[1,4].splice(1,0, ...[3,4])
slice 배열 복사(얕은 복사)	[1,2].slice()	[...[1,2]]
assign	Object.assign({}, {x:1, y:2}, {y:3, z:4})	{...{x:1, y:2} ...{y:3, z:4}}

 

● 디스트럭처링 할당(구조분해 할당)

: 구조화된 배열과 같은 이터러블 또는 객체를 비구조화(구조 파괴)하여 1개 이상의 변수에 개별적으로 할당하는 것

 - 기본값 설정 가능

 

○ 스프레드 문법 vs 디스트럭처링 할당

스프레드 문법은 배열을 펼치는 역할

디스트럭처링 할당은 배열의 값들을 추출하여 변수에 할당하는 역할

 

○ 종류

 (1) 배열 디스트럭처링 할당: 인덱스(즉, 순서에 의미가 있다)

 (2) 객체 디스트럭처링 할당: 프로퍼티 키(즉, 순서에 의미가 없다)

  ※단, 프로퍼티 키와 다른 변수 이름으로 프로퍼티 값을 할당 받으려면, { 원래 프로퍼티 키: 바꿀 프로퍼티 키 변수명}

 

○ 배열 디스트럭처링 할당과 객체 디스트럭처링 할당은 혼용이 가능하다.

○ 중첩 객체

○ Rest 파라미터처럼 마지막 위치에 ... 사용 가능

---

스프레드 문법의 결과는 값이 아니다(개별적인 값의 목록) => 변수에 할당 불가능

...[1,2,3]  => 1, 2, 3

 

"배열은 아니지만 컴마로 구분된 목록"

 

이는 다음과 같은 차이가 있다.

Math.max([1,2,3]) // NaN
Math.max(...[1,2,3]) //3
Math.max.apply(null,[1,2,3]) //3

 

35.2 배열 리터럴 내부에서 사용하는 경우

35.2.1 concat

	기존 방식	★스프레드 문법★
concat	[1,2].concat([3,4])	[...[1,2], ...[3,4]]
splice	Array.prototype.splice.apply([1,4], [1,0].concat([3,4]))	[1,4].splice(1,0, ...[3,4])
slice 배열 복사(얕은 복사)	[1,2].slice()	[...[1,2]]

35.2.4 이터러블을 배열로 변환

 => [...이터러블]

 

유사 배열 객체는 불가능

const arrayLike = {
    0:1,
    1:2,
    length:5
}

[...arrayLike].reduce((acc,cur) => pre +cur, 0); // 불가능

Rest 파라미터 사용해서 변환

const sum = (...args) => args.reduce((pre,cur)=> pre+cur ,0 )

35.3 객체 리터럴 내부에서 사용하는 경우

	기존 방식	스프레드 문법
assign	Object.assign({}, {x:1, y:2}, {y:3, z:4})	{...{x:1, y:2} ...{y:3, z:4}}

 

36장 디스트럭처링 할당

 

● 디스트럭처링 할당(구조분해 할당)

: 구조화된 배열과 같은 이터러블 또는 객체를 비구조화(구조 파괴)하여 1개 이상의 변수에 개별적으로 할당하는 것

 

36.1 배열 디스트럭처링 할당

const arr = [1,2,3]
const [one, two, three] = arr

● 선언과 할당 분리가 가능하지만, const로 선언할 수 없으므로 권장하지 않는다.

● 배열 디스트럭처링 할당의 기준: 인덱스

 - 인덱스 갯수 이하만큼 할당이 되고, 변수가 인덱스 갯수보다 많은 경우 undefined 할당

 - 생략도 가능하다

 const [a, , c] = [1,2,3] // a는 1, c는 3

 - 변수에 기본값 설정이 가능하다.

const [a,b,c=3] = [1,2]; // a는1, b는2, c는 3

36.2 객체 디스트럭처링 할당

각 프로퍼티를 객체로부터 추출하여 1개 이상의 변수에 할당

프로퍼티 키와 다른 변수 이름으로 프로퍼티 값을 할당 받으려면

const user = {firstName: 'a', lastName: 'b'}
const {lastName: ln, firstName:fn} = user;