자바스크립트는 ES6부터 도입된 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 배열에서 first, second, fourth 변수에 값을 추출하였습니다. 콤마(,)를 사용하여 값을 건너뛸 수도 있습니다.

객체에서 필요한 값 추출하기

객체에서 필요한 값을 추출하기 위해서는 객체의 속성명과 동일한 변수명을 사용하여 destructuring 할 수 있습니다.

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

const { name, age } = person;

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

위 예시에서 person 객체에서 name, age 변수에 값을 추출하였습니다.

중첩된 객체나 배열에서 값 추출하기

중첩된 객체나 배열에서도 destructuring을 이용하여 값 추출이 가능합니다.

const person = {
  name: 'John',
  age: 30,
  address: {
    city: 'New York',
    country: 'USA',
  },
};

const { name, age, address: { city } } = person;

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

위 예시에서 person 객체 내부에 중첩된 address 객체에서 city 값을 추출하였습니다.

마무리

destructuring은 자바스크립트에서 매우 유용한 기능으로, 필요한 값만을 추출하여 코드를 간결하고 가독성있게 작성할 수 있습니다. 배열이나 객체에서 필요한 값 추출을 위해 destructuring을 적극적으로 활용해보세요.

#javascript #destructuring