[js 응용] 비구조화 할당, 구조분해할당

비구조화 할당

let arr = ["one", "two", "three"];

let one = arr[0];
let two = arr[1];
let three = arr[2];

변수 세개에 각각 할당하려고하니 arr[0]식을 세 번 반복해야 한다.
이를 아래와 같이 표현할수도 있다.

let arr = ["one", "two", "three"];

let [one, two, three] = arr;

arr의 배열의 값들이 one, two, three에 할당된다. 이런식으로 표현하는 것을
배열의 비구조화할당이라 한다.

let arr = ["one", "two", "three"];

let [one, two, three, four='four'] = arr;
// 기본값을 설정할 수도 있다.

let a = 10;
let b = 20;
let tmp = 0;
tmp = a;
a = b;
b = tmp;
console.log(a, b);

를 비구조화할당으로 다음과 같이 표현할 수 있다.

let a = 10;
let b = 20;

[a, b] = [b, a]
console.log(a, b) // 스왑된걸 확인할 수 있다.

객체의 비구조화 할당

let object = {one:"one", two: "two", three:"three"};

let one = object.one
let two = object.two
let three= object.three

각각의 프로퍼티를 할당하기 위해 점 표기접이나 괄호 표기법을 사용하면된다.
객체의 비구조화할당을 통해 이를 좀 더 쉽게 표현할 수 있다.

let object = {one:"one", two: "two", three:"three"};

let {one, two, three} = object;
// 객체의 경우 순서가 아닌 키 값을 기준으로 비구조화할당이 이루어진다.
console.log(one, two, three);// one two three가 출력된다.

키 값을 기준으로 제약되어 보이지만 다음처럼 변수명을 바꿔서 받아올 수도 있다.

let object = {one:"one", two: "two", three:"three"};

let {three:three_val, one, two} = object;
console.log(one, two, three_val); // one two three가 출력된다.

객체또한 배열과 마찬가지로 기본값을 설정할 수 있다.