[자바스크립트 / Vanilla JS] if(조건문) 줄이기

필자가 지금 현 상황에서 코드리팩토링의 초점을 맞추고 있는 부분은 바로 "if(조건문)" 최소화이다 

사실 완전 초보중에 초보일 때는 if문을 많이 써도 그냥 보기 편하니까 가독성이 좋은 코드라고 생각했지만

점점 경험이 쌓이고 성장할 수록 if문이 여러개 있으면 그냥 보기가 싫고 머리가 아프다

 

if(조건문)을 줄이는 이유는 간단하다

"높은 가독성"과 "유지 보수하기 좋은 코드"를 만들기 위하여

 

이런 저런 문서들을 찾아봤을 때 if문을 다른 방법으로 줄이든 뭘 하든 사실 성능에는 크게 차이가 없다고 한다.

그냥 가독성과 유지보수 때문에 줄이는거라고 보면 된다.

 

---

1. 삼항 연산자

삼항 연산자 사용법은 간단하다.

(조건문) ? 참일 경우 표현식 : 거짓일 경우 표현식 

// if else문

var num = 10
if (num === 10) {
  console.log("참")
} else {
  console.log("거짓")
}

// 삼항 연산자
num === 10 ? console.log("참") : console.log("거짓");

하지만 삼항 연산자는 보통 간단한 코드에서 빛을 발한다.

 

2. includes

다음과 같이 if문 내부에서 OR 연산자( || )를 사용하여 변수의 값을 체크하는 경우가 있다.

if (code === 'A' || code === 'B' || code === 'C' || code === 'D') {
  console.log('true');
}

체크해야 하는 값이 많아질수록 코드가 길어지고 가독성이 저하됩니다. 위 코드는 배열의 includes() 함수를 사용하여 코드를 간결하게 작성할 수 있다.

if (['A', 'B', 'C', 'D'].includes(code)) {
  console.log('true');
}

includes() 함수는 배열에 특정 값이 포함 여부에 따라 불리언 값을 반환한다.

 

위에서 작성한 예제에서 배열을 변수로 정의한다면 if문을 더 간결하게 작성할 수 있다.

let codeCheckList = ['A', 'B', 'C', 'D'];

if (codeCheckList.includes(code)) {
  console.log('true');
}

 

3. return

배열에 특정 값이 있는지 확인하기 위해 for문과 if문을 사용할 수 있다. 다음은 배열을 순회하여 10이라는 값을 가지면 true를 반환하는 예제다.

for (let loop = 0; loop < arr.length; loop++) { 
  if (arr[loop] === 10) {
    return true; 
  }
}

위 예제는 나쁜 방법은 아니지만 배열의 some() 함수를 사용한다면 위 예제를 한 줄로 작성할 수 있다.

let check = arr.some(item => item === 10);

some() 함수는 배열을 순회하여 조건을 만족하면, 순회를 즉시 중단하고 true를 반환한하고 조건을 만족하는 값이 없다면 false를 반환합니다.

 

4.Object

필자가 현재 가장 애용하는 방식이다.

Object의 Key값을 조건, Value값을 조건에 대한 결과 값으로 활용하여 사용하고있다.

https://growing-jiwoo.tistory.com/3?category=563581

[자바스크립트 / Vanilla JS] - Object와 forEach를 활용한 코드 리팩토링

Object를 활용하여 if문을 줄여나간 리팩토링이 필자 블로그의 글에 존재하여 링크로 대체하겠다.

 

이 외에도 많은 방법들이 존재하지만 일단은 4가지 방법만 다루도록 하겠다 ! 

 

출처: https://developer-talk.tistory.com/316

https://code-anthropoid.tistory.com/89

 

------------------------------------------------------------------------->

추가적으로 if문 간략화에 대한 방법과 팁에 대해 간단명료 하게 적어둔 블로그의 글을 인용하였다

 

(1) 한 문단 - method,function 등의 1개 logic에 if-else 조건문이 8개가 넘어가면 다시 짜라

(2) if (A != B) 보다 if not (A == B) 가 '가독성' 이 더 좋아 추천한다.

(3) 사실 Switch보다 Map이 훨씬 간결하다. 공부 더 해서 Map 쓰자

(4) ||, or 보다 if 안에 if 쓰면 가독성이 좋다. (조건이 2개면 유용)

# 이거 말고
if (A == 0 or B == 0):
	code

# 이렇게
if (A == 0):
	if (B == 0):
    		code

 

(5) || or 조건문 쓸 때, 배열에 '조건 요소' 넣고, include 탐색시키자 (조건이 3개 이상이면 유용)

(6) if 다음에 바로 else 쓰지 말고 최대한 else if - elif 처리해라.
    => else 는 당신이 생각하지 못한 오류 발생 처리에 유용하다

(7) return, break, continue, pass 등을 자주 써먹자

(8) 조건문 반복시 while 보다 재귀함수-호출 이 훨씬 좋은 경우가 많다

(9) 삼항 연산자 좋다.

 

출처: https://printscanf.tistory.com/entry/Clean-Code-If-else-줄이기