[JS] 구조 분해 할당(Destructuring Assignment)

안녕하세요. 오늘은 자바스크립트 문법인 구조 분해 할당에 대해서 포스팅하겠습니다.

 

 

 

구조 분해 할당(Destructuring Assignment)

• 배열이나 객체의 값을 간편하게 추출하여 변수에 할당할 수 있는 문법
• 복잡한 데이터 구조에서 값을 꺼내는 작업을 간단하게 할 수 있음

 

배열에서 구조 분해 할당

• 배열에서 구조 분해할 때 순서대로 값을 변수에 할당함

const fruits = ['apple', 'banana', 'orange'];
const [first, second, third] = fruits;

console.log(first); // apple
console.log(second); // banana
console.log(third); // orange

 

 

객체에서 구조 분해 할당

• 객체에서는 속성의 이름이 변수로 사용되며 해당 속성 값을 추출함

const cat = { name: '뭉이', age: 9 };
const { name, age } = cat;

console.log(name); // 뭉이
console.log(age); // 9

 

 

기본값 설정

• 구조 분해 할당 시 값을 찾을 수 없을 때 기본값을 설정할 수 있음

// 배열
const [a = 1, b = 2] = [undefined, 3];
console.log(a); // 1 (기본값)
console.log(b); // 3


// 객체
const { x = 10, y = 5 } = { y: 7 };
console.log(x); // 10 (기본값)
console.log(y); // 7

 

 

중첩 구조 분해

• 배열이나 객체가 중첩된 구조일 때도 사용할 수 있음

const cat = {
    name: '뭉이',
    address: {
        city: 'Seoul',
        zipCode: '12345'
    }
};

const { name, address: { city, zipCode } } = cat;
console.log(name); // 뭉이
console.log(city); // Seoul
console.log(zipCode); // 12345

위 코드처럼 객체 안의 객체나 배열 안의 배열도 구조 분해할 수 있음

 

 

함수의 매개변수에서 구조 분해

• 함수의 매개변수에서도 사용할 수 있음

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

const cat = { name: '뭉이', age: 9 };
catInfo(cat); // 이름: 뭉이, 나이: 9

 

 

나머지 요소 할당

• 배열이나 객체의 일부 요소만 할당하고 나머지는 나머지 변수(rest variable)에 할당할 수 있음

// 배열
const [first, ...others] = [1, 2, 3, 4, 5];
console.log(first); // 1
console.log(others); // [2, 3, 4, 5]


// 객체
const cat = { name: '조이', age: 9, city: 'Seoul' };
const { name, ...rest } = cat;
console.log(name); // 조이
console.log(rest); // { age: 9, city: 'Seoul' }