toy-project: 숫자 야구 게임 (2)

하나의 역할만 하는 함수

다음의 함수는 사용자의 입력값과 컴퓨터 입력값을 비교하여 힌트를 반환하는함수로 함수 내에서 스트라이크, 볼 값을 카운트하고 카운트된 결과에 따라 힌트를 반환하는 역할을 한다.

변경 전

function getHint(computerInputNumbers: string, userInputNumbers: string) {
  let strike = 0;
  let ball = 0;

  for (let i = 0; i < computerInputNumbers.length; i += 1) {
    const computerInputNumber = computerInputNumbers[i];

    if (computerInputNumber === userInputNumbers[i]) strike += 1;
    else if (userInputNumbers.includes(computerInputNumber)) ball += 1;
  }

  if (strike === 0 && ball === 0) return RESULT.NOTHING;

  if (ball === 0 && strike !== 0) return `${strike}${RESULT.STRIKE}`;
  if (strike === 0 && ball !== 0) return `${ball}${RESULT.BALL}`;

  return `${strike}${RESULT.STRIKE} ${ball}${RESULT.BALL}`;
}

두가지 역할을 함수는 나중에 코드의 재사용에서 불리하여 유지보수가 힘들어진다고 생각한다. 따라서 스트라이크, 볼 값을 카운트하는 역할을 분리시켜 함수가 하나의 역할만 하도록 변경하였다.

변경 후

function getStrikeBallCount(
  computerInputNumbers: string,
  userInputNumbers: string,
) {
  let strike = 0;
  let ball = 0;

  for (let i = 0; i < computerInputNumbers.length; i += 1) {
    const computerInputNumber = computerInputNumbers[i];

    if (computerInputNumber === userInputNumbers[i]) strike += 1;
    else if (userInputNumbers.includes(computerInputNumber)) ball += 1;
  }

  return {
    strike,
    ball,
  };
}

function getHint(computerInputNumbers: string, userInputNumbers: string) {
  const { strike, ball } = getStrikeBallCount(
    computerInputNumbers,
    userInputNumbers,
  );

  if (strike === 0 && ball === 0) return RESULT.NOTHING;

  if (ball === 0 && strike !== 0) return `${strike}${RESULT.STRIKE}`;
  if (strike === 0 && ball !== 0) return `${ball}${RESULT.BALL}`;

  return `${strike}${RESULT.STRIKE} ${ball}${RESULT.BALL}`;
}

변경될 가능성이 있는 상수는 따로

입력값의 범위 또는 길이는 언제든지 변경될 가능성이 있다.
따라서 다음과 같이 상수폴더에 분리해두고 변경한다고 하면 한곳에서만 수정하면 된다.

const INPUT_NUMBER = {
  MIN: 1,
  MAX: 9,
  LENGTH: 3,
};

function isValidScope(values: Array<number>) {
  return values.every(
    (value) => value >= INPUT_NUMBER.MIN && value <= INPUT_NUMBER.MAX,
  );
}

index파일 활용하기

유틸성 폴더에 여러개의 파일이 존재했을 때 여러 유틸함수를 사용하는 모듈에서 import문이 비대해지는 단점이 있었다.

변경 전

import { $, addEventListener} from './utils/dom';
import { getComputerInputNumbers } from './utils/numberMaker';
import { getHint } from './utils/hintMaker';
import isValid from './utils/validate';

이러한 경우에 index 파일을 활용한다면 한줄로 정리할 수 있어 보기에 깔끔하다는 장점이 있다.

변경 후

import {
  $,
  addEventListener,
  getComputerInputNumbers,
  getHint,
  isValid,
} from './utils';