[모던자바스크립트 DeepDive] 35. 스프레드 문법 & 36. 디스트럭쳐링 할당

본 글은 자바스크립트 스터디를 진행하면서 [모던자바스크립트 DeepDive] 책을 바탕으로 작성된 글입니다.

 

 

스프레드 문법

간단하게 요소를 개별적으로 분리하거나 합쳐주는 문법이다
기본적으로 이터러블에 사용이 가능하다

• 사용 가능한 곳
  - 함수 호출문의 인수
  - 배열 리터럴
  - 객체 리터럴 내부 ( 이터러블 아니어도 사용가능 )

console.log(...[1,2,3]);	// 1, 2, 3
console.log(..."str");		// "s", "t", "r"

console.log(...{ 0: "a", 1: "b" });	// error

// 1. 함수 호출문의 인수
function foo(...args){
  console.log(args);	// [1, 2, 3]
}
foo(...[1, 2, 3]);

// 2. 배열 리터럴 내부
const array = [1, 2, ...[3, 4, 5]];
console.log(array);		// [1, 2, 3, 4, 5]

// 3. 객체 리터럴 내부 ( 얕은 복사 )
const obj = { a: 1, b: 2 };
const copy = { ...obj };
console.log(obj === copy);	// false

 

 

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

디스트럭처링, 구조분해할당, 비구조화할당 등의 이름으로 불린다.
단어 그대로 구조대로 분해해서 할당하는 문법이다

// 배열
const [x, y, z] = [1, 2, 3];
const [x, , z] = [1, 2, 3];
const [x, ...y] = [1, 2, 3];

// 객체
const user = { name: "john", age: 23 };
const { name, age } = user;