[JavaScript] 깔끔한 조건문을 작성하는 방법

 코드를 작성하다보면 조건문이 복잡해지는 (깊이가 깊어지는) 경우가 있다. 예를 들면 다음과 같은 경우이다.

if( c <4 ) {
    if( c < 2 ) {
        if( c == 0 ) {
            // 처리
        } else {
            // 처리
        }
    } else {
        if( c == 3 ) {
            // 처리
        } else {
            // 처리
        }
    }
} else {
    // 처리
}

 이렇게 쓰면 가독성이 나빠지고 테스트 코드도 작성하기 어려워진다. 이러한 문제를 해결하기 위한 팁이 여러가지가 있는데 이 기회에 정리해보고자 한다.

 

 

빠른 return하기

---

 조건문에 반사적으로 else를 쓰는것 대신 return문을 작성하면 읽기 쉬워지는 경우가 있다. 

Before

const checkConnection = (isOnline) => {
  if (isOnline) {
    // 온라인시의 처리
    makeReservation();
    ...
    ...
  } else {
    // 오프라인시의 처리
    alert('오프라인입니다.');
  }
}

After

const checkConnection = (isOnline) => {
  if (!isOnline) {
    alert('오프라인입니다.');
    return;
  }
  // 온라인시의 처리
  makeReservation();
  ...
  ...
}

 

 

삼항연산자 사용하기

---

삼항연산자 사용하여 가독성을 높일 수 있다.

Before

const checkAge = (age) => {
  if (age > 18) {
    console.log('성인 입니다');
  } else {
    console.log('어린이 입니다');
  }
}

After

const message = age > 18 ? '성인 입니다' : '어린이 입니다';
console.log(message);

 다음과 같이 개행해도 문제없이 동작한다.

const message = age > 18
  ? '성인 입니다'
  : '어린이 입니다';
console.log(message);

 

 

함수로 정리하기

---

 큰 처리 덩어리는 함수로 분할하여 작성한다.

Before

function drinkAlcohol(isAdult, drink) {
  if (!isAdult) {
    return;
  }

  if (drink === 'beer') {
      eatSomething();
      adult.enjoyDrink(drink);
      utils.goToBathroom(2);
  } else {
      adult.goShopping();
      utils.buyDrink('beer');
      startCooking();
  }
}

After

function drinkAlcohol(isAdult, drink) {
  if (!isAdult) return;

  const enjoyBeer = () => {
    eatSomething();
    adult.enjoyDrink(drink);
    utils.goToBathroom(2);
  }

  const getBeer = () => {
    adult.goShopping();
    utils.buyDrink('beer');
    startCooking();
  }

  drink === 'beer' ? enjoyBeer() : getBeer();
}

 참고로 함수의 호출을 삼항연산자를 이용해서 하는 것은 좋지 않다는 의견도 있다. 맨처음에는 괜찮아도 보수시에 인수가 늘거나, 긴 함수의 호출을 삼항연산자로 쓰면 반대로 처리하기 힘들어지는 경우가 있기 때문이다.

 

 

오브젝트형을 사용하기

---

 오브젝트로서 필요한 조건을 키로 하는 처리 내용을 선언해두어 필요에 따라 사용하는 방법도 존재한다.

Before

const calc = {
    run: function(op, n1, n2) {
        let result;
        if (op == "add") {
            result = n1 + n2;
        } else if (op == "sub" ) {
            result = n1 - n2;
        } else if (op == "mul" ) {
            result = n1 * n2;
        } else if (op == "div" ) {
            result = n1 / n2;
        }
        return result;
    }
}

calc.run("sub", 5, 3); //2

After

const calc = {
  add: (a, b) => a + b,
  sub: (a, b) => a - b,
  div: (a, b) => a / b,
  mul: (a, b) => a * b,
  run: (fn, a, b) => fn(a, b),
};

calc.run(calc.mul, 7, 4); //28

 이 작성법은 switch - case로 바꿔 쓸 수 있다. 

---

참고자료

https://ramble.impl.co.jp/299/#toc4