[모던 자바스크립트 Deep Dive] 36장 : 디스트럭처링 할당 - JS

디스트럭처링 할당

디스트럭처링 할당(구조 분해 할당)은 구조화된 배열과 같은 이터러블 또는 객체를 비구조화하여, 다른 말로는 구조를 파괴하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다.

 

배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용하다.

---

배열 디스트럭처링 할당

// ES5
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

위 코드는 ES5에서 구조화된 배열을 디스트럭처링하여 1개 이상의 변수에 할당하는 방법이다.

 

// ES6
const arr = [1, 2, 3];

const [one, two, three] = arr;

console.log(one, two, three);

ES6에서 배열 디스트럭처링 할당을 위해서는 할당 연산자 왼쪽 값을 할당받을 변수를 선언해야 한다. 이때 변수를 배열 리터럴 형태로 선언한다.

 

 

 

const [a, b, c = 3] = [1, 2];
console.log(a, b, c); // 1 2 3

기본값 설정이 가능하다.

 

const [x, ...y] = [1, 2, 3];
console.log(x, y);

배열 디스트럭처링 할당을 위해 변수에 Rest파라미터와 유사하게 Rest 요소 ... 를 사용할 수 있다. Rest 요소는 반드시 마지막에 위치해야 한다.

 

 

 

객체 디스트럭처링 할당

const user = { firstName: 'Ungmo', lastName: 'Lee' };

const { lastName, firstName } = user;
console.log(firstName, lastName);

ES6의 객체 디스트럭처링 할당은 객체의 각 프로퍼티를 객체로부터 추출하여 1개 이상의 변수에 할당한다. 

이때 할당의 대상은 객체이어야 하며, 할당 기준은 프로퍼티 키다.

 

즉, 순서는 의미가 없으며 선언된 변수 이름과 프로퍼티 키가 일치하면 할당된다.

 

 

// 객체의 프로퍼티 키와 다른 변수 이름으로 프로퍼티 값을 할당 시
const user = { firstName: 'Ungmo', lastName: 'Lee' };
const { lastName: ln, firstName: fn } = user;

console.log(fn, ln); // Ungmo Lee


// 기본값 설정
const { firstName = 'Ungmo', lastName } = { lastName: 'Lee' };

console.log(firstName, lastName);

const { firstName: fn = 'Ungmo', lastName: ln } = { lastName: 'Lee' };

console.log(fn, ln); // Ungmo Lee

객체 디스터럭처링 할당은 객체에서 프로퍼티 키로 필요한 프로퍼티 값만을 추출하여 변수에 할당하고 싶을 때 유용하다. 또한 객체를 인수로 전달받는 함수의 매개변수에도 사용할 수 있다.

 

 

const { x, ...rest } = { x: 1, y: 2, z: 3 };

console.log(x, rest); // 1 {y:2, z:3}

객체 디스트럭처링 할당을 위한 변수에 Rest 파라미터나 Rest 요소와 유사하게 Rest 프로퍼티 ... 을 사용할 수 있다. Rest 프로퍼티는 Rest 파라미터나 Rest 요소와 마찬가지로 반드시 마지막에 위치해야 한다.

 

 

 

 

좋아요는 로그인하지 않아도 누를 수 있습니다!