개체를 변수로 분할하는 더 좋은 방법

디스트럭처링이란?

간단히 말해 Destructuring은 JavaScript 개체 값을 개별 변수에 저장하는 새롭고 더 나은 방법입니다.

어떻게 작동하는지 봅시다!

person 라는 객체가 있다고 가정합니다. 그리고 person 개체의 개별 값을 별도의 변수에 저장하려고 합니다.

const person = {
    firstName : "John",
    lastName  : "Doe",
    age       : 50,
    eyeColor  : "blue"
};

일반적으로 다음과 같은 작업을 수행합니다.

const firstName = person.firstName;
const lastName = person.lastName;
const age = person.age;
const eyeColor = person.eyeColor;

객체name에서 각각의 변수person를 생성하고 동일한 객체value의 객체name에 할당합니다.

이 방법은 효과가 있습니다!

하지만 운 좋게도 4줄의 코드를 작성하는 대신 단 한 줄의 코드로 작업을 완료할 수 있는 훨씬 더 쉬운 방법이 있습니다.

짐작하셨겠지만 Destructuring이라고 합니다. 작동 방식은 다음과 같습니다.

const { firstName, lastName, age, eyeColor } = person;

{} 안에 개체 이름을 넣고 개체 person에 할당하기만 하면 됩니다.

쉬웠어요!

변수를 개체에 병합

개체 속성

위에서 객체를 개별 변수로 분할하는 방법을 살펴보았습니다. 이제 그 반대로 하고 싶다면 어떻게 해야 할까요? 여러 변수를 객체로 병합하는 것은 어떻습니까? 그것에 대해 이야기합시다!

어떻게 작동하는지 봅시다!

변수 a , b & c 를 okObj 라는 객체로 병합한다고 가정합니다.

const a = 'test';
const b = true;
const c = 789;

전통적으로 사람들이 하는 방식은 다음과 같습니다.

const okObj = {
  a: a,
  b: b,
  c: c
};

다시 말하지만, 이 방법이 통합니다!

그러나 같은 것을 달성하는 쉽고 한 줄짜리 방법이 있습니다! 여기있어:

const okObj = {a, b, c};

멋지다! 키 이름을 변수 이름으로, 키 값을 개체 변수로 사용하여 개체를 만듭니다.

최종 테이크아웃!

개체를 분할하거나 변수를 개체로 병합해야 하는 경우 Destructuring 및 개체 속성을 사용하십시오.

그러나 편한 다른 방법을 고수하십시오.

최신 자바스크립트를 작성하는 새로운 모범 사례입니다. 무엇보다도 귀중한 시간을 절약해 줄 것입니다.

지원하다

읽어주셔서 정말 감사합니다! 이 블로그 게시물이 도움이 되었기를 바랍니다.

제 작업이 마음에 드시면 더 많은 프로젝트와 기사를 가져올 수 있도록 Buying me a Coffee을 고려하십시오.



또한 질문이나 의심이 있으시면 언제든지 , & GitHub로 저에게 연락하십시오. 또는 댓글/토론을 게시할 수도 있습니다. 최선을 다해 도와드리겠습니다 :D