javascript] 구조분해할당(destructuring)이란?

구조분해할당(destructuring)이란?

ES6에서 사용하는 문법인 Destructuring(구조 분해 할당)은 배열이나 객체의 속성을 분해서서 그 값을 개별 변수에 담아주는 javascript 표현식입니다. 말이 조금 길고 어렵죠? 아래의 간단한 예제를 보면 금방 이해가가실겁니다 ;)

1. 배열의 구조분해할당

let student = ['jiwon', 'heebin', 'minsu'];

let student1 = student[0];
let student1 = student[1];
let student1 = student[2];

console.log(student1);	// 'jiwon'
console.log(student1);	// 'heebin'
console.log(student1);	// 'minsu'

student 배열에서 학생들의 이름을 출력하려면, 위의 방법 처럼 변수를 하나씩 설정해주어야 합니다.

조금 귀찮지 않으셧나요? 이럴 때 '구조 분해 할당(Destructuring)'을 사용하면 코드의 길이를 확 줄일 수 있습니다.  

let student = ['jiwon', 'heebin', 'minsu'];

let[student1, student2m studen3] = student

console.log(student1);	// 'jiwon'
console.log(student2);	// 'heebin'
console.log(student3);	// 'minsu'

 

배열을 구조분했더니 3줄짜리 코드를 한줄로 만들 수있었네요 :) 
참고로 만약에 네번째 학생이 없는데 student4를 구조분해할당해주면 'undefined'가 나옵니다.

2. 객체의 구조분해할당

let student = {name: 'sua', age: 20, grade: 'A'}

let name = student.name;
let age = student.age;
let class = student.grade;

console.log(name);	// 'sua'
console.log(age);	// 20
console.log(grade);	// 'A'

객체도 배열과 마찬가지로 각각의 속성을 출력하려면 변수를 하나씩 설정해줘야 합니다.
이번엔 객체를 구조분해 해보겠습니다. 어떻게 써야할까요?

let student = {name: 'sua', age: 20, grade: 'A'}

let { name, age, grade } = student

console.log(name);	// 'sua'
console.log(age);	// 20
console.log(grade);	// 'A'

짜잔, 이번에도 3줄짜리 코드를 한줄로 만들었습니다.
참고로,  속성들의 순서를 let {age, class, name} = student 이렇게 바꾸어도 정상 출력됩니다.