[문서] 구조 분해 할당으로 코드 가독성을 높이는 5가지 방법

구조 분해 할당이란?

구조 분해 할당은 배열이나 객체의 속성을 변수로 쉽게 추출할 수 있는 JavaScript의 표현식입니다.

 

// 배열 분해 할당
const numbers = [1, 2, 3];
const [one, two, three] = numbers;

// 객체 분해 할당
const person = { name: 'John', age: 30 };
const { name, age } = person;

 

1. 함수 매개변수에서의 구조 분해 할당

함수 매개변수로 전달되는 객체의 속성을 직접 분해 할당하면, 가독성과 코드의 간결성을 동시에 높일 수 있습니다.

 

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

const user = { name: 'Alice', age: 25 };
greet(user);

 

2. 중첩 구조 분해 할당

객체 안에 객체가 있는 경우, 중첩 구조 분해 할당을 사용하여 깊숙한 속성도 손쉽게 추출할 수 있습니다.

const person = {
  name: 'Bob',
  address: {
    city: 'New York',
    zipCode: '10001'
  }
};

const {
  name,
  address: { city, zipCode }
} = person;
console.log(name); // Bob
console.log(city); // New York
console.log(zipCode); // 10001

 

3. 기본값 설정

구조 분해 할당 시 기본값을 설정하여, 값이 없을 때의 기본 동작을 정의할 수 있습니다.

const { name = 'Guest', age = 18 } = { name: 'Charlie' };

console.log(name); // Charlie
console.log(age);  // 18

 

4. 배열의 나머지 요소 처리

나머지 요소 연산자(Rest Operator)를 사용하여 배열의 나머지 요소들을 쉽게 추출할 수 있습니다.

const colors = ['red', 'green', 'blue', 'yellow', 'purple'];
const [first, second, ...rest] = colors;

console.log(first);  // red
console.log(second); // green
console.log(rest);   // ['blue', 'yellow', 'purple']

 

5. 변수 이름 변경

구조 분해 할당 시 변수의 이름을 변경할 수 있어, 원하는 이름으로 변수를 사용할 수 있습니다.

const user = { n: 'David', a: 40 };
const { n: userName, a: userAge } = user;

console.log(userName); // David
console.log(userAge);  // 40

 

구조 분해 할당은 코드의 가독성을 높이고, 간결하게 작성할 수 있는 강력한 기능입니다.