[TIL.6]드림코딩:엘리 자바스크립트 프로처럼 쓰는 팁. 스프래드 연산자, 비구조 할당, Set()

하루가멀다하고 리액트 공부하면서 역시 자바스크립트를 더 파봐야겠어🔥🔥🔥 했는데 실제로 머리로는 리액트는 리액트 자바스크립트는 자바스트립트 이렇게 별개로 생각했었던 것 같다.

 

오늘 드림코딩 엘리님 영상을 보는데... 오!? 다 리액트에서 쓰는거네.....?????

근데 이걸 바닐라 자바스크립트 작업할때 써봐야지~라는 생각을 1도 못한듯....

 

 

 

· 구조 분해 할당 Object Destructuring 

 

 

이건 진짜 리액트에서 비구조할당으로 배워서 맨날쓰는데 영어로는 Object Destructuring이라고 하고 MDN설명을 보니 한국어로는 구조 분해 할당이라고 하나보다.

 

구조 분해 할당 - JavaScript | MDN

 

비구조할당은 엘리님이 알려주신 것처럼 객체의 키명을 그대로 받아오는 식으로 많이 사용했었는데 다큐멘트를 읽어보니 받아온 키이름은 다른걸로 설정할 수도 있고 그밖에도 여러 기능들이 있는 것 같다. 이건 사용해보면서 차차 익혀야 할듯.

 

const person = {
  name : 'Julia',
  age : 20,
  phone : '01011112222'
}

//💩 Bad Code
 function displayPerson(person){
  displayAvatar(person.name);
  displayName(person.name);
  displayProfile(person.name, person.age);
}

//✨ Good Code
function displayPerson(person){
  const { name, age } = person;
  displayAvatar(name);
  displayName(name);
  displayProfile(name, age);
}

 

 

 

 

· 스프래드 연산자 Spread Syntax

 

 

배열객체들을 다룰때 유용하게 쓰이는 스프래드 연산자!

기존 값들을 그대로 붙여넣을수도 있고 특정 키값을 변경(update)하고 싶으면 위에 29번 라인처럼 변경해줄 수 있다

 

const item = { type : '👔', size : 'M'};
const detail = {price : 20, made : 'Korea', gender : 'M'};

//💩 Bad Code
item['price'] = detail.price

//✨ Good Code
const shirt = {...item, ...detail, price : 10}
//shirt = {type : '👔', size : 'M', price : 10, made : 'Korea', gender : 'M'}

 

 

 

· 중복방지!! new Set()

 

 

아 이거 스타벅스 메뉴 만들때 잠깐 사용했던 함수인데 원래 이렇게 쓰는거였군요!+_+

 

[React] 스타벅스 메뉴 카테고리별 정렬하기

 

이때 카테고리별로 분류하는데 어떤 카테고리로 분류하는지를 실제 데이터에 있는 분류명을 가지고 와서 배열을 만들었었다. 그때 new Set()을 사용했었는데 겹치는 데이터들을 제외하고 새로운 배열을 만드는 함수라니 이렇게 분류가 필요한 데이터를 정리할때 유용할 것 같다. 

 

const fruitsIhave = ['🍌', '🍌', '🍓', '🍓', '🍋', '🍋', '🍋' ]

const kindOfFruits = new Set(fruitsIhave)
// kindOfFruits = [ '🍌', '🍓', '🍋']

 

 

 

▼원본 영상