[JavaScript] if 조건문 효율적으로 가독성 있게 쓰는 방법

# if 조건문 헬(Hell)에 빠지는 이유

자바스크립트에서 if 조건문을 쓸 때,

효율성/가독성이 떨어지고, 추가/수정이 어려워지는 이유는 대체로 2가지이다.

 

1. 한번에 너무 많은 요소를 비교한다.
2. 중첩(nested)조건이 많아진다.

---

1-1. 한번에 너무 많은 요소를 비교하는 경우 - 사례

예를 들어, 음식 종류를 비교하는 조건문을 보자.

 

if(food === "pizza" && food === "pasta" && food === "burger" && food === "steak"){
  return "Western food";
}else{
  return "Asia food";
}

 

- 가독성이 떨어진다 : 음식 종류가 10개 쯤 된다면 더욱 읽기 힘들 것이다.

- 비효율적이다 : 동일한 코드(food === "음식명" &&)가 반복된다.

- 수정이 귀찮다. : 특정 부분의 변경이 필요하면 하나하나 찾아봐야 한다.

 

1.-2 한번에 너무 많은 요소를 비교하는 경우  - 해결 방법

배열을 사용하고, includes() 로 비교한다.

 

// 배열로 비교항목을 관리한다.
const westernFoods = ["Pizza", "Pasta", "Burger", "Steak"];

// includes 메서드로 포함 여부를 체크한다.
if(westernFoods.includes(food)){
  return "Western food";
}else{
  return "Asain food";
}

 

- 이렇게하면 코드도 짧아지고 가독성이 좋아진다.

- 배열로 비교 항목을 관리하므로, 추가/수정/삭제도 쉽다.

---

2-1. 중첩(nested) 조건문을 사용하는 경우 - 사례

다음으로 if-else 중첩 조건문이 사용되는 경우를 보자.

예를 들어, 아래 checkDigit 함수는 숫자의 자리수를 체크한다.

 

// 숫자 크기를 비교하여, 자리수를 반환한다.
function checkDigit(inputNumber){
  if(inputNumber > 99){  
    return "3자리수";
  }else{
    if(inputNumber > 9) {
      return "2자리수";
    }else{
      return "1자리 이하 수";
    }
  }
}

 

- 가독성/효율성이 떨어진다 : 코드도 길어지고, 5자리수 이상을 비교해야 한다면 상당히 귀찮아질 것이다.

- 수정이 어렵다 : 복잡한 중첩구조를 생각하며 수정하는 것은 아주 좋은 성능의 뇌가 필요한 영역이다.

 

2-2. 중첩 조건문을 사용하는 경우 - 해결 방법

if 문만 연속해서 사용한다.

이미 상위 조건을 통과했다면, 더 이상 else절로 중첩할 필요가 없는 경우가 많다.

 

function checkDigit(inputNumber){
  if(inputNumber > 99) return "3자리 수";
  if(inputNumber > 9) return "2자리 수";
  return "1자리 이하 수";
}

 

마지막에는 if 절 조차 필요하지 않다.

코드 양도 줄어들어 가독성이 좋아졌으며, 추가/수정도 쉬워진다.

특히 switch-case 문을 사용해야하는 경우에 더욱 효과적일 것으로 생각된다.

---

모든 경우에 적용할 수 있는 것은 아니지만,

적재적소에 활용하면 좋은 팁일 것 같아 정리해 둔다.

 

필요에 따라 단축평가, 삼항연산자를 적절히 적용하는 것도 좋을듯 하다.

[자바스크립트] 논리연산자(&&, ||) 단축평가

 

[자바스크립트] 삼항 조건 연산자, 옵셔널체이닝 연산자, null병합 연산자: 변수, 객체, 값의 null 체크 검사 방법