더 나은 코드를 위한 5가지 Javscript 코딩 방법

이 글은 올룰로 Confluence에 작성했던 글을 보관용으로 재포스팅 하는 것이다.

Else를 제거하라

Before

if (condition1) {
  // A lot of code inside here
} else if (condition2) {
  // othere code
}

After

if (condition1) {
  // do stuff
  return
}
if (condition2) {
  // othere code
  return
}

내장된 함수를 사용하라

Before

let arr = [2,5,3,7,9,1,4]
// sorting
function sort(arr){
  for (let i = 0; i < arr.length; i++) {
    for (let j = 0; j < arr.length; j++) {
      if (arr[j] > arr[j + 1]) {
        let temp = arr[j]
        arr[j] = arr[j + 1]
        arr[j + 1] = temp
      }
    }
  }

  return arr
}
console.log(sort(arr)) // [ 1, 2, 3, 4, 5, 7, 9 ]

After

function sort(arr){
  return arr.sort((a, b) =>  a - b)
}

코드를 함수화 하라

Before

const input = '-banana,lemon,orange,pineapple,apple-'
const FRUIT_MAP = {
  banana: 'non-citric',
  lemon: 'citric',
  orange: 'citric',
  pineapple: 'citric',
  apple: 'non-citric'
}
// Logic
let modifiedInput = input.replaceAll('-', '')
let fruits = modifiedInput.split(',')

const output = fruits.map(fruit => `${fruit} is ${FRUIT_MAP[fruit]}.`)
// ["banana is non-citric.", "lemon is citric.", "orange is citric.", "pineapple is citric.", "apple is non-citric."]

After

const input = '-banana,lemon,orange,pineapple,apple-'
const FRUIT_MAP = {
  banana: 'non-citric',
  lemon: 'citric',
  orange: 'citric',
  pineapple: 'citric',
  apple: 'non-citric'
}

const parseFruitInput = ({separator = ',', begginingString = '-', endString = '-'}) => {
  let output = string.replace(begginingString, '')
  output = output.replace(endString, '')
  return output.split(separator)
}
const determineIfFruitIsCitric = (fruitTypes, fruit) => fruitTypes[fruit] || 'NOt defined'
const handleCitricFruit = (citricFruit) => {
  if(citricFruit === 'kinda-citric if you ask me') return 'Well, do sometthing else' 
  returrn citricFruit
}
const parsedFruits = parseFruitInput({string: input, endString: '$', begginingString: '$'})
const citricOuput = parseFruits.map(fruit => determineIfFruitIsCitric(FRUIT_MAP, fruit))
const output = citricOuput.map(citricFruit => handleCitricFruit(citricFruit))
console.log(output) // ["none-citric", "citric", "citric", "citric", "Well do something else"]

Switch를 Dictionary(Map)로 바꿔라

Before

var option = 'all'
switch (option){
  case 'all':
    option = 'All items'
    break
  case 'category1':
    option = 'Category1 items'
    break
  case 'category2':
    option = 'Category2 items'
    break
  case 'category3':
      option = 'Category3 items'
      break
  case 'category4':
      option = 'Category4 items'
      break
  default:
    option = 'All items'
    break
}

After

const option = 'all'
const filterDictionary = {
  all: 'All items'
  category1: 'Category1 items',
  category2: 'Category2 items',
  category3: 'Category3 items',
  category4: 'Category4 items',
}
console.log(filterDictionary[option]) // === All items

간단한 객체 재할당을 사용해라

Before

const state = {
  a: 3,
  b: 7
}

function changeState(state){
  const newObj =  {}
  for(let key in state){
    newObj[key] = state[key]
  }
  // Applying a change
  newObj['a'] += 5
  return newObj
}
console.log(state)
console.log(changeState(state)) // === {a: 8, b: 7}

After

const state = {
  a: 3,
  b: 7
}

function changeState(state){
  return {...state, a: state.a + 5}
}

console.log(changeState(state)) // === {a: 8, b: 7}

원문

https://medium.com/arionkoder-engineering/5-javascript-clean-coding-patterns-to-enhance-your-code-cc205d8d1ab6