자바스크립트에서 객체나 배열을 분해하여 속성을 추출할 수 있는 Destructuring은 많은 개발자들에게 편리한 기능입니다. 이번 글에서는 Destructuring을 활용하여 조건부 속성을 추출하는 방법에 대해 알아보겠습니다.

객체 Destructuring

객체 Destructuring을 사용하여 조건부 속성을 추출하기 위해서는 기본값 설정을 함께 사용해야 합니다. 객체에 추출하려는 속성이 있는지 확인하고, 있다면 그 값을 추출하는 것입니다.

const user = {
  name: 'John',
  age: 25,
  address: {
    street: '123 Main St',
    city: 'New York',
  },
};

const { name, age, address: { city = 'Unknown' } } = user;

console.log(name); // 'John'
console.log(age); // 25
console.log(city); // 'New York'

위의 예제에서는 user 객체에 name, age, address 속성이 있습니다. address의 경우에는 city 속성이 있지만 없는 경우에는 기본값인 'Unknown'으로 설정됩니다.

배열 Destructuring

배열 Destructuring을 사용하여 조건부 속성을 추출하는 경우에는 인덱스를 이용하여 추출합니다. 배열에서 추출하려는 요소의 인덱스가 유효한지 확인하고, 유효한 경우에만 값을 추출합니다.

const numbers = [1, 2, 3, 4, 5];

const [first, second, , fourth] = numbers;

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

위의 예제에서는 numbers 배열에서 첫 번째, 두 번째, 네 번째 요소를 추출했습니다. 세 번째 요소는 무시됩니다.

요약

Destructuring은 자바스크립트에서 객체나 배열에서 속성을 추출하는 간편하고 유용한 기능입니다. 조건부 속성을 추출해야할 때에는 기본값 설정을 활용하여 추출 과정에서 에러를 방지할 수 있습니다. 객체 Destructuring은 속성의 이름을 활용하고, 배열 Destructuring은 인덱스를 활용하여 속성을 추출합니다.

기존의 속성 추출 방식에 비해 Destructuring은 가독성이 좋고, 코드를 간단하게 작성할 수 있습니다. 따라서 Destructuring을 적극적으로 활용하여 코드를 깔끔하고 효율적으로 작성할 수 있습니다.

#JavaScript #Destructuring