[22] 구조 분해 할당 (Destructuring)

구조 분해 할당(Destructuring)

구조 분해 할당은 ES6에서 도입된 문법으로, 배열이나 객체의 속성을 간단히 추출하여 개별 변수에 할당할 수 있게 해줍니다.
이를 통해 코드가 간결해지고 읽기 쉬워지며, 클린 코드를 작성할 수 있습니다.

 

1. 기본 개념

• 배열 구조 분해 할당: 배열의 요소를 개별 변수에 쉽게 할당.
• 객체 구조 분해 할당: 객체의 속성을 개별 변수에 쉽게 할당.

 

 

---

예제 1: 기본 객체 할당

예제에서는 unicorn 객체가 있고, 이 객체의 속성(accessory, animal, color)을 각각 변수로 추출합니다.

const unicorn = {
  accessory: 'horn',
  animal: 'horse',
  color: 'purple',
};

const { accessory, animal, color } = unicorn;

console.log(accessory); // horn
console.log(animal);    // horse
console.log(color);     // purple

작동 방식:

• 객체의 key를 기준으로 변수를 선언하고, 해당 값을 변수에 매핑합니다.
• 구조 분해를 통해 기존 unicorn.accessory처럼 작성하지 않아도 됩니다.

 

---

예제 2: 클린 코드 작성

설명:

• 구조 분해 할당은 클린 코드를 작성하는 데 유용합니다.
• 예제에서는 기존의 방식과 구조 분해 할당 방식을 비교하고 있습니다.

 

(1) 기존방식

function buildAnimal(animalData) {
  let accessory = animalData.accessory;
  let animal = animalData.animal;
  let color = animalData.color;
  let hairType = animalData.hairType;

  console.log(accessory, animal, color, hairType);
}

 

(2) 구조 분해 할당 방식

function buildAnimal(animalData) {
  let { accessory, animal, color, hairType } = animalData;

  console.log(accessory, animal, color, hairType);
}

 

결과:

• 구조 분해 할당을 사용하면 변수를 선언하는 코드가 간결해지고 명확하게 작성됩니다.
• 클린 코드의 핵심은 간결함과 가독성인데, 구조 분해 할당이 이를 크게 개선합니다.

 

 

---

예제 3: 깊은 객체 구조 분해

설명:

• 객체 속의 객체까지 구조 분해할 수 있습니다.
• 예제에서는 person 객체의 address 속성에서 zipcode, street, number를 변수로 추출합니다.

let person = {
  name: 'Maya',
  address: {
    zipcode: 1234,
    street: 'rainbow',
    number: 42,
  },
};

let {
  address: { zipcode, street, number },
} = person;

console.log(zipcode); // 1234
console.log(street);  // rainbow
console.log(number);  // 42

작동 방식:

• 객체 내부의 객체를 구조 분해로 접근하여 하위 속성을 바로 변수로 추출합니다.
• 중첩된 객체에서도 필요한 속성을 바로 추출할 수 있습니다.
• address는 따로 변수로 선언되지 않고, 내부 속성만 추출됩니다.

 

 

---

예제 4: 배열 구조 분해 할당

설명:

• 배열의 요소를 변수에 할당할 수 있습니다.

 

(1) 기본 할당

: 기존 배열의 값을 각각 변수로 추출하는 방식

let [a, b] = [10, 20];

console.log(a); // 10
console.log(b); // 20

//나머지 요소 추출
let [a, b, ...rest] = [10, 20, 30, 40, 50];

console.log(a);    // 10
console.log(b);    // 20
console.log(rest); // [30, 40, 50]

 

(2) 기존 방식과의 비교

:기존 배열의 값을 각각 변수로 추출하는 방식

const week = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday'];

const day1 = week[0];
const day2 = week[1];
const day3 = week[2];

 

(3) 구조 분해 할당 방식

const week = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday'];

const [day1, day2, day3, day4, day5] = week;

console.log(day1); // monday
console.log(day2); // tuesday
console.log(day3); // wednesday

포인트:

• 배열에서도 구조 분해 할당을 사용하면 간결하게 값을 추출할 수 있습니다.
• ...rest를 사용하면 나머지 값들을 별도로 배열로 저장할 수 있습니다.

 

---

1. 생략 가능

• 배열의 특정 인덱스만 추출할 수 있습니다.

2. 기본값 설정

• 기본값을 설정하면 값이 없을 경우 대체값으로 할당됩니다.

3. 변수 이름 변경

• 객체 구조 분해 시 변수 이름을 변경할 수 있습니다.

 

---

사용 사례

• 복잡한 데이터 구조에서 유용:
  • 예제에서는 people 배열 내부의 객체를 반복문으로 순회하며 name과 father를 추출합니다.

포인트:

• 반복문에서 구조 분해를 사용하면 복잡한 데이터를 간결하게 처리할 수 있습니다.
• 중첩된 데이터 구조에서도 필요한 값만 추출 가능합니다.