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

객체에서 필요한 값만 추출할 때는 중괄호({})를 사용합니다. 객체의 특정 속성을 변수에 할당하려면 해당 속성 이름을 중괄호 안에 작성하면 됩니다.

const person = {
  name: 'John',
  age: 25,
  profession: 'Developer',
};

const { name, age } = person;

console.log(name); // 출력: 'John'
console.log(age); // 출력: 25

위의 예시에서는 person 객체에서 name과 age 속성을 추출하여 변수로 할당하고 있습니다. Destructuring을 통해 해당 값을 바로 사용할 수 있습니다.

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

배열에서 필요한 값만 추출할 때는 대괄호([])를 사용합니다. 값을 순서대로 변수에 할당하려면 배열에서 추출할 인덱스 위치에 변수 이름을 작성하면 됩니다.

const fruits = ['apple', 'banana', 'orange'];

const [firstFruit, secondFruit] = fruits;

console.log(firstFruit); // 출력: 'apple'
console.log(secondFruit); // 출력: 'banana'

위의 예시에서는 fruits 배열에서 첫 번째와 두 번째 요소를 추출하여 변수로 할당하고 있습니다. Destructuring을 통해 해당 값을 바로 사용할 수 있습니다.

기본 값 설정하기

Destructuring을 사용할 때, 추출한 값이 undefined인 경우 기본 값을 설정할 수도 있습니다.

const person = {
  name: 'John',
  age: 25,
};

const { name, profession = 'Student' } = person;

console.log(name); // 출력: 'John'
console.log(profession); // 출력: 'Student'

위의 예시에서는 person 객체에서 name 속성은 정의되어 있지만 profession 속성은 정의되어 있지 않습니다. Destructuring을 통해 profession 변수를 추출하고, 기본값을 ‘Student’로 설정했습니다.

Destructuring은 코드를 더 짧고 간결하게 작성할 수 있으며, 필요한 값만 추출하여 사용할 수 있도록 도와줍니다. 자바스크립트에서 Destructuring을 잘 활용하면 코드 유지 보수성과 가독성을 향상시킬 수 있습니다.

#Javascript #Destructuring