[JavaScript] Destructured Assignment

하우즛 고잉 가이즈? 동기 여러분! 오늘은 Destructured Assignment에 대해 알아보도록 하겠습니다. Assignment라는 단어 제가 참 싫어하는 단어인데, 캐나다서 학교 다닐 때 진짜 과제 때문에 열 받은 적이 한두 번 아니... 에헴 암튼 갑시다!

 

---

 

Destructured Assignment

Destrcture 파괴하다, 해체하다 라는 뜻이 있습니다. 진짜 파괴한 과제면 좋겠네요! ㅋㅋㅋ 여기선 그런 건 아니고 우리가 객체(Object)에서 프로퍼티(Property)를 추출할 때, 프로퍼티를 변수(Variable)에 저장을 합니다. 아래를 보시죠.

 

// JavaScript

const jinRamenHot = {
  price : '550원',
  weight : '120g',
  kcal : '500kcal'
};

const price = jinRamenHot.price;
console.log(price);

// 출력 : 550원

price라는 변수 안에 jinRamenHot.price를 넣어 주어서 Value를 출력한 모습입니다. 

 

이것도 짧고 빠르고 편리하게 만든 기능이 있는데 걔 이름이 Destructured Assignment입니다. 객체 말고도 다양한 부분에서 사용을 하니까 혹시 더 궁금하신 분은 아래의 링크로 들어가서 확인해 보시면 좋겠습니다.

 

Destructuring assignment // 링크 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

Destructuring assignment - JavaScript | MDN

 

객체에서 Desturctured Assignment는 아래와 같이 사용합니다.

// JavaScript

const jinRamenHot = {
  price : '550원',
  weight : '120g',
  kcal : '500kcal'
};

const { price } = jinRamenHot;       // <- 여기가 바뀜 ㅋ
console.log(price);

// 출력 : 550원

 

어머, 변수 선언에 객체의 상징인 중괄호(cruly brace)를 넣고 오른쪽 항에는. price가 사라졌네요! 아주 깔끔합니다.

 

---

 

예제

 

스타크래프트의 메딕의 정보로 객체를 만들어 보았다.

 

const starcraftMedic  = {
  hp : 60,
  defense : '1(+1)',
  energy : '50/200 카두세우스 반응로 업글시 → 62.5/250',
  skills : {
    heal : '1 (초당 5.86)',
    restoration : '50',
    opticalFlare : '75',
  },
  quote : {
    productionQuote() {
      console.log('준비 됐습니다.');
    },
    selectedOne() {
      console.log('치료가 필요하십니까?');
    },
    orderOne() {
      console.log('즉시 가겠습니다.');
    },
    specialQuoteOne() {
      console.log('스폰지 목욕 준비되셨나요?')
    }
  },
  '계급' : '중위'
}

 

 

첫 번째로 메딕의 HP를 Destructured assignment로 뽑아 보겠습니다.

const { hp } = starcraftMedic;
console.log(hp);

// 출력 : 60

 

두 번째로 메딕의 skills에 opticalFlare.

const { opticalFlare } = starcraftMedic.skills;
console.log(opticalFlare);

// 출력 : 75

 

세 번째로 메딕의 quote에 specialQuoteOne.

const { specialQuoteOne } = starcraftMedic.quote;
specialQuoteOne();

// 출력 : 스폰지 목욕 준비되셨나요?

메서드는 자체에 출력문이 있기 때문에 그냥 호출만 해주면 출력이 됩니다.

 

네 번째로 메딕의 계급 이게 진짜 중요 별표 백만개

계급은 ' ' 마크로 둘러싸여 있는 문자열입니다. 위의 방법들과 똑같은 방식으로 하면 오류가 생기기 때문에 자바스크립트에선 아주 귀엽고 깜찍한 방법을 제시하고 있습니다. 

const { '계급' : classMedic } = starcraftMedic;
console.log(classMedic);

// 출력 : 중위

'계급'은 식별자로 쓰기에 부적합하기 때문에 '계급'을 다른 적합한 이름을 넣고 위와 같이 선언해준다면 출력이 깔끔하게 나오는 것을 확인할 수 있습니다.

 

이 방법을 위에 링크한 사이트에서 찾았습니다. 아주 유용한 사이트이니 꼭 참조해주세요!!!

 

---

 

오늘의 느낌 

요즘 허리가 아파서 데드리프트를 안 하고 있는데 안 하면 실력이 줄으려나...