Destructuring (구조 분해 할당)

🧩 Note

구조 분해 할당은 객체나 배열의 속성을 분해해 변수에 바로 할당하는 문법이다.
Airbnb는 명시적이고 일관된 데이터 접근 방식을 통해 협업 시 코드의 의도와 구조를 빠르게 파악할 수 있도록 권장한다!

1. 객체 구조 분해 할당 사용

하나의 객체에서 여러 속성에 접근할 때는 구조 분해 할당 사용

eslint: prefer-destructuring

// bad
function getFullName(user) {
  const firstName = user.firstName;
  const lastName = user.lastName;

  return `${firstName} ${lastName}`;
}

// good
function getFullName(user) {
  const { firstName, lastName } = user;
  return `${firstName} ${lastName}`;
}

// best
// 함수 매개변수 단계에서 바로 구조 분해
function getFullName({ firstName, lastName }) {
  return `${firstName} ${lastName}`;
}

💡 구조 분해 할당의 장점

• 임시 변수 불필요 → 속성 접근용 변수 선언이 사라진다.
• 중복 접근 감소 → 같은 객체를 반복 참조하는 코드가 줄어든다.
  (user.firstName, user.lastName 같은 반복 줄임)
• 가독성 향상 → 코드의 의도가 명확하고 간결하다.
• 단일 정의 지점 → 블록 상단만 봐도 어떤 속성을 사용하는지 바로 알 수 있다.

즉, 구조 분해 할당은 코드의 중복을 줄이고, 가독성과 명확성을 높이는 선언적 방식이다.

2. 배열 구조 분해 할당 사용

eslint: prefer-destructuring

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

// bad
const first = arr[0];
const second = arr[1];

// good
const [first, second] = arr;

• 인덱스로 직접 접근하면 의미가 불명확해지고 유지보수가 어렵다.
• 구조 분해를 사용하면 의미 단위의 변수명으로 명확히 표현할 수 있다.

3. 여러 값을 반환할 때는 배열 대신 객체 구조 분해 사용

여러 데이터를 반환하는 함수에서는 배열보다 객체를 반환하는 편이 안전하다.
이렇게 하면 순서에 의존하지 않고, 나중에 속성을 추가하거나 순서를 바꿔도 호출부에 영향을 주지 않는다.

이렇게 하면 이후 호출처에 영향을 주지 않고 새로운 속성을 추가하거나 순서를 변경할 수 있다.

// bad
// 배열을 반환하는 경우
function processInput(input) {
  return [left, right, top, bottom];
}

// 반환되는 데이터의 순서를 기억해야 함
const [left, __, top] = processInput(input);

// good
// 객체를 반환하는 경우
function processInput(input) {
  return { left, right, top, bottom };
}

// 호출처 → 필요한 데이터만 선택
const { left, top } = processInput(input);

---

규칙	권장 방식	이유
객체 속성 접근	{ key } = object	중복 접근 제거, 명확한 의도
배열 요소 접근	[a, b] = array	의미 없는 인덱스 접근 방지
함수 다중 반환	return { key1, key2 }	순서 의존 제거, 확장성 ↑