구조분해 사용 팁 4가지

자바스크립트의 구조분해 할당(Destructuring)을 더 효율적으로 사용하는 4가지 실전 팁을 소개합니다.

1. 기본값 할당하기

구조분해를 사용할 때, 배열이나 객체에서 값이 없을 경우 undefined가 할당됩니다.

이를 방지하기 위해 기본값을 설정할 수 있습니다.

예를 들어, 배열이나 객체에서 값이 없는 경우 기본값을 할당할 수 있습니다.

이 방법은 백엔드에서 불완전한 데이터를 받을 때 특히 유용합니다​.

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

const {d, e, f = 6} = {d: 4, e: 5};
console.log(f); // 6 (기본값)

2. 나머지 연산자 사용

배열이나 객체에서 필요한 부분만 추출하고, 나머지 값을 하나의 변수에 담을 수 있습니다.

나머지 연산자(...)를 활용하면 유용한 값을 추출하면서도 남은 데이터를 한 곳에 모을 수 있습니다.

이 방법은 함수의 여러 반환값을 처리할 때 유용합니다.

const [first, ...rest] = [10, 20, 30, 40];
console.log(rest); // [20, 30, 40]

const {one, ...others} = {one: 1, two: 2, three: 3, four: 4};
console.log(others); // {two: 2, three: 3, four: 4}

3. 중첩 구조분해

복잡한 객체에서 중첩된 값을 추출할 때도 구조분해를 사용할 수 있습니다.

특히, 대규모 JSON 데이터를 처리할 때 매우 효율적입니다.

예를 들어, 객체 안에 있는 객체에서 특정 속성만 추출하는 방법입니다.

이런 중첩 구조분해는 데이터가 복잡한 경우 가독성을 크게 높입니다​.

const user = { name: 'Alice', address: { city: 'Wonderland', zip: '12345' } };
const { address: { city } } = user;
console.log(city); // Wonderland

4. 여러 변수 값 동시 할당

자바스크립트에서 여러 변수를 동시에 선언하고 값을 할당할 때, 일반적인 방법으로는 각각의 변수에 따로 값을 할당합니다.

하지만 구조분해 할당을 사용하면 코드를 더 간결하게 작성할 수 있습니다.

배열을 이용해 한 줄로 여러 변수에 값을 할당하는 방법입니다.

이 방법은 변수와 값이 여러 개일 때 매우 유용하며, 코드의 가독성을 크게 향상시킵니다​.

또한, 이 방식은 값을 할당하면서 일부 요소만 선택하거나 기본값을 설정하는 경우에도 사용할 수 있습니다.

const test1 = 1;
const test2 = 2;
const test3 = 3;
console.log(test1, test2, test3); // 1, 2, 3

const [test4, test5, test6] = [1, 2, 3];
console.log(test4, test5, test6); // 1, 2, 3

const [a, ,c] = [1, 2, 3]; // 2를 건너뛰고 a와 c에만 할당
console.log(a, c); // 1, 3