구조 분해 할당

구조 분해 할당 (Destructuring assignment)란 JS의 표현식으로써 배열의 값들이나 객체의 속성을 해체하여 다른 변수에 담을수 있도록 해줍니다.

var x = [1, 2, 3, 4, 5];
var [y, z] = x;
console.log(y); // 1
console.log(z); // 2

구조 분해 할당은 원래 변수에서 어떤 값을 분해해 할당할지 정의합니다.
위의 예제에서는 배열 x의 값인 1과 2가 각각 y와 z에 분해되어 담겨진것입니다.

기본 변수 할당 방법

var foo = ["one", "two", "three"];

var [red, yellow, green] = foo;
console.log(red); // "one"
console.log(yellow); // "two"
console.log(green); // "three"

... 표현

let array = [1, 2, 3, 4, 5];
let [a, b, ...rest] = array;
console.log(rest); // [3, 4, 5];

위에서 구조 분해 할당으로 a,b에 1,과 2가 대입되고, 나머지는 ...rest로 받아 [3, 4, 5] 로 rest 변수에 배열로 저장됩니다. 위와같이 쓰이는 ... 요소를 Rest elements 라고 합니다.

const array = [1, 2, 3];
const first = array[0];
const second = array[1];
console.log(first, second); //1 2

배열의 첫번째와 두번째 요소를 각각 변수에 담고싶으면 위와같이 작성해야하지만 구조 분해 할당을 이용하면 아래와 같이 간소화 할 수 있습니다.

const array = [1, 2, 3];
const [first, second] = array;
console.log(first, second); //1 2

객체에서의 구조 분해할당도 아주 많이 쓰이고 있습니다. 객체 내부의 프로퍼티 값을 간편하게 변수에 저장할 수 있도록 해줍니다.

const obj = {
  name: "John",
  age: 18,
  memo: "Hello",
};
const { name, age, memo } = obj;
console.log(name); // "John"
console.log(age); // 18
console.log(memo); // "Hello"

// 만약 구조 분해 할당을 사용하지 않는다면?
// 아래와 같이 직접 대입해 주어야 한다...
const name = obj.name;
const age = obj.age;
const memo = obj.memo;

obj 내부의 name, age, memo프로퍼티와 동일한 이름을 가진 변수에 알아서 분해하여 할당해줍니다.
프로퍼티명과 다른 이름을 가진 변수명을 지정해 줄 수도 있습니다.

const obj = {
  name: "John",
  age: 18,
  memo: "Hello",
};
const { name: YourName, age, memo } = obj;
console.log(YourName); // 'John'

객체에서의 구조 분해 할당은 프로퍼티를 기준으로 하기때문에 순서가 바뀌더라도 문제가 없이 프로퍼티의 값을 가져올 수 있습니다.

객체의 구조 분해 할당에서도 ... 문법을 사용 가능합니다.

const obj = {
  name: "John",
  age: 18,
  memo: "Hello",
};
const { name, ...rest } = obj;
console.log(name); // "John"
console.log(rest); // { age : 18, memo: 'Hello' }

위와 같이 사용하면 name에 프로퍼티 값이 저장되고, age 와 memo의 경우 rest에 저장됩니다.