[JavaScript] 자바스크립트 문법 :: 구조 분해 할당

구조 분해 할당이란?

구조 분해 할당은 배열 혹은 객체의 속성을 분해하여 그 개별의 값을 각각 다른 변수에 담을 수 있도록 하는 자바스크립트의 표현 방식이다.

 

 

배열의 구조 분해

배열에서는 다음과 같은 방법으로 구조 분해를 할 수 있다.

number 라는 배열안의 각 인자를 각기 다른 변수에 나눠 담는 모습이다.

 

const number = [1, 2, 3];

const [one, two, three] = number;

console.log(one); // 1
console.log(two); // 2
console.log(three); // 3

 

 

아래와 같이 number의 인자는 2개이고 3개의 변수에 나눠 담는다면 마지막 인자는 선언만 되었기 때문에 값은 undefined가 될 것이다.

 

const number = [1, 2];

const [one, two, three] = number;

console.log(one); // 1
console.log(two); // 2
console.log(three); // undefined

 

 

아래처럼 a,b를 먼저 선언한 뒤에 값을 할당해도 된다.

 

let a,b;

[a,b] = [1,2];

console.log(a); // 1
console.log(b); // 2

 

 

 

아래와 같이 먼저 기본값을 할당해 놓으면 값이 할당되지 않을 때 기본값이 출력된다.

 

let a,b;

[a=1, b=2] = [3]; // 기본 값 할당

console.log(a); // 3
console.log(b); // 2

 

 

 

 

객체의 구조 분해

배열과 마찬가지로 객체도 구조분해를 할 수 있다.

 

const props = {name:'submit', value:'눌러봐'};

const {name, value} = props;

console.log(name); // submit
console.log(value); // 눌러봐

 

 

배열과 마찬가지로 선언먼저 하고 나중에 할당을 할 수도 있다.

 

let aa, bb;

({aa, bb} = {aa:'apple', bb:'banana'});

console.log(aa);  // apple
console.log(bb); // banana

 

 

 

아래처럼 다른 이름의 변수에 저장할 수도 있다.

 

let num = {one: 1, two: 2};

let {one: hana, two: dull} = num;

console.log(hana); // 1
console.log(dull); // 2

 

 

배열과 마찬가지로 기본값을 할당할 수 있다.

 

let {a = 1, b = 2} = {a: 3};

console.log(a); // 3
console.log(b); // 2

 

 

 

이러한 구조분해 할당으로 배열과 객체를 좀 더 다양한 표현방식으로 나타낼 수 있다. 이를 응용하여 더욱 깔끔하고 보기 쉬운 코드를 작성할 수 있다.