객체와 배열을 쉽게 다루는 법! 디스트럭처링 핵심 정리

디스트럭처링(Destructuring)

디스트럭처링은 자바스크립트에서 배열이나 객체의 값을 추출해서 변수에 쉽게 할당하는 문법이다. 디스트럭처링을 사용하면 배열이나 객체에서 특정 값들을 간결하고 직관적으로 추출할 수 있어서 코드가 깔끔학 이해하기 쉬워진다.

 

1. 객체 디스트럭처링

객체 디스트럭처링은 객체에서 원하는 속성 값을 변수로 추출하는 방법이다.

객체에서 속성을 추출하여 변수 이름을 동일하게 지정하거나, 새로운 이름을 붙여서 변수에 할당할 수 있다.

 

기본 사용법

const person = {
  name: "Alice",
  age: 25,
  city: "Seoul"
};

// 객체에서 name, age 값을 추출하여 변수로 할당
const { name, age } = person;

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

 

위 예시에서 {name, age} = persone; 은 person객체에서 name과 age 속성 값을 변수 name, age에 할당하는 방식이다.

 

변수 이름 변경

만약 객체의 속성 이름과 변수 이름을 다르게 지정하고 싶다면 :를 사용해서 새로운 변수 이름을 지정할 수 있다.

const person = {
  name: "Alice",
  age: 25,
  city: "Seoul"
};

// 객체에서 name 속성은 firstName으로, age는 years로 추출
const { name: firstName, age: years } = person;

console.log(firstName); // "Alice"
console.log(years);     // 25

 

이렇게 하면 person객체에서 name 속성은 firstName 변수에, age 속성은 yeares 변수에 할당된다.

 

---

 

2. 배열 디스트럭처링

배열 디스트럭처링은 배열에서 특정 위치의 값을 변수로 추출하는 방법이다. 배열에서는 인덱스를 기준으로 값이 할당된다.

 

기본 사용법

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

// 배열에서 첫 번째, 두 번째 값을 변수로 추출
const [first, second] = numbers;

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

 

위 코드에서는 numbers배열에서 첫 번째 요소 1과 두 번째 요소 2를 각각 first와 second라는 변수로 추출한다.

 

나머지 요소 추출(Rest Syntax)

배열 디스트럭처링에서는 ...(전개 연산자)를 사용하여 나머지 요소들을 하나의 배열로 추출할 수도 있다.

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

// 첫 번째, 두 번째 요소는 변수로 추출하고, 나머지 요소들은 rest 배열로 추출
const [first, second, ...rest] = numbers;

console.log(first);   // 1
console.log(second);  // 2
console.log(rest);    // [3, 4]

 

rest는 나머지 요소들인 [3, 4]를 하나의 배열로 받는다.

 

---

 

3. 중첩된 객체/배열 디스트럭처링

디스트럭처링은 중첩된 객체나 배열에도 적용할 수 있다. 즉, 객체 안에 배열이 있을 때도 원하는 값을 쉽게 추출할 수 있다.

 

중첩된 객체 디스트럭처링

const user = {
  name: "Alice",
  address: {
    city: "Seoul",
    country: "Korea"
  }
};

// 중첩된 객체에서 city와 country를 추출
const { address: { city, country } } = user;

console.log(city);    // "Seoul"
console.log(country); // "Korea"

 

 

중첩된 배열 디스트럭처링

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

// 중첩 배열에서 두 번째 배열의 첫 번째 요소를 추출
const [first, [second, third], fourth] = numbers;

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

 

---