👨‍💻 자바스크립트 코딩 컨벤션과 테스트 - OOP Study 1

#. Series

##. Source

1. 매직넘버 상수화

bad..!

const chooseRandomNumber = () => {
  const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9]
  answerNum = ''
  for (let i = 0; i < 3; i++) {
    const randomNumber = Math.floor(Math.random() * (9 - i))
    const chosenNumber = numbers.splice(randomNumber, 1)[0]
    const chosen = String(chosenNumber)
    answerNum += chosen
  }
  return answerNum
}

good!👍

const chooseRandomNumber = () => {
  const BASEBALL_NUMBER_LENGTH = 3
  const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9]
  answerNum = ''
  for (let i = 0; i < BASEBALL_NUMBER_LENGTH; i++) {
    const randomNumber = Math.floor(Math.random() * (9 - i))
    const chosenNumber = numbers.splice(randomNumber, 1)[0]
    const chosen = String(chosenNumber)
    answerNum += chosen
  }
  return answerNum
}

2. 변수 네이밍 규칙

const 1num; // x
const num1 // o

const _name; // o
const $name; // o

let _privateVariableName
let _privateFunctionName

const true; // x
const case; // x
const break; // x
// ...

let myname = 'taeeun' // bad
let myName = 'taeeun' // good

const MAXLENGTH = 10 // bad
const MAX_LENGTH = 10 // good

보통 상수에 스네이크케이스를, 일반적인 변수에는 카멜케이스를 사용하는 것 같다.

3. 변수에 타입이나 자료구조형 명시하지 않기

함수의 경우

// bad
const compareTwoArray = (numbers1, numbers2) => {}
// good!
const compareNumbers = (numbers1, numbers2) => {}

배열의 경우

const numberArr = [1, 2, 3, 4]
const numbers = [1, 2, 3, 4]

4. 중복된 기능 피하기

bad..!

class Car {
  name
  position = 0

  constructor(name) {
    this.name = name
  }
  go() {
    this.position = this.position + 1
  }
}

const carDistances = [] // 각각의 자동차 이동거리
moveCar(car, carNames, carDistances) // 자동차를 이동시키고 carDistances 값 변경

// getWinner 함수에서도 불필요하게 carDistances 배열을 받아야한다.
const getWinner = (carNames, carDistances) => {
  const max = Math.max(...carDistances)
  let winner = ''

  for (let i = 0; i < carNames.length; i++) {
    if (max === carDistances[i]) winner += `${carNames[i]},`}
  return winner
}

good 👍

moveCar(car) // moceCar 함수는 car객체의 position만 올려주는 역할만 수행!

// getWinner 함수는 car객체들이 들어있는 cars 배열만 받고 position 비교만 해주는 역할만 수행!
const getWinner = cars => {
  let max = 0
  cars.map(car => {
    if (car.position > max) max = car.position
  })
  let winner = []

  cars.map(car => {
    if (max === car.position) winner.push(car.name)
  })

  return winner.join()
}

5. 각각의 함수는 자기 기능만 수행하기

OO makes code understandable by encapsulating moving parts. FP makes code understandable by minimizing moving parts. -Michael Feathers

객체지향은 동작하는 부분을 캡슐화해서 이해할 수 있게 하고, 함수형 프로그래밍은 동작하는 부분을 최소화해서 코드 이해를 돕는다. - 마이클 페더스

6. 반복문 끊어주기 (break, return)

bad…!

const checkCarsNameLength = carNames => {
  const MAX_CARNAME_LENGTH = 5
  let errorCheck = true

  for (let i = 0; i < carNames.length; i++) {
    if (carNames[i].length > MAX_CARNAME_LENGTH) errorCheck = false
  }
  // 이름이 5초과인 것이 있으면 false를, 없으면 true를 리턴.
  return errorCheck
}

good!!👍

const checkCarsNameLength = carNames => {
  const MAX_CARNAME_LENGTH = 5
  for (let i = 0; i < carNames.length; i++) {
    if (carNames[i].length > MAX_CARNAME_LENGTH) return false
  }
  return true
}

7. 타입스크립트 사용하기

Car객체 배열을 인자로 받는 함수의 경우

// javascript : 배열인데, 내부 요소들의 타입이 불명확함
makeCars(cars, carNames)
// typescript : 배열 내부 타입 명시로 에러방지 + 헷갈림방지!
makeCars(cars: Car[], carNames: string[])

/**
 * 로또 한장을 의미하는 객체
 */
class Lotto {
  numbers = []

  constructor(numbers) {
    this.numbers = numbers
  }
}

/**
 * 당첨 번호를 담당하는 객체
 */
class WinningLotto {
  lotto = null
  bonusNo = 0

  constructor(lotto, bonusNo) {
    this.lotto = lotto
    this.bonusNo = bonusNo
  }

  match(userLotto) {
    let count = 0
    let bonusCount = 0
    this.lotto.numbers.map(number => {
      userLotto.numbers.indexOf(number) >= 0 && count++
    })
    userLotto.numbers.indexOf(this.bonusNo) >= 0 && bonusCount++
    if (count === 6) return 'FIRST'
    if (count === 5 && bonusCount) return 'SECOND'
    if (count + bonusCount === 5) return 'THIRD'
    if (count + bonusCount === 4) return 'FOURTH'
    if (count + bonusCount === 3) return 'FIFTH'
    return 'MISS'
  }
}

// javascript : 함수의 인자로 들어가는 변수명들이 매우 헷갈림!!
matchLottos(myLottos, winningLotto)
// typescript : 내부 타입 명시로 에러방지 + 헷갈림방지!
matchLottos(myLottos: Lotto[], winningLotto: WinningLotto): void

8. 테스트코드 작성하기

  "scripts": {
    "test": "jest"
  }

// calculatorTest.js
class Calculator {
  add(i, j) {
    return i + j
  }
  subtract(i, j) {
    return i - j
  }
  multiple(i, j) {
    return i * j
  }
  divide(i, j) {
    return i / j
  }
}

test('덧셈', () => {
  let calculator = new Calculator()
  expect(calculator.add(1, 2)).toBe(3)
})

test('뺄셈', () => {
  let calculator = new Calculator()
  expect(calculator.subtract(1, 2)).toBe(-1)
})

test('곱셈', () => {
  let calculator = new Calculator()
  expect(calculator.multiple(1, 2)).toBe(2)
})

test('나눗셈', () => {
  let calculator = new Calculator()
  expect(calculator.divide(2, 1)).toBe(2)
})

9. 테스트코드 작성규칙 & 팁

10. 참고

11. 마치며.