[javascript] 구조분해 할당 활용

구조 분해 할당

• 구조 분해 할당은 배열이나 객체의 속성을 해체하여 개별 변수에 값을 담을 수 있게 하는 JavaScript의 표현식.
• 자바스크립트의 꽃이라고 할 수 있으며 실제로 프로젝트에서도 매우 많이 사용한다
• 객체를 많이 다루지만 리스트에서도 활용 할 수 있다

특징

• 간결성: 배열과 객체의 값을 쉽게 추출 가능
• 유연성: 기본값 설정, 나머지 요소 추출 등 다양한 방식 지원
• 함수 반환값 처리: 함수에서 반환된 배열/객체 쉽게 분해 가능

예시

• 배열에 대한 구조 분해 할당

// 기본 배열 구조 분해
const [a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2

// 나머지 요소 추출
const [first, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // 1
console.log(rest);  // [2, 3, 4, 5]

• 객체에 대한 구조 분해 할당

// 기본 객체 구조 분해
const { name, age } = { name: "John", age: 30 };
console.log(name); // "John"
console.log(age);  // 30

• 기본값 설정

const [a = 5, b = 7] = [1];
console.log(a); // 1
console.log(b); // 7

• 함수 반환값 구조 분해

function getData() {
  return [1, 2];
}

const [x, y] = getData();
console.log(x); // 1
console.log(y); // 2