디스트럭처링 할당
디스트럭처링 할당은 구조화된 배열과 같은 이터러블 또는 객체를 비구조화하여 1개이상의 변수에 개별적으로 할당 하는 것을 말한다.
배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용하다.
배열 디스트럭처링 할당
ES5에서 구조화된 배열을 디스트럭처링하여 1개 이상의 변수에 할당하는 방법은 다음과 같다.
var arr = [1, 2, 3];
var one = arr[0];
var two = arr[1];
var three = arr[2];
console.log(one, two, three); // 1, 2, 3
위에 처럼 각각 변수에 할당을 하였는데 ES6의 배열 디스트럭처링 할당은 아래와 같이 쉽게 할당 할 수 있다.
const arr = [1, 2, 3];
const [one, two, three] = arr;
console.log(one, two, three); // 1, 2, 3
이때 우변이 이터러블을 할당하지 않으면 에러가 발생한다.
const [x ,y]; // SyntaxError: Missing initializer in destructuring declaration
const [a , b] = {}; // TypeError: {} is not iterable
객체 디스트럭처링 할당.
ES5에서 객체의 각 프로퍼티를 객체로 부터 디스트럭처링하여 변수에 할당하기 위해서는 위 배열과 비슷하게 프로퍼티 키를 사용해야한다.
var user = { firstName: 'Jeong', lastName: 'jihoon' };
var firstName = user.firstName;
var lastName = user.lastName;
console.log(firstName, lastName); // Jeong jihoon
ES6의 객체 디스트럭처링 할당은 할당 기준은 프로퍼티 키다. 순서에는 의미가 없으며 선언된 변수 이름과 프로퍼티 키가 일치하면 할당이 된다.
const user = { firstName: 'Jeong', lastName: 'jihoon' };
// 순서에 상관 없다.
const { lastName, firstName } = user;
console.log(firstName, lastName); // Jeong jihoon
우항에 객체 또는 객체로 평가될 수 있는 표현식을 할당 하지 않으면 에러가 발생한다.
const { lastName, firstName };
// SyntaxError: Missing initializer in destructuring declaration
const { lastName, firstName } = null;
// TypeError: cannot destructure property 'lastName' of 'null' as it is null
객체의 프로퍼티 키와 다른 변수 이름으로 프로퍼티 값을 할당 받으려면 다음과 같이 변수를 선언한다.
const user = { firstName: 'Jeong', lastName: 'jihoon' };
const { lastName: ln, firstName: fn } = user;
console.log(fn, ln); // Jeong jihoon
Author And Source
이 문제에 관하여(디스트럭처링 할당), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jungjh123456/디스트럭처링-할당저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)