자바스크립트 더 좋은 코드 작성법

if/else 코드 줄이기

const getPriceByName = (name) => {
 const foodMap = {
 'ham':30,
   'iceCream':20,
   'potato':10,
   //새로운 음식 추가 가능 ...
 }
 return foodMap[name]
}

2~3가지 이상의 if...else 조건문을 사용하지 않고 MAP을 이용할 수 있다.

for문 대신 filter,map 사용

const foods = [
  {
   name:'ham',
   group: 1,
  },
  {
  name: 'sandwich',
    group: 1,
  },
  {
  name:'candy',
    group:1,
  }]

const names = foods.filter((food)=> food.group === 1)
              .map((food)=> food.name)
console.log(names) //['ham','sandwich','candy']

filter와 map을 사용하는 방식은 코드를 심플하게 만들어주고 구조적으로도 명확하게 만들어준다.

구조 분해 할당으로 values 변경

내가 햄버거를 고르고 친구가 초코렛을 골랐다고 가정한다. 우리는 서로의 음식을 교환하기를 원한다.

• 일반적으로 사용하는 코드

let myFood = 'hamburger'
let yourFood = 'chocolate'
let tempFood = myFood
myFood = yourFood
yourFood = tempFood
console.log(myFood,yourFood) //'chocolate','hamburger'

• 더 좋은 방법 (구조 분해 할당)

let myFood = 'hamburger'
let yourFood = 'chocolate'
[myFood,yourFood] = [yourFood, myFood]
console.log(myFood,yourFood) //'chocolate','hamburger'

reduce를 이용해 총합 계산

const foods = [
  {
   name:'ham',
   price: 30,
   amount:10,
  },
  {
  name: 'sandwich',
  price:20,
  amount:15,
  },
  {
  name:'candy',
  price:5,
  amount:9
  }]

손님이 사려는 물건은 총 얼마일까?

• 일반적으로 사용하는 코드

let sum = 0
foods.forEach((food)=>{
 sum += food.price * food.amount
})

• 더 나은 방법(reduce)

let sum = foods.reduce((acc,food)=> acc += food.price * food.amount,0)

console.log 대신 console.table 사용

• console.log 사용
  
• console.table 사용
  

더욱 직관적으로 알아볼 수 있다.

참고

8가지 자바스크립트 트릭