자바스크립트의 디스트럭처링 할당을 잘 사용하면 코드가 간결해지고 가독성이 높아지는 효과를 느낄 수 있기 때문에 이번 포스팅에서 자세히 정리하고 넘어가보자.

디스트럭처링 할당(Destructuring Assignment)

객체 또는 배열의 값을 쉽게 분해하여 변수에 할당할 수 있도록 해주는 문법

---

1. Array Destructuring

• 배열 디스트럭쳐링을 통해 배열의 각 요소를 변수에 간편하게 할당할 수 있다.

const numbers = [1, 2, 3];
const [a, b, c] = numbers;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

기본값 설정

• 값을 전달하지 않았을 경우 기본값을 설정할 수 있다.

const numbers = [1];
const [a, b = 2, c = 3] = numbers;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

REST 연산자 사용

• REST 연산자(...)를 사용하면 배열의 일부를 별도로 변수에 할당하고 나머지 요소를 하나의 변수에 묶어서 할당할 수 있다.

const numbers = [1, 2, 3, 4, 5];
const [a, b, ...rest] = numbers;

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

---

2. Object Destructuring

• 객체 디스트럭처링을 통해 객체의 프로퍼티를 변수명으로 하여 추출할 수 있다.
• 변수 이름은 객체의 키와 동일해야 한다.

const person = { name: 'Sean', age: 25 };
const { name, age } = person;

console.log(name); // 'Sean'
console.log(age);  // 25

기본값 설정

• 객체에 값이 존재하지 않을 때 기본값을 설정할 수 있다.

const person = { name: 'Sean' };
const { name, age = 25 } = person;

console.log(name); // 'Sean'
console.log(age);  // 25

REST 연산자 사용

• REST 연산자(...)를 사용하여 특정 프로퍼티만 추출하고 나머지 프로퍼티를 별도의 객체에 할당할 수 있다.

const person = { name: 'Sean', age: 25, job: 'FE Developer' };
const { name, ...rest } = person;

console.log(name); // 'Sean'
console.log(rest); // { age: 25, job: 'FE Developer' }

다른 이름으로 할당

• 객체의 프로퍼티를 다른 이름의 변수로 할당할 수 있다.

const person = { name: 'Sean', age: 25 };
const { name: personName, age: personAge } = person;

console.log(personName); // 'Sean'
console.log(personAge);  // 25

중첩 객체일 경우 디스트럭처링

• 객체 안에 객체가 존재할 때, 중첩 구조에서 원하는 값을 추출할 수 있다.

const person = { name: 'Sean', address: { city: 'Seoul', zip: 12345 } };
const { name, address: { city, zip } } = person;

console.log(name); // 'Sean'
console.log(city); // 'Seoul'
console.log(zip);  // 12345

---

3. 함수 매개변수 디스트럭처링

• 함수의 매개변수로 전달되는 객체나 배열에 대해서도 디스트럭처링을 사용할 수 있다.

객체

function introduce({ name, age }) {
  console.log(`My name is ${name} and I am ${age} years old.`);
}

const person = { name: 'Sean', age: 25 };
introduce(person); // My name is Sean and I am 25 years old.

배열

function sum([a, b]) {
  return a + b;
}

const numbers = [1, 2];
console.log(sum(numbers)); // 3

---

활용

서버로부터 받아온 데이터에서 필요한 값만 추출할 수 있다.

const response = {
  status: 200,
  data: {
    user: {
      id: 1,
      name: 'Sean',
      email: 'sean@example.com',
    },
  },
};

const { data: { user: { name, email } } } = response;
console.log(name);  // 'Sean'
console.log(email); // 'sean@example.com'