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
객체에서 name
과 age
만 추출하여 변수에 할당했습니다. 이후에는 name
과 age
라는 변수를 사용해 해당 값을 활용할 수 있습니다.
배열에서 필요한 값 추출하기
배열에서 필요한 값만 추출하기 위해 대괄호([])를 사용합니다.
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