디스트럭처링 할당(구조 분해 할당)은 구조화된 배열과 같은 이터러블 또는 객체를 destructuring하여 1개 이상의 변수에 개별적으로 할당 하는 것을 말한다.
36.1 배열 디스트럭처링 할당
- 아래의 예제와 같이, 배열 디스트럭쳐링 할당을 위해서는 할당 연산자 왼쪽에 값을 할당받을 변수를 선언해야 한다.
const arr = [ 1,2,3];
const [ one, two, three ] = arr;
console.log(one, two, three); // 1 2 3
- 배열 디스트럭처링 할당의 기준은 배열의 인덱스다. 즉, 순서대로 할당된다.
하지만 변수의 개수와 이터러블의 요소 개수가 반드시 일치할 필요는 없다.
const [a, b] = [1];
console.log(a,b); // 1 undefined
const [c, d] = [1,2,3];
console.log(c,d); // 1 2
- 다음과같이 변수에 기본값을 설정할 수 있으며, 기본값보다 할당된 값이 우선한다.
const [a,b,c = 3] = [1,2];
console.log(a, b, c); // 1 2 3
const [e, f= 10, g =3] = [1,2];
console.log(e, f, g); // 1 2 3
- 또한, 다음과같이 변수에 Rest 파라미터와 유사하게 Rest 요소 ...을 사용할 수 있다.
- Rest 요소는 Rest 파라미터와 마찬가지로 반드시 마지막에 위치해야 한다.
const [x, ...y] = [1,2,3];
console.log(x, y); // 1 [2,3]36.2 객체 디스트럭처링 할당
- 객체 디스트럭처링 할당은 객체의 각 프로퍼티를 객체로부터 추출하여 1개 이상의 변수에 할당한다.
- 할당의 대상은 객체여야 하며, 할당 기준은 프로퍼티 키다.
- 순서는 의미가 없으며, 변수 이름과 프로퍼티 키가 일치하면 할당된다.
const user = {firstName : 'Ungmo', lastName:'Lee'};
const {lastName, firstName} = user;
console.log(firstName, lastName); // Ungmo Lee
- 객체의 프로퍼티 키와 다른 변수 이름으로 프로퍼티 값을 할당받으려면 다음과 같이 변수를 선언한다.
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); // Ungmo Lee
- 객체 디스트럭처링 할당은 객체에서 프로퍼티 키로 필요한 프로퍼티 값만 추출하여 변수에 할당하고 싶을 때 유용하다.
const str = 'Hello';
// String 객체로부터 length 프로퍼티만 추출
const {length} = str;
console.log(length); // 5
const todo ={ id:1, conent:'HTML', completed : true};
//todo 객체로부터 id 프로퍼티만 추출
const {id} = todo;
console.log(id); //1
FE Developer