Destructuring을 활용하여 자바스크립트에서 특정 값 필터링하기

자바스크립트에서 객체나 배열에서 필요한 값만 추출하기 위해 destructuring(분해 할당)을 사용할 수 있습니다. 이 기능을 활용하여 특정 값만 추출하고 필터링하는 방법에 대해 알아보겠습니다.

객체에서 특정 값 필터링하기

ES6부터 객체에서 destructuring을 사용하여 필요한 속성만 추출할 수 있습니다. 간단한 예시를 통해 살펴보겠습니다.

const person = {
  name: 'John',
  age: 30,
  profession: 'Developer',
  country: 'USA'
};

const { name, age } = person;

console.log(name); // 'John'
console.log(age); // 30

위의 코드에서는 person 객체에서 nameage 속성만 추출하여 새로운 변수에 할당했습니다. 이제 필요한 값들만 사용할 수 있게 되었습니다.

배열에서 특정 값 필터링하기

배열에서 destructuring을 사용하여 필요한 값만 추출하는 방법도 유사합니다. 다음 예시를 통해 이를 확인해봅시다.

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

const [first, , third] = numbers;

console.log(first); // 1
console.log(third); // 3

위의 코드에서는 numbers 배열에서 첫 번째와 세 번째 원소만 추출하여 변수에 할당했습니다. 두 번째 원소는 무시되었습니다.

배열에서 조건에 따른 값 필터링하기

destructuring을 사용하여 배열에서 특정 조건에 맞는 값만 추출하는 방법도 있습니다. 다음 예시를 통해 알아보겠습니다.

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

const [evenNumbers, oddNumbers] = numbers.reduce(([even, odd], number) => {
  if (number % 2 === 0) {
    return [[...even, number], odd];
  } else {
    return [even, [...odd, number]];
  }
}, [[], []]);

console.log(evenNumbers); // [2, 4]
console.log(oddNumbers); // [1, 3, 5]

위의 코드에서는 numbers 배열에서 홀수와 짝수를 구분하여 추출하였습니다. reduce 함수를 사용하여 배열을 순회하면서 필요한 값을 추출하고 새로운 배열에 추가했습니다.

마무리

destructuring을 활용하면 자바스크립트에서 객체나 배열에서 필요한 값만 추출하여 사용할 수 있습니다. 필터링된 값을 가지고 다양한 작업을 수행할 수 있으며, 코드의 가독성과 유지보수성을 향상시키는데 도움이 됩니다. 이러한 기능을 잘 활용하여 더욱 효율적인 코드를 작성해보세요.

#JavaScript #destructuring #자바스크립트 #분해_할당 #값_필터링