[기초] JavaScript Destructuring

디스트럭처링(Destructuring)은 JavaScript의 편리한 문법으로, 배열이나 객체의 값을 개별 변수로 쉽게 추출할 수 있게 해 줍니다. 이 문법은 코드의 가독성을 높이고, 필요한 값을 간단하게 추출할 수 있는 방법을 제공합니다.

 

1. 배열 디스트럭처링

배열의 값을 순서대로 변수에 할당할 수 있습니다.

 

기본 사용법

const numbers = [1, 2, 3];
const [first, second, third] = numbers;

console.log(first);  // 1
console.log(second); // 2
console.log(third);  // 3

 

기본값 설정

디스트럭처링에서 값이 없을 경우, 기본값을 설정할 수 있습니다.

const numbers = [1, 2];
const [first, second, third = 3] = numbers;

console.log(third); // 3 (배열에 값이 없어서 기본값 사용)

 

일부 값 건너뛰기

배열의 특정 요소를 건너뛰고 필요한 요소만 추출할 수 있습니다.

const numbers = [1, 2, 3, 4];
const [first, , third] = numbers;

console.log(third); // 3 (두 번째 값을 건너뜀)

 

나머지 요소 추출

배열의 일부 요소만 변수에 할당하고, 나머지 요소를 별도의 배열로 추출할 수 있습니다.

const numbers = [1, 2, 3, 4, 5];
const [first, second, ...rest] = numbers;

console.log(rest); // [3, 4, 5]

 

---

2. 객체 디스트럭처링

객체의 속성을 이름으로 추출하여 변수에 할당할 수 있습니다.

 

기본 사용법

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

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

 

변수 이름 변경

객체의 속성 이름과 다른 변수 이름을 사용할 수 있습니다.

const person = { name: 'Alice', age: 25 };
const { name: userName, age: userAge } = person;

console.log(userName); // 'Alice'
console.log(userAge);  // 25

 

기본값 설정

객체 속성이 없을 때 기본값을 사용할 수 있습니다.

const person = { name: 'Alice' };
const { name, age = 30 } = person;

console.log(age); // 30 (age 속성이 없어서 기본값 사용)

 

나머지 속성 추출

일부 속성만 추출하고 나머지 속성들을 별도의 객체로 분리할 수 있습니다.

const person = { name: 'Alice', age: 25, city: 'New York' };
const { name, ...rest } = person;

console.log(rest); // { age: 25, city: 'New York' }

 

---

3. 중첩 구조 디스트럭처링

배열이나 객체가 중첩된 구조일 때, 깊숙한 곳의 값까지 한 번에 추출할 수 있습니다.

 

중첩된 객체

const person = {
  name: 'Alice',
  address: {
    city: 'New York',
    zip: 10001
  }
};

const { address: { city, zip } } = person;

console.log(city); // 'New York'
console.log(zip);  // 10001

 

중첩된 배열

const colors = ['red', ['green', 'lightgreen'], 'blue'];
const [primary, [secondary]] = colors;

console.log(primary);   // 'red'
console.log(secondary); // 'green'

 

---

4. 함수 매개변수에서의 디스트럭처링

디스트럭처링을 함수의 매개변수에 사용할 수 있습니다.

 

객체 디스트럭처링

함수에 객체를 전달할 때, 필요한 속성만 추출할 수 있습니다.

function greet({ name, age = 30 }) {
  console.log(`Hello, my name is ${name} and I am ${age} years old.`);
}

const person = { name: 'Alice' };
greet(person); // 'Hello, my name is Alice and I am 30 years old.'

 

배열 디스트럭처링

배열을 함수에 전달할 때, 필요한 요소만 추출할 수 있습니다.

function displayColors([first, second, third]) {
  console.log(`Primary colors: ${first}, ${second}, ${third}`);
}

const colors = ['red', 'green', 'blue'];
displayColors(colors); // 'Primary colors: red, green, blue'

 

---

5. 실전 예제

API 응답 처리

API 호출 결과로 받은 객체에서 필요한 데이터만 추출할 때 유용합니다.

const apiResponse = {
  data: {
    user: {
      id: 1,
      name: 'Alice',
      email: 'alice@example.com'
    }
  }
};

const { data: { user: { id, name } } } = apiResponse;

console.log(id);   // 1
console.log(name); // 'Alice'

 

배열에서 최댓값, 최솟값 찾기

배열의 최댓값과 최솟값을 구할 때 디스트럭처링을 활용할 수 있습니다.

const numbers = [10, 20, 30, 40, 50];
const [min, max] = [Math.min(...numbers), Math.max(...numbers)];

console.log(min); // 10
console.log(max); // 50

 

---

6. 주의사항

1. 변수 이름: 객체 디스트럭처링에서는 추출할 속성의 이름과 변수 이름이 같아야 합니다. 그렇지 않으면 원하는 값을 얻을 수 없습니다.
2. 기본값: 기본값을 설정할 때는 undefined인 경우에만 기본값이 사용됩니다. null이나 다른 falsy 값에는 기본값이 적용되지 않고, 그대로 그 값이 사용됩니다.

디스트럭처링은 JavaScript에서 매우 강력하고 유용한 도구로, 특히 복잡한 데이터 구조를 다룰 때 큰 도움이 됩니다. 이 문법을 잘 활용하면 코드의 가독성과 효율성이 크게 향상됩니다.