1. 배열의 비구조화 할당

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

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

console.log(one, two, three) // one two three

배열의 기본변수 비 구조화 할당을 사용했을 경우

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

let [one, two, three] = arr;
//배열 안에 변수를 세개를 선언해주고
//arr 배열을 할당해준다.
//배열은 인덱스를 통해 할당 받는다. 순서대로 할당받는다는 소리
//arr의 0번째 인덱스는 one이라는 변수가 할당된다.
//arr의 1번째 인덱스는 two이라는 변수가 할당된다.
//arr의 2번째 인덱스는 three이라는 변수가 할당된다.

console.log(one, two, three) // one two three

위의 코드를 더 단순하게 적어본다면?

//배열의 선언분리 비구조화할당이라고 말한다.
let [one, two, three] =["one", "two", "three"];

console.log(one, two, three) // one two three

만약 변수를 할당받지 못한다면??

let [one, two, three, four = "four"] =["one", "two", "three"];
// four은 변수를 할당받지 못한다면 기본값을 설정해주면 된다. 
// 만약 기본값을 할당해주지 않는다면 콘솔창에는 'one two three undefined'가 출력된다.

console.log(one, two, three) // one two three four

응용 - 스왑

//a와 b의 값을 바꿔서 출력하고 싶을때 

let a = 10;

let b = 20;

let tmp = 0;

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

비구조 할당을 사용하면?

let a = 10;
let b = 20;

[a, b] = [b, a]
// a에는 b의 값이 할당되고
// b에는 a의 값이 할당된다. 
console.log(a, b); // 20 10

2. 객체의 비구조화 할당

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

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

console.log(one, two, three);

비구조할당을 이용하면

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

let { name, one, two, three } = object;
//객체의 비구조화 할당은 객체의 '키값'을 이용해 할당된다.
//즉 순서가 아니라 키값을 {}안에 넣어줘야만 프로퍼티 키가 가지고 있는 값을 할당 받을 수 있다.

console.log(one, two, three, name); //one two three nnnn

여기서 키값의 변수명이 아니라 다른 변수명을 지정해주고 싶다면?

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

let { name: myName, one: ONE, two, three, abc = "four" } = object;
// 비구조화 할당할때 :을 이용해 다른 변수명을 지정해 주면 된다.
// 존재하지 않는 프로퍼티의 값을 할당받고 싶으면 기본값("four")를 할당해주면 된다.

console.log(ONE, two, three, myName, abc); //one two three four