구조 분해 할당

객체나 배열의 데이터를 변수로 분해 하여 저장할 수 있습니다. 이렇게 하면 원하는 데이터만 변수로 분해하여 사용할 수 있습니다.
이렇게 객체나 배열을 변수로 분해하는 것을 구조 분해 할당 이라고 합니다. 이것 말고도 다양하게 구조 분행 할당 유용하게 사용할 수 있습니다.

배열 분해 하기

배열을 분해하는 방법에 대해서 알아봅시다.

let arr = [1,2];

let [first, two] = arr;
console.log(first); // 1
console.log(two); //2

위와 같이 배열의 각각의 요소를 arr[인덱스] 방법 말고도 변수로 각각의 요소를 사용할 수 있습니다.

let arr = [1,2,3,4,5,6];

let [first, ,three,four] = arr;

console.log(first); // 1
console.log(three); // 3
console.log(four); // 4

위와 같이 배열에서 원하는 요소만 변수로 저장해 사용하고 싶으면 쉼표로 자리를 비워두면 됩니다. 뒤에 5, 6 은 할당 변수가 없기 떄문에 할당되지 않습니다.

let str = "hello world!";

let [str1, str2] = str.split(" ");

console.log(str1); // hello
console.log(str2); // world!

위와 같이 문자열도 반환 값이 배열인 매서드인 split 을 사용하여 분해해 변수에 저장할 수 있습니다.

변수 교환

let str1 = "hello";
let str2 = "world";

[str1, str2] = [str2, str1];

console.log(str1); // world
console.log(str2); // hello

위와 같이 변수에 저장된 값을 구조분해를 이용하면 쉽게 교환할 수 있습니다. 만약 이 방법을 몰랐다면 어떻게 해야 할까요? 다시 값을 할당하거나 새로운 변수를 하나 생성해 그 변수에 하나의 값을 저장해두고 두 변수의 값을 교환해야 할 것 입니다.

문자열, 배열을 분해한다고 해서 기존의 문자열과 배열은 수정되지 않습니다.
할당 연산자 우측에는 이터러블한 객체라면 모두 가능하고 좌측에도 할당할 수 있는 것이라면 모두 가능 합니다.

구조 분해 후 나머지 요소

원하는 요소만 구조 분해하고 남은 요소들은 모아두고 사용하고 싶다면 이 방법을 사용하면 됩니다.

let arr = [1,2,3,4,5,6];

let [arr0,arr1, ,arr3, ,...rest] = arr;

console.log(arr0); // 1
console.log(arr1); // 2
console.log(arr3); // 4
console.log(rest); // [6]

위와 같이 ...변수를 사용하면 나머지 요소들이 모두 rest 에 배열로 저장됩니다. 이 변수는 가장 마지막에 사용해야 합니다.

기본값 주기

만약 배열의 요소보다 할당하고자 하는 변수가 더 많다면 어떻게 될까요?

let arr = [1];

let [one, two] = arr;

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

위와 같이 undefined 가 할당됩니다. 그럼 만약 할당하고자 하는 변수는 있는데 값이 없다면 내가 원하는 값을 저장할 수 있는 방법은 없을까요? 있습니다. 바로 기본값을 설정하는 것 입니다.

let arr = [1];

let [one, two = 2] = arr;

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

위와 같이 할당할 변수에 할당 연산자 우측에 값을 작성한다면 만약 변수에 할당할 값이 없다면 이 값이 저장 됩니다. 우측의 값에는 함수, 표현식 도 기본값이 될 수 있습니다.

객체 구조 분해 할당

자 그럼 객체는 어떻게 구조 분해 할당을 하는지 알아봅시다.
객체도 크게 다르지는 않습니다. 할당할 변수를 객체 프로퍼티의 키와 같은 변수를 사용해 객체 구조 분해를 할 수 있습니다.

let user =  {
  name : "kane",
  age : 10,
};

let {name, age} = user

console.log(name); // kane
console.log(age); // 10

위와 같이 할당 연산자 좌측에는 할당할 변수 우측에는 객체를 위치시키면 객체의 프로퍼티 값을 할당 받을 수 있습니다.
그럼 객체 프로퍼티 키와 같은 이름의 변수만 사용해야 할까요? 아닙니다. 용도에 따라서 다른 이름의 변수에 할당할 수 있습니다.

let user =  {
  name : "kane",
  age : 10,
};

let {name:id, age:password} = user

console.log(name); // kane
console.log(age); // 10

위와 같이 콜론 (:) 을 이용해서 분해하려는 객체 프로퍼티 : 할당 받을 변수 로 작성해서 사용 합니다.
배열과 같이 객체에서도 할당 받을 변수에 할당할 값이 없다면 기본값을 할당 연산자로 작성해
주면 됩니다.
객체 구조 분해 할당은 많은 프로퍼티를 가진 객체에서 원하는 프로퍼티 값만 가져오고 싶을때 유용 합니다.
당연히 배열과 같이 나머지 객체의 프로퍼티를 ...변수 의 방법으로 변수에 저장할 수 있습니다.

중첩 구조 분해

객체, 배열에서 안에 또 다른 객체, 배열을 가지고 있을떄는 값을 어떻게 분해 할까요? 복잡한 구조의 객체나 배열을 분해하는 방법이 중첩 구조 분해 방법 입니다.

let computer = {
  size : {
    width : 100,
    height : 100,
  },
  options: ["ssd","cpu","memory"],
  items : "mouse",
};

let { 
    size : {
        width,
        height,
    },
    options : [option1, option2,options3],
    items,
} = computer

위와 같은 방법으로 객체 안에 객체와 배열의 값들은 구조 분해 해서 변수에 할당 받을 수 있습니다.

이렇게 구조 분해 할당 방법에 대해서 알아봤습니다.