[JS] 구조분해 할당(destructuring assignment)

구조 분해 할당 문법은 배열 혹은 객체에서 각각 값(value)이나 프로퍼티(property) 를 분해하여 손쉽게 별도의 변수에 담을 수 있도록 해 줍니다.

객체 내부의 속성과 할당하는 변수명이 같을 때 코드를 줄여 쓸 수 있습니다.

배열(array)에서의 구조 분해 할당

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

구조 분해 할당이라고 해서 특별한 문법적 형태가 다른 것이 아니라, 위처럼 할당받을 변수를 왼쪽에, 분해할 대상을 오른쪽에 해서 대입하는 형식으로 작성하면 됩니다.

배열 [10, 20] 이 분해되어 각각 a, b에 담긴 것입니다.

물론 아래와 같이 미리 저장해 둔 배열로부터 구조 분해 할당하는 형태도 당연히 가능합니다.

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

만약 배열의 첫 번째 요소를 가져와서 변수에 담고 싶을 때, 어떻게 하면 될까요? 보통 아래와 같은 방법을 먼저 떠올릴 수 있습니다.

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

위 방법 말고, 배열 구조 분해 할당을 이용하여 아래와 같이 작성할 수도 있습니다.

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

array 배열에 담긴 것을 구조 분해 할당으로 first 라는 변수에 담고자 합니다. 단, first 에는 array의 element 중 맨 첫번째 1 만 담기게 됩니다.

구조분해 할당이 무엇인지 알기 전에는 그 의미 파악이 힘드셨을 수도 있지만, 이제는 배열의 첫번째 요소를 변수에 담는 것!이라고 바로 아실 수 있을 것입니다.

그리고 만약 배열의 첫 번째 요소와 두 번째 요소를 각각 변수에 담고 싶을 경우, 구조 분해 할당을 사용하지 않으면 다음과 같이 작성해야 합니다.

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

• Q. 다음 객체에서 a, c, e 속성을 구조분해 할당 문법으로 변수에 할당해보세요.

const obj = {
  a: 'hello',
  b: {
    c: 'hi',
    d: { e: 'wow'},
  },
}

정답

const { a, b: {c, d: {e} } } = obj;

• Q. 다음 객체에서 a, b, e 속성을 구조분해 할당 문법으로 변수에 할당해보세요.
  정답

const { a, b } = obj;
const { d: { e } } = b;

객체(object)에서의 구조 분해 할당

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

배열에서의 구조 분해 할당과 쓰이는 의미는 동일하되, 쓰이는 대상이 객체로 바뀐 것 뿐입니다.

단, 분해되는 대상이 배열은 array의 value(element) 였다면, 객체는 분해되는 대상이 객체의 property 인 차이가 있습니다.

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 프로퍼티들을 각각 프로퍼티명과 이름이 동일한 name, age, memo 변수에 알아서 분해하여 할당해 주고 있습니다!

물론 객체의 프로퍼티명과 다른 변수명으로 새롭게 지정해 줄 수도 있습니다. obj로부터 분해된 name 프로퍼티의 값을 새롭게 이름지은 YourName 변수에 할당하고 있습니다.

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",
};
// memo, name, age 순으로 작성해도 상관이 없다. 알아서 해당 프로퍼티명에 해당하는 값을 저장한다.
const { memo, name, age } = obj;
console.log(name); // 'John'
console.log(age); // 18
console.log(memo); // 'Hello'

// 배열 구조 분해 할당의 경우 작성된 순서대로 배열의 값을 넣어준다.
const [a, b, c] = [10, 20, 30];
console.log(a, b, c); // 10 20 30