디스트럭처링 할당 (destructuring assignment), 구조 분해 할당
- 구조화된 배열과 같은 이터러블 또는 객체를 비구조화하여 1개 이상의 변수에 개별적으로 할당하는 것
- 필요한 값만 추출해 변수에 할당할 때 유용함
배열 구조 분해 할당
- 배열 구조 분해 할당의 대상은 이터러블이어야 하며, 할당 기준은 배열의 인덱스임
- 순서대로 할당됨
- 변수의 개수와 이터러블의 요소의 개수가 반드시 일치할 필요는 없음
- 배열 구조 분해 할당을 위한 변수에 Rest 요소 사용 가능
const arr = [1,2,3];
const [one, two, three] = arr;
const [x, ...y] = arr;
console(x,y); // 1 [2,3]
객체 구조 분해 할당
- 각 프로퍼티를 객체로부터 추출해 1개 이상의 변수에 할당
- 할당 기준은 프로퍼티 키, 순서는 의미 없음
- Rest 프로퍼티 사용 가능
const user = { firstName : 'diago', lastName : 'Kim'};
const { lastName, firstName } = user;
const { lastName : ln, firstName : fn } = user;
console.log(fn, ln); // diago Kim
const {x, ...rest} = {x:1, t:2, y:3};
'FE > 리뷰' 카테고리의 다른 글
[모던 자바스크립트 딥다이브] 42장 비동기 프로그래밍 (0) | 2024.05.11 |
---|---|
[모던 자바스크립트 딥다이브] 38장 브라우저의 렌더링 과정 (0) | 2024.05.10 |
[모던 자바스크립트 딥다이브] 35장 스프레드 문법 (0) | 2024.05.05 |
[모던 자바스크립트 딥다이브] 34장 이터러블 (0) | 2024.05.05 |
[모던 자바스크립트 딥다이브] 26장 ES6 함수의 추가 기능 (0) | 2024.04.27 |