비 구조화 할당 (구조 분해 할당)

배열의 값을 각각 변수에 할당하는 방법

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"

: 위 방법은 번거롭기 때문에, 비 구조화 할당을 이용하여 코드 단축 가능

비 구조화 할당

: 배열의 요소를 변수에 쉽게 할당할 수 있는 방법
: 구조화된 배열과 같은 iterable 또는 객체의 속성을 분해해서(비 구조화 하여) 그 값을 변수에 담을 수 있게 하는 표현식

배열의 기본변수 비 구조화 할당

: 배열의 값을 순서대로 할당받아서 사용할 수 있음

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

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] = ['one', 'two', 'three'];
console.log(one, two, three, four);
// "one" "two" "three" undefined

: 할당 되지 못한 변수는 undefined 값을 가짐

변수의 기본값 설정

let [one, two, three, four='number'] = ['one', 'two', 'three'];
console.log(one, two, three, four);
// "one" "two" "three" "number"

두 개 변수의 값을 서로 바꾸기 (SWAP)

let a = 10;
let b = 20;
let temp = 0;

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

• 위 코드는 다음과 같이 비 구조화 할당을 이용하여 구현할 수 있음

let a = 10;
let b = 20;

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

객체의 비 구조화 할당

: 배열의 비 구조화 할당과 다르게 idx 순서는 상관없음. 객체의 key값을 기준으로 값을 할당함

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);
// 'one' 'two' 'three'

: 변수를 선언하고 객체의 이름은 계속 명시해야하는 번거로움이 있음

let object = {
  one : 'one',
  two : 'two',
  three : 'three',
}

let {one, two, three} = object;

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

: {one} 이라는 key값의 value를 one 변수에 저장

let object = {
  one : 'one',
  two : 'two',
  three : 'three',
}

let {one, two, thredde} = object;

console.log(one, two, thredde);
// "one" "two" undefined

: {} 내 변수가 오브젝트의 key값이 아닐 경우 값을 할당받아오지 못함

변수로 key값이 아니라 다른 변수의 이름을 사용하고 싶을 경우

let object = {
  one : 'one',
  two : 'two',
  three : 'three',
}

let {one: myNumOne, two, three} = object;
// one이라는 key값을 기준으로 value를 MyNumOne 이라는 변수에 할당하는 것

console.log(myNumOne, two, three);

기본값 설정

let object = {
  one : 'one',
  two : 'two',
  three : 'three',
}

let {one: myNumOne, two, three, four='number'} = object;
// one이라는 key값을 기준으로 value를 MyNumOne 이라는 변수에 할당하는 것

console.log(myNumOne, two, three, four);
// "one" "two" "three" "number"