비구조화 할당

javascript에서 코드를 간결하게 만들기 위해 생긴 문법이다.

 

예전에는 다음과 같이 세 줄로 써야했던 코드를

const example = { a:123, b: { c: 135, d:146 }}

const a = example.a;

const d = example.b.d;

 

비구조화 할당을 사용하면 한 줄로 작성 가능하다.

const { a, b: {d}} = example;  //example에서 a와 b 안의 d를 꺼내두라는 뜻이다.

 

콘솔을 찍어보면 다음과 같은 출력이 나온다.

console.log(a);  //123

console.log(d);  //146

 

예제를 하나 더 살펴보자. 배열을 사용하는 경우에도 비구조화 할당을 하면 코드가 간결해진다.

arr = [1,2,3,4,5];

const x = arr[0];

const y = arr[1];

const z = arr[4];

이렇게 세 줄로 써야했던 코드가 한 줄로 줄어든다.

const [x,y, , ,z] = arr;  //배열 arr의 0번째에 x, 1번째에 y, 4번째에 z를 할당하라는 뜻이다. 빈칸으로 남겨둔 자리의 원소는 할당하지 않겠다는 의미이다.

 

 

• 첫번째 예제와 같이 객체를 다루는 경우 비구조화 할당을 할 때 key 값(a,b,c,d)이 일치해야하고, 두번째 예제와 같이 배열을 다루는 경우 자리(배열의 몇번째 원소인지)가 일치해야한다. 
• this를 사용하는 함수의 경우, 구조 분해 할당을 하면 오류가 생기므로 this가 있으면 비구조화를 하지 않는 것이 좋다.