JavaScript 객체 구조 분해 팁

JavaScript와 관련하여 개체에서 속성을 추출하는 매우 유용한 방법을 얻습니다.

Note: Destructuring also works on arrays, but let's focus on objects for this one

사용자 개체가 있고 개별 변수의 속성을 추출하려고 한다고 가정해 보겠습니다.

const user = {
  name: 'Chris',
  age: 33,
};

ES2015 이전에는 다음과 같이 명시적으로 변수를 할당해야 했습니다.

var name = user.name;

이것은 현대 JavaScript에서 여전히 작동합니다. 그러나 최적화할 수 있습니다.name 속성의 이중 사용 바인딩을 생략하고 이와 같이 속성을 분해할 수 있습니다.

const { name, age } = user;

console.log(name);
// Chris

console.log(age);
// 33

무엇을 기다립니다?
거의 마술이죠? 변수 이름을 이중으로 지정할 필요가 없으며 변수에 직접 할당할 수 있습니다.

나머지 개체를 분해하고 유지합니다.

여러 필드가 있는 객체가 있다고 가정해 보겠습니다. 필드 중 하나를 추출하고 남은 항목을 추적하려고 합니다.

나머지 속성을 모두 할당해야 한다고 생각할 수도 있지만 이것은 스프레드 연산자를 사용하여 기본 제공됩니다.

const user = {
  name: 'Chris',
  age: 33,
  username: 'DailyDevTips',
};

const { name, ...rest } = user;

console.log(name);
// Chris

console.log(rest);
// { age: 33, username: 'DailyDevTips' }

중첩된 개체 속성을 분해합니다.

개체에 여러 레이어가 있는 경우가 많습니다.
구조 분해를 사용하면 중첩된 속성을 대상으로 지정할 수도 있습니다.

const user = {
  name: 'Chris',
  age: 33,
  username: 'DailyDevTips',
  address: {
    country: 'South Africa',
    postalCode: '7700',
  },
};

위의 예를 들어보겠습니다. 어떻게 한 번에 국가를 추출할 수 있습니까?

const {
  address: { country },
} = user;

console.log(country);
// South Africa

그러나 전체 주소 개체와 국가를 추출하려는 경우에는 어떻게 됩니까?

위의 예에서 address를 기록하려고 하면 ReferenceError: address is not defined가 표시됩니다.

그러나 다음과 같이 분해에서 다른 참조를 간단히 전달할 수 있습니다.

const {
  address: { country },
  address,
} = user;

console.log(address);
// { country: 'South Africa', postalCode: '7700' }

console.log(country);
// South Africa

다른 이름으로 분해

다른 이름으로 일부 속성을 분해하고 싶을 수도 있습니다.

위의 예를 들어 shippingAddress 라는 주소 개체를 수신하려고 한다고 가정해 보겠습니다.

세미콜론: 구분선을 사용하여 새 이름을 지정할 수 있습니다.

const { address: shippingAddress } = user;

console.log(shippingAddress);
// { country: 'South Africa', postalCode: '7700' }

이는 직접 사용할 수 있는 변수를 만드는 좋은 방법입니다.

잠재적으로 비어 있는 값을 분해

사용자 개체를 다시 가져오겠습니다. 우리는 이미 연령을 해체했지만 이것이 선택적 매개변수라는 것을 언급하는 것을 잊었습니다.

일부 사용자는 설정하지 않도록 선택했을 수 있습니다. 이 경우 기본값으로 대체할 수 있습니다.

Note: This is a bit weird for the age property, so see this as an example

const user = {
  name: 'Chris',
  age: 33,
};

const { age } = user;

console.log(age);
// 33

잘 작동하지만 age 속성이 없는 사용자를 살펴보겠습니다.

const user = {
  name: 'Yaatree',
};

const { age } = user;

console.log(age);
// undefined

기본 연령을 설정하려는 경우 값으로 구조를 분해할 수 있습니다.

const { age = 25 } = user;

console.log(age);
// 25

루프 내부의 분해

위의 모든 예제는 플랫 개체를 기반으로 작동하지만 대부분의 경우 사용자 배열이 있습니다.

const users = [
  {
    name: 'Chris',
    age: 33,
  },
  {
    name: 'Yaatree',
    age: 2,
  },
];

이러한 항목을 반복하고 루프 내에서 분해할 수 있습니다.

for (let { name, age } of users) {
  console.log(`User: ${name} is ${age} years old 🎉`);
}

// 'User: Chris is 33 years old 🎉'
// 'User: Yaatree is 2 years old 🎉'

동적 이름 파괴

런타임에 분해하려는 변수만 알고 있으면 어떻게 될까요?

사용자가 개체에서 임의의 속성을 추출할 수 있는 버튼을 클릭한다고 가정해 보겠습니다.

처리기는 다음 속성을 갖습니다.

const getProperty = 'name'; // or 'age'

// How do we get this from the user now?

이를 사용하기 위해 대괄호 주석을 사용할 수 있습니다.

const { [getProperty]: returnValue } = user;

console.log(returnValue);
// Chris

함수에서 구조 분해

객체를 반환하는 함수가 있다고 가정해 보겠습니다.

const getProduct = () => {
  return {
    id: 1,
    name: 'Macbook',
  };
};

기본적으로 호출하면 다음과 같이 표시됩니다.

const product = getProduct();

console.log(product);
// { id: 1, name: 'Macbook' }

그러나 이 함수의 ID만 필요합니다. 우리가 할 수 있습니까?

const { id } = getProduct();

console.log(id);
// 1

그래 우리는 할 수있어. 반환 값을 간단히 분해하고 필요한 속성을 할당할 수 있습니다.

읽어주셔서 감사합니다. 연결해 봅시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나