구조분해 할당

🧐 구조분해할당은 많이 쓰이기도하고, 유용한 문법인데 아직 100% 마스터가 된게 아니라서 정리해보기로 하였다!

💬 구조 분해 할당은 JavaScript ES6 (ECMAScript 2015)에서 도입된 문법으로, 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 할당하는 기능이다. 간단한 코드로 복잡한 객체나 배열에서 원하는 값을 추출할 수 있다.

[ 배열의 구조분해할당 ]

배열에 두 개의 항목이 있다고 가정하면,

const cart = {
    lineItems: [
        {
            id: 'line-item-01',
            product: {
                id: 'product-01',
                name: '맨투맨',
            },
            options: [
                { name: '컬러', item: { name: 'black' } },
            ],
            unitPrice: 10_000,
            quantity: 1,
            totalPrice: 10_000,
        },
        {
            id: 'line-item-02',
            product: {
                id: 'product-02',
                name: '티셔츠',
            },
            options: [
                { name: '컬러', item: { name: 'white' } },
            ],
            unitPrice: 5_000,
            quantity: 2,
            totalPrice: 10_000,
        },
    ],
    totalPrice: 20_000,
};

const [firstItem, secondItem] = cart.lineItems;

이라고 쳤을때, firstItem은 cart.lineItems 배열의 첫 번째 항목을 참조하며, 그 값은 아래와 같다.

{
	id: 'line-item-01',
	product: {
		id: 'product-01',
		name: '맨투맨',
	},
	options: [
		{ name: '컬러', item: { name: 'black' } },
	],
	unitPrice: 10_000,
	quantity: 1,
	totalPrice: 10_000,
}

secondItem은 cart.lineItems 배열의 두 번째 항목을 참조하며, 그 값은 아래와 같다.

{
	id: 'line-item-02',
	product: {
		id: 'product-02',
		name: '티셔츠',
	},
	options: [
		{ name: '컬러', item: { name: 'white' } },
	],
	unitPrice: 5_000,
	quantity: 2,
	totalPrice: 10_000,
}

이렇게 배열 구조 분해를 사용하여 배열의 각 항목을 개별 변수에 할당할 수 있다!

🤔 만약에 배열의 구조가 10개라면…?

예를 들어, 배열의 첫 번째, 두 번째, 그리고 마지막 항목만 필요한 경우 다음과 같이 할 수 있다.

const [firstItem, secondItem, , , , , , , , tenthItem] = cart.lineItems;

하지만 이렇게 코드를 작성하면 가독성이 떨어질 수 있기 때문에 일반적으로 배열의 전체 항목을 순회하거나 필요한 항목을 직접 인덱스로 접근하는 것이 좋다.

또한, 배열의 길이를 알 수 없거나 동적인 경우 (예: API 응답이나 사용자 입력으로부터 가져온 배열) 다음과 같은 방법을 사용할 수 있다.

1. 특정 항목만 가져오기

   const firstItem = cart.lineItems[0];
   const secondItem = cart.lineItems[1];

2. 배열의 마지막 항목 가져오기

   const lastItem = cart.lineItems[cart.lineItems.length - 1];

3. 배열의 전체 순회하기

   cart.lineItems.forEach(item => {
     console.log(item.product.name);
   });

구조 분해 할당은 코드의 가독성을 향상시키고 몇몇 특정 항목에 빠르게 접근할 수 있게 도와주지만, 항상 모든 상황에 적합한 것은 아니다. 상황과 필요에 따라 적절한 방법을 선택하는 것이 중요하다!

{ 객체의 구조분해할당 }

const person = {
		name: 'John',
		age: 30,
		address: {
				city: 'Seoul',
				country: 'South Korea'
		}
};

1. 기본 속성 추출:

   const { name, age } = person;
   console.log(name); // John
   console.log(age);  // 30

2. 새로운 변수 이름으로 속성 추출:

   const { name: firstName, age: userAge } = person;
   console.log(firstName); // John
   console.log(userAge);   // 30

3. 중첩된 객체의 속성 추출:

   const { address: { city, country } } = person;
   console.log(city);    // Seoul
   console.log(country); // South Korea

4. 기본값 설정:

   const { job = 'Engineer' } = person;
   console.log(job); // Engineer

5. 나머지 속성 가져오기(…rest 패턴)

   const { name, ...rest } = person;
   console.log(name); // John
   console.log(rest); // { age: 30, address: { city: 'Seoul', country: 'South Korea' } }

   객체 구조 분해 할당은 코드를 깔끔하게 만들어주고, 특정 속성에 빠르게 접근할 수 있게 도와준다. 특히 다른 객체나 배열과 함께 복잡한 데이터 구조를 다룰 때 유용하다!