Destructuring을 사용하여 자바스크립트에서 필요한 값만 추출하기

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

객체에서 필요한 값만 추출하기 위해 중괄호({})를 사용합니다.

const person = {
  name: 'John Doe',
  age: 30,
  email: 'johndoe@example.com'
};

const {name, age} = person;

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

위의 예시에서 person 객체에서 nameage만 추출하여 변수에 할당했습니다. 이후에는 nameage라는 변수를 사용해 해당 값을 활용할 수 있습니다.

배열에서 필요한 값 추출하기

배열에서 필요한 값만 추출하기 위해 대괄호([])를 사용합니다.

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 Doe',
  age: 30
};

const {name, age, email = 'N/A'} = person;

console.log(name); // 'John Doe'
console.log(age); // 30
console.log(email); // 'N/A'

위의 예시에서 person 객체에 email 값이 없기 때문에 기본값인 'N/A'가 할당됩니다.

이렇게 Destructuring을 사용하면 객체나 배열에서 필요한 값만을 추출하여 사용할 수 있으므로 코드의 가독성을 높일 수 있습니다.

#JavaScript #Destructuring