TIL 23_조건문을 객체로 쓰는 방법

자바스크립트에서 조건문을 약식으로 표현하거나 one line 표기법 등 매우 유용한 방법들이 많다.
그런데 다른 방법도 존재하는데 바로 객체를 사용하는 방법!(정확히는 객체의 프로퍼티를 사용한다.)

조건문에서 if, switch 대신에 객체의 프로퍼티 사용하는 방법

객체의 프로퍼티를 사용하면 조건문으로 사용하는 것이 가능하다. 간단한 예를 통해 알아본다!

먼저 변수 str이 어떤 값을 가졌느냐에 따른 어떤 특정한 코드를 실행하려고 한다. 아래는 indexNo라는 변수의 값을 각각 다르게 정한다.

let str = 'jin';

if (str === 'kim') {
  let indexNo= 0;
}
else if (str === 'jin') {
  let indexNo= 1;
}
else if (str === 'choi') {
  let indexNo= 2;
}

위 코드를 보면 str의 값에 따른 조건문이 긴 코드를 가지게 된다. 물론 위와 같이 3개 정도라면 많지 않지만 만약 10개가 넘어가는 경우를 생각한다면 적지 않다. 이 경우 if문을 switch로 바꾸면 좀 더 간결하겠지만 역시 긴 것은 마찬가지!

그렇다면 위 코드를 객체로 하여 조건문을 대체할 수 있을까?

let str = 'jin';

let condition = {
  kim: 0,
  jin: 1,
  choi: 2
}
let indexNo  = condition[str];

기존보다 코드가 간결하고 직관적이다. 즉, 객체의 key에 해당하는 부분에 변수를 추가해 해당하는 값을 다르게 매핑하는 방법이다. 물론 이 방식에 익숙하지 않다면 보기 어려울 수 있다. (나 또한 이번에 처음 써보게 되어서 이해하는데 시간이 걸렸다) 하지만 조건이 늘어날 수록 위와 같이 객체를 활용하는 방법의 장점이 눈에 극명히 드러난다. 코드가 훨씬 간결할 수 있다!

💡 마치며!

실제로 지금 진행하고 있는 왓챠피디아 클론 코딩에서도 객체를 통한 조건문을 사용하게 되면서 이 글을 쓰게 됐다. 사용자가 영화 상세 페이지에서 별점을 매길 수 있는데 0.5점 단위로 사용자의 평가에 대한 코멘트를 적어야 했다.

 ratingComment = setRating => {
    const rating = {
      0: '평가하기',
      0.5: '최악이에요',
      1: '싫어요',
      1.5: '별로예요',
      2: '재미없어요',
      2.5: '부족해요',
      3: '보통이에요',
      3.5: '볼만해요',
      4: '재밌어요',
      4.5: '훌륭해요!',
      5: '최고예요!',
    };
    return rating[setRating];
  };

원래의 조건문을 썼다면 길어졌을 코드를 객체를 통해 간단하게 줄일 수 있었다. 살짝 뒤틀어 생각해보면 객체도 여러가지 방법으로 재밌게 쓸 수 있겠다는 생각이 든다.

** 객체를 사용하는 방법은 좋지만 잠시나마 객체타입의 변수를 메모리에 저장해야 하므로 성능에 미세한 영향을 끼칠 수 있다. 하지만 그 차이가 크지 않고 득이 더 많은 것은 명확한 사실!