Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- ES6 함수의 추가 기능
- 제너레이터
- 스프레드 문법
- Ref로 값 참조하기
- await
- Escape Hatches
- 클로저
- Ref로 DOM 다루기
- rest api
- Set과 Map
- 프로미스
- 비동기 프로그래밍
- Deep Dive
- REACT
- 싸피
- 디스트럭처링 할당
- 브라우저의 렌더링 과정
- 에러 처리
- BETA
- 코어JS
- js
- DEEPDIVE
- 데이터 타입
- Strict Mode
- 배열
- 모듈
- 개발 환경 구축
- async
- 표현식과 문
- 이터러블
Archives
- Today
- Total
코딩을 쉽게 해보자
[Deep Dive] 36장 - 디스트럭처링 할당 본문
디스트럭처링 할당)구조 분해 할당)은
구조화된 배열과 같은 이터러블 또는 객체를
destructuring(비구조화, 구조 파괴)하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다.
배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용하다.
1. 배열 디스트럭처링 할당
ES5에서 구조화된 배열을 디스트럭처링하여 1개 이상의 변수에 할당하는 방법은 각각 해야 했었다.
배열 디스트럭처링 할당의 대상(할당문의 우변)은 이터러블이어야 하며, 할당 기준은 배열의 인덱스다.
변수에 기보본값을 설정할 수 있고, 기본값보다 할당된 값이 우선한다.
Rest 파라미터와 유사하게
Rest 요소 ...을 사용할 수 있다.
Rest 요소는 Rest 파라미터와 마찬가지로 반드시 마지막에 위치해야 한다.
// Rest 요소
const [x, ...y] = [1, 2, 3];
console.log(x, y); // 1 [2, 3]
2. 객체 디스트럭처링 할당
ES5에서는 객체의 각 프로퍼티를 객체로부터 디스트럭처링하여 변수에 할당하기 위해서는
프로퍼티 키를 사용해야 한다.
ES6의 객체 디스트럭처링 할당은
각 프로퍼티를 객체로부터 추출하여 1개 이상의 변수에 할당한다.
이때 객체 디스트럭처링 할당의 대상(할당문의 우변)은 객체이어야 하며,
할당 기준은 프로퍼티 키다.
const user = { firstName: "Ungmo", lastName: "Lee" };
// ES6 객체 디스트럭처링 할당
// 변수 lastName, firstName을 선언하고 user 객체를 디스트럭처링하여 할당한다.
const { lastName, firstName } = user;
console.log(firstName, lastName); // Ungmo Lee
객체 디스트럭처링 할당을 위한 변수에
Rest 파라미터나 Rest 요소와 유사하게 Rest 프로퍼티 ...을 사용할 수 있다.
'JavaScript' 카테고리의 다른 글
[Deep Dive] 38장 - 브라우저의 렌더링 과정 (0) | 2023.01.02 |
---|---|
[Deep Dive] 37장 - Set과 Map (0) | 2023.01.01 |
[Deep Dive] 35장 - 스프레드 문법 (0) | 2022.12.31 |
[Deep Dive] 34장 - 이터러블 (0) | 2022.12.29 |
[Deep Dive] 33장 - 7번째 데이터 타입 Symbol (0) | 2022.12.28 |