자바스크립트에서 객체나 배열의 값을 추출하고 필요한 값만 가져오는 작업은 자주 수행되는 작업입니다. 이때 Destructuring(비구조화 할당)을 사용하면 간편하게 원하는 값들을 추출할 수 있습니다.

배열에서 값 필터링하기

배열에서 특정 조건을 만족하는 값을 추출하는 경우 Destructuring을 사용할 수 있습니다.

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const [oddNumbers, evenNumbers] = numbers.reduce((acc, curr) => {
  if (curr % 2 === 0) {
    acc[1].push(curr); // 짝수
  } else {
    acc[0].push(curr); // 홀수
  }
  return acc;
}, [[], []]);

console.log(oddNumbers); // [1, 3, 5, 7, 9]
console.log(evenNumbers); // [2, 4, 6, 8, 10]

위의 예제에서는 reduce() 함수를 사용하여 배열을 순회하면서 홀수와 짝수를 구분하여 두 개의 배열에 담고 있습니다. Destructuring을 사용하여 oddNumbers와 evenNumbers라는 변수에 각각 홀수와 짝수를 할당하였습니다.

객체에서 값 필터링하기

객체의 특정 프로퍼티를 추출하거나 조건에 맞는 프로퍼티를 추출하는 작업도 Destructuring을 사용하여 수행할 수 있습니다.

const person = {
  name: 'John Doe',
  age: 30,
  email: 'johndoe@example.com',
  address: {
    city: 'New York',
    country: 'USA'
  }
};

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

const { city } = person.address;
console.log(city); // 'New York'

위의 예제에서는 person 객체의 name과 age 프로퍼티를 Destructuring을 통해 추출하여 변수에 할당하였습니다. 또한, person.address 객체의 city 프로퍼티도 Destructuring을 통해 추출하였습니다.

요약

Destructuring을 활용하면 배열이나 객체에서 필요한 값을 간편하게 추출할 수 있습니다. 코드의 가독성을 높이고 작업을 간소화할 수 있는 이러한 기능은 개발자에게 편의성을 제공합니다. Destructuring을 유용하게 활용하여 자바스크립트 코드를 작성해보세요!

#javascript #destructuring