[자바스크립트] 구조 분해 할당

구조 분해 할당(Destructuring assignment)은 배열이나 객체에서 값을 추출하여 변수에 할당하는 간편한 방법입니다. 기존에는 반복문이나 인덱스를 사용하여 값에 접근했지만, 구조 분해 할당을 사용하면 한 번에 여러 값을 변수에 할당할 수 있어 코드를 더욱 간결하게 만들 수 있습니다.

왜 구조 분해 할당을 사용해야 할까요?

• 코드 가독성 향상: 복잡한 객체 구조에서 필요한 값만 추출하여 사용할 수 있어 코드를 더욱 명확하게 만들 수 있습니다.
• 개발 생산성 향상: 반복적인 코드를 줄이고, 간결한 문법으로 값을 할당할 수 있어 개발 효율을 높입니다.
• 함수 파라미터: 함수의 파라미터로 구조 분해 할당을 사용하여 객체를 해체하고 값을 추출할 수 있습니다.
• 배열, 객체에서 값 추출: 배열이나 객체에서 원하는 값만 선택적으로 추출할 수 있습니다.

구조 분해 할당 사용법

배열 구조 분해 할당

const numbers = [1, 2, 3];
const [first, second] = numbers;

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

객체 구조 분해 할당

const person = { name: '홍길동', age: 30 };
const { name, age } = person;

console.log(name); // 홍길동
console.log(age);   // 30

다양한 구조 분해 할당 예시

• 생략: 필요 없는 값은 생략할 수 있습니다.

  const [first, , third] = [1, 2, 3];
  

• 기본값: 값이 undefined인 경우 기본값을 설정할 수 있습니다.

  const { name = '익명', age } = { age: 30 };
  

• 나머지 요소: 배열의 나머지 요소를 새로운 배열에 할당할 수 있습니다.

  const [first, ...rest] = [1, 2, 3, 4];
  

• 중첩: 객체 안에 객체가 있는 경우 중첩하여 구조 분해 할당을 사용할 수 있습니다.

  const user = { name: '홍길동', address: { city: '서울', street: '강남대로' } };
  const { name, address: { city } } = user;
  

• 함수 파라미터: 함수의 파라미터로 구조 분해 할당을 사용할 수 있습니다.

  function printUser({ name, age }) {
      console.log(`이름: ${name}, 나이: ${age}`);
  }
  

구조 분해 할당 활용 사례

• REST API 응답 처리: API에서 받은 JSON 데이터를 구조 분해 할당하여 간편하게 처리할 수 있습니다.
• 함수 파라미터: 함수의 파라미터로 객체를 받아 구조 분해 할당을 통해 필요한 값만 추출하여 사용할 수 있습니다.
• 옵션 설정: 함수의 옵션을 객체로 받아 구조 분해 할당으로 처리할 수 있습니다.