logo
Published on

뉴비와 고수의 코드 작성법 비교

Authors
  • avatar
    Name
    Bora Choi
    Twitter

step 1. 읽기 쉽게 작성하기

뉴비 코드💩

function toAccounting(n) {
  if (n < 0) {
    return '(' + Math.abs(n) + ')'
  } else if (n >= 0) {
    return n
  }
}
  1. 필요 없는 로직은 쓰지 않는다.

    고수 코드✨

    function toAccounting(n) {
      if (n < 0) {
        return '(' + Math.abs(n) + ')'
      } else {
        return n
      }
    }
    
  2. 변수, return값의 타입을 통일 시킨다.

    고수 코드✨

    function toAccounting(n) {
      if (n < 0) {
        return '(' + Math.abs(n) + ')'
      } else {
        return n.toString()
      }
    }
    
  3. null check

    고수 코드✨

    function toAccounting(n) {
      if (n !== null) {
        if (n < 0) {
          return '(' + Math.abs(n) + ')'
        } else {
          return n.toString()
        }
      }
    }
    
  4. 함수와 변수 명은 알기 쉽게

    고수 코드✨

    function numbertoAccountingString(number) {
      if (number !== null) {
        if (number < 0) {
          return `( ${Math.abs(number)} )`
        } else {
          return number.toString()
        }
      }
    }
    
  5. 함수를 빠르게 종료시키자

    고수 코드✨

    function numberToAccountingString(number) {
      if (number === null) return
      if (number < 0) return `( ${Math.abs(number)} )`
      return number.toString()
    }
    

step 2. 엣지케이스에 강해지기

뉴비 코드💩

function calculateTotal(items, options) {
  let t = 0
  items.forEach((i) => {
    t += i.price * i.quan
  })
  t = t - t * (options.dis || 0)
  t = t * 1.1
  t = t + (options.ship || 5)
  return t
}

const testItems = [
  { price: 15, quan: 2 },
  { price: 20, quan: 1 },
  { price: 5, quan: 4 },
]
  1. 값을 직접 대입하기 보다 변수를 활용한다

    고수 코드✨

    const TAX_RATE = 1.1
    const SHIPPING_DEFAULT = 5
    
    function calculateTotal(items, options) {
      let total = 0
      items.forEach((item) => {
        total += item.price * item.quantity
      })
      total = total - total * (options.discount || 0)
      total = total * TAX_RATE
      total = total + (options.shipping || SHIPPING_DEFAULT)
      return total
    }
    
    const testItems = [
      { price: 15, quantity: 2 },
      { price: 20, quantity: 1 },
      { price: 5, quantity: 4 },
    ]
    
  2. 파라미터가 객체일 경우 빈객체의 경우 고려한다

    고수 코드✨

    const TAX_RATE = 1.1
    const SHIPPING_DEFAULT = 5
    
    function calculateTotal(items, options) {
      if (items == null || items.length === 0) return 0
    
      let total = 0
      items.forEach((item) => {
        total += item.price * item.quantity
      })
      total = total - total * (options.discount || 0)
      total = total * TAX_RATE
      total = total + (options.shipping || SHIPPING_DEFAULT)
      return total
    }
    
    const testItems = [
      { price: 15, quantity: 2 },
      { price: 20, quantity: 1 },
      { price: 5, quantity: 4 },
    ]
    
  3. 선택적 파라미터에는 default value 설정

    고수 코드✨

    const TAX_RATE = 1.1
    const SHIPPING_DEFAULT = 5
    
    function calculateTotal(items, options = {}) {
      if (items == null || items.length === 0) return 0
    
      let total = 0
      items.forEach((item) => {
        total += item.price * item.quantity
      })
      total = total - total * (options.discount || 0)
      total = total * TAX_RATE
      total = total + (options.shipping || SHIPPING_DEFAULT)
      return total
    }
    
    const testItems = [
      { price: 15, quantity: 2 },
      { price: 20, quantity: 1 },
      { price: 5, quantity: 4 },
    ]
    
  4. 예외 상황 버그에 주의

    고수 코드✨

    const TAX_RATE = 1.1
    const SHIPPING_DEFAULT = 5
    
    function calculateTotal(items, options = {}) {
      if (items == null || items.length === 0) return 0
    
      let total = 0
      items.forEach((item) => {
        total += item.price * item.quantity
      })
      total = total - total * (options.discount || 0)
      total = total * TAX_RATE
      if (options.shipping !== 0) {
        total = total + (options.shipping || SHIPPING_DEFAULT)
      }
      return total
    }
    
    const testItems = [
      { price: 15, quantity: 2 },
      { price: 20, quantity: 1 },
      { price: 5, quantity: 4 },
    ]
    
  5. 구조 분해하기 destructuring

    고수 코드✨

    const TAX_RATE = 1.1
    const SHIPPING_DEFAULT = 5
    
    function calculateTotal(items, { shipping = SHIPPING_DEFAULT, discout = 0 } = {}) {
      if (items == null || items.length === 0) return 0
    
      let total = 0
      items.forEach((item) => {
        total += item.price * item.quantity
      })
      total = total - total * (options.discount || 0)
      total = total * TAX_RATE
      if (options.shipping !== 0) {
        total = total + (options.shipping || SHIPPING_DEFAULT)
      }
      return total
    }
    
    const testItems = [
      { price: 15, quantity: 2 },
      { price: 20, quantity: 1 },
      { price: 5, quantity: 4 },
    ]
    
  6. 의도치 않은 변수 오류를 피하기위해 가능하면 const 사용하기

    고수 코드✨

    const TAX_RATE = 1.1
    const SHIPPING_DEFAULT = 5
    
    function calculateTotal(items, { shipping = SHIPPING_DEFAULT, discout = 0 } = {}) {
      if (items == null || items.length === 0) return 0
    
      const itemsCost = items.reduce((total, item) => {
        return total + item.price * item.quantity
      }, 0)
      const discountRate = 1 - discount
    
      return itemCost * discoutRate * TAX_RATE + shipping
    }
    
    const testItems = [
      { price: 15, quantity: 2 },
      { price: 20, quantity: 1 },
      { price: 5, quantity: 4 },
    ]
    

본 포스팅은 Web Dev Simplified Junior Vs Senior Code - How To Write Better Code을 참고했습니다.