[js 자주 사용되는 ES6+문법] 비구조화 할당

0. 비구조화 할당 (Destructuring Assignment)

: 배열이나 객체의 값을 변수에 쉽게 할당하기 위한 방법

 

1. 종류

1.1 배열 비구조화 할당 (Array Destructuring)

const arr = [1, 2, 3];

// 비구조화 할당
const [a, b, c] = arr; // 원하는 별칭으로 재할당 가능

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

-> 배열의 비구조화 할당에서는 순서가 중요

---

1.2 객체 비구조화 할당 (Object Destructuring)

const object = { name: 'Hee', age: 10, favor: 'Game' }
const { name, age } = object
console.log(name) // Hee      
console.log(age) // 10

const object = { name: 'Hee', age: 10, favor: 'Game' }

// 객체 비구조화 
const { name: hee_name, age: hee_age } = object // 비순서 할당
console.log(hee_name) // Hee
console.log(hee_age) // 10

// 이름 그대로 사용시
const carname = "애스턴마틴 DB11"
const round = 11
const shorten = { 
	carname,
	round,
}

---

2. 기본값 설정 및 사용 예시

2.1 기본값 설정 (Default Values)

const arr = [1];

// 기본값 설정
const [a, b = 2] = arr;

console.log(a); // 1
console.log(b); // 2 (기본값)

const object = { age: 10, favor: "Game" };

// 객체 비구조화
const { age: hee_age, name: hee_name = "Hee" } = object;
console.log(hee_name); // 10
console.log(hee_age); // Hee

---

2.2 사용 예시

| Props로 객체 전달 시,

DTO(Data Transfer Object, 함수 간 데이터 전달 시 사용하는 객체) 사용 시

DTO (Data Transfer Object) : @Getter + @Setter 모두 갖기에 데이터 조작 가능

VO (Value Object) : @Getter 만 갖기에 데이터 조작 불가, only read

function tooManyArguments(a, b, c, d, e) { ... }
// 해당 코드를 아래와 같이 변경 가능

function simplifyManyArguments({ a, b, c, d, e }) { ... }

1. Default Props 정의 시, 원하는 값만 Props에 할당 가능
2. Props의 비순서 사용 가능

이외에도

function Component(props) {
	return <button onClick={(e) => props.onChange()}>{props.value}</button>
}
<Component props={ ... } />

// 위의 코드를 비구조화를 통해 아래와 같이 직관적인 이름으로 변경 가능

<Component value={state} onChange={() => setState(state + 1)} />

function Component({ value, onChange }) {
	return <button onClick={(e) => onChange()}>{value}</button>
}

 

---

참고

ASAC