구조 분해 할당

자바스크립트에서 구조 분해 할당이란 객체,배열,모듈등을 변수로 분해해서 할당하는 것을 의미합니다.
이 방법은 객체,배열,모듈의 크기가 크고 특정 값만을 사용하기 원할 때 유용하게 사용할수 있습니다.

1. 배열 분해

1.1 일반적인 배열 분해 방법

구조 분해를 사용해서 배열의 값을 할당하면 아래와 같이 나오게 됩니다.

const name = ["co","mong"];
const [first_name,second_name] = name;
console.log(first_name,second_name);//co mong

배열 값의 개수보다 많은 변수에 할당하면 값이 할당되지 않은 변수는 undefined가 됩니다.

만약 배열에서 중간 값을 제외하고 값을 분해 할당하고 싶다면 쉼표(,)로 중간값을 비워준 다음에 값을 할당하면 됩니다.

const name = ["co","mong","hola"];
const [first_name,,hello] = name;
console.log(first_name,hello);//co hola

1.2 rest(...) 문법을 사용한 구조 분해

rest 문법은 말 그대로 나머지 요소들을 가지고 올때 사용합니다.

만약 배열의 크기가 클 경우 특정 값들만 변수에 할당하고 나머지 값들은 하나의 변수에 같이 저장하고 싶은 경우 ...문법을 사용해서 구조분해 하면 됩니다.

const name = ["co","mong","hola","cola","coca cola"];
const [first_name,second_name,...coke] = name;
console.log(first_name,second_name);//co hola
console.log(coke); //["hola", "cola", "coca cola"]

이때 rest는 가장 뒤쪽에 위치시켜야 합니다.

2. 객체 분해

배열 뿐만 아니라 객체 또한 구조 분해 할당으로 분해 가능합니다.

2.1 일반적인 객체 분해 방법

객체는 배열과 다르게 프로퍼티 키(key)값을 사용해서 구조 분해가 가능합니다. 이 방법은 키 값들의 순서를 바꿔도 해당되는 키 값들이 할당됩니다.

const name = {
  first_name:"co",
  second_name:"mong",
};
const {second_name,first_name} = name;
console.log(first_name,second_name);//co mong

만약 프로퍼티의 키 값과 다른 이름의 변수에 저장하고 싶다면 아래와 같은 방법을 사용하여 저장할수 있습니다.

const name = {
  first_name:"co",
  second_name:"mong",
};
const {second_name:s,first_name:f} = name;
console.log(f,s);//co mong

2.2 rest(...) 문법을 사용한 구조 분해

객체 또한 배열과 마찬가지로 rest문법을 사용해서 구조 분해가 가능합니다.

const name = {
  first_name:"co",
  second_name:"mong",
  coke:'coca',
  non_coke:'pepsi',
};
const {first_name,second_name,...coke} = name;
console.log(first_name,second_name);//co mong
console.log(coke);//{coke: "coca", non_coke: "pepsi"}

위처럼 나머지 프로퍼티들은 객체의 형태로 변수에 저장되게 됩니다.

3. 스프레드(Spread) 문법

스프레드(rest)문법 또한 rest와 마찬가지로 ES6에서 추가된 문법이고 형태가 (...)로 같습니다.
스프레드는 단어 의미 그대로 펼치는 기능을 합니다.

예를 들어 특정 객체나 배열의 값을 기존의 객체에 추가하고 싶을 때 이 기능을 사용합니다.

const name = {
  first_name:"co",
  second_name:"mong",
};
const coke = {
  ...name,
  coke:'coca',
  non_coke:'pepsi',
}
coke.second_name = 'ca';
console.log(name);
//{first_name: "co", second_name: "mong"}
console.log(coke);
//{first_name: "co", second_name: "mong", coke: "coca", non_coke: "pepsi"}

위 처럼 기존의 객체에는 영향을 주지 않으면서 값들을 가져올수 있습니다.

const arr1 = [1,2];
const arr2 = [...arr1,3,4];
arr1[0] = 0;
console.log(arr1); //[0, 2]
console.log(arr2); //[1, 2, 3, 4]

객체와 마찬가지로 배열 또한 스프레드 기능을 사용할 수 있습니다.

---

참고자료

https://ko.javascript.info/destructuring-assignment
https://learnjs.vlpt.us/useful/07-spread-and-rest.html