[TSL] 매직 넘버

우테코 1주차 회고를 하기 위해서 다른 분들의 PR을 확인하다보니 매직 넘버라는 용어를 발견했다.
들어는 봤지만 정확한 의미를 모르고 있어서 이를 공부해보기 위해서 여러 자료들을 기반으로 작성해보았다!

매직 넘버란?

• 의미 있는 이름의 상수로 대체될 수 있는 숫자
• 상수로 대체해서 코드에서 제거되어야하는 존재

조건

• 코드 내에서 여러 곳에서 사용됨
• 하지만, 의미나 목적은 코드에서 명확하게 알려지지 않음

단점

• 유지보수성과 가독성 저하
• 예상치 못한 버그를 발생시킬 수 있음

매직 넘버를 개선하면 좋은 점

• 가독성 향상!
  • 내가 작성한 코드를 내가 이해하기도, 남이 내 코드를 이해 하기에도 용이하다
  • 예시 ratio를 구해야하는 코드에서 3, 2이라고 써 놓는 것보다 WIDTH_RATIO , HEIGHT_RATIO라고 작성해두는 편이 좋다
    
• 유지보수성 향상!
  • 갑자기 특정 값들을 모두 바꿔야하는 상황이 발생한다면,
    • 매직 넘버로 작성했을 경우, 하나씩 파일을 찾아 들어가 변수를 찾아서 힘들게 접근해서 수정해야하지만
    • 매직넘버를 상수로 따로 빼두었다면, 상수만 모아둔 파일에 접근해서 상수의 값만 수정하면 모든 값이 정상적으로 바뀐다

매직 넘버 활용 예시

• 예시 1: 의미가 있는 숫자 (ex. PI, EULER_NUMBER 등)

  😈 BAD

  add(2.7182818);

  😇 GOOD

  const EULER_NUMBER = 2.7182818;
  add(EULER_NUMBER);

  ⇒ 이렇게 하면 매직넘버 제거로 오일러 상수를 사용하려고 한 의도가 명확해짐
  

• 예시 2: 파일 확장자

  😈 BAD

  function getFileType(fileName) {
    if (fileName.endsWith(".jpg")) {
      return "image";
    } else if (fileName.endsWith(".mp3")) {
      return "audio";
    } else if (fileName.endsWith(".txt")) {
      return "text";
    } else {
      return "unknown";
    }
  }

  😇 GOOD

  const IMAGE_EXTENSION = ".jpg";
  const AUDIO_EXTENSION = ".mp3";
  const TEXT_EXTENSION = ".txt";
  
  function getFileType(fileName) {
    if (fileName.endsWith(IMAGE_EXTENSION)) {
      return "image";
    } else if (fileName.endsWith(AUDIO_EXTENSION)) {
      return "audio";
    } else if (fileName.endsWith(TEXT_EXTENSION)) {
      return "text";
    } else {
      return "unknown";
    }
  }

• 예시 3: 시간 관련 숫자들

  😈 BAD

  function calculateAge(birthDate) {
    const currentYear = new Date().getFullYear();
    const birthYear = new Date(birthDate).getFullYear();
    return currentYear - birthYear;
  }

  😇 GOOD

  const CURRENT_YEAR = new Date().getFullYear();
  
  function calculateAge(birthDate) {
    const birthYear = new Date(birthDate).getFullYear();
    return CURRENT_YEAR - birthYear;
  }

매직 리터럴

• 같은 개념으로 반복되어 사용되거나 의미가 있는 메시지들과 같이 상수로 대체 되어야할 문자열을 매직 리터럴이라고 한다.

• 이도 매직 넘버처럼 상수로 치환하는 것 지향해야 한다.

  예시

  const MESSEAGE = Object.freeze({
    START_GAME : '숫자 야구 게임을 시작합니다.',
    INPUT_NUMBER : '숫자를 입력해주세요 : ',
    BALL : '볼',
    STRIKE : '스트라이크',
    NOTHING : '낫싱',
    CELEBRATE_END : '3개의 숫자를 모두 맞히셨습니다! 게임 종료',
    RESTART_EXIT : '게임을 새로 시작하려면 1, 종료하려면 2를 입력하세요.', 
    STRIKEOUT : '3스트라이크',
    RESTART : '1',
    EXIT : '2',
    ERROR : '[ERROR] 숫자가 잘못된 형식입니다.',
  })

매직 리터럴을 정적(static)이고 변경 불가능(final)한 상수로 선언하여 사용하자

reference
https://velog.io/@hwisaac/%EB%A7%A4%EC%A7%81%EB%84%98%EB%B2%84
https://dev.rase.blog/21-03-20-magic-number/