JavaScript 입문 : 계산기 만들기 - if문 중첩 줄이기

이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 

 

지난시간 계산기 연산자 함수를 사용하는데 있어 다음과 같이 if문안에 if문을 사용 하였습니다. 

 

 

프로그램을 하다보면 if문들이 중첩이 되는 경우가 발생이 되는데 가능한 중첩을 없애서 깔끔하게 하는게 좋습니다. 

 

그럼 if문의 중첩을 제거해 보도록 하겠습니다. 

 

1. if문 내에서 공통으로 사용되고 있는 항목(함수)을 각 분단별로 배치

 

if문내에 공통적으로 사용되고 있는 항목은 $screen_result.value += number; 입니다. 이 항목을 다음과 같이 각 문단별로 써 줍니다. 

 

 

2. 짧은 문장을 if문 맨 앞으로 이동

 

보통 짧은 문장은 else문 뒤에 나오는 경우가 많은데 이 경우에서도 else문 다음에 나오는 문장들이 짧습니다. 이유는 if문 안에 if문을 넣은 경우가 최소한 한줄이라도 많기 때문이죠. 

 

이 두문장의 위치를 바꾸기 위해서는 if문 조건식을 반대로 하면 됩니다. 

 

 

3. 짧은 문장을 맨위로 이동후 함수 종료

 

if문을 종료할 경우는 return을 사용합니다. 참고로 for문은 break를 사용합니다.

return으로 종료하면 뒤이어 나오는 else 형태는 필요 없게 됩니다.

 

 

---

<Quiz>

 

다음 if문 중첩을 줄여보세요 

 

 

정답은 다음과 같습니다. 

(눈으로 해보면 전혀 머리에 남지 않습니다. 직접 타이핑하고 고민해야 합니다. )

 

① 중복된 절차 찾아서 각 문장에 배치

 

 

② 짧은 절차를 맨 위로

 

③ return 뒤 else 삭제 및 정리

 

return으로 if문을 종료시키면 뒤에 나오는 else는 필요없게 됩니다. 그리고 라인(들여쓰기)을 정리하면 됩니다.  

 

 

이번 한번으로 코드 정리에 대한 개념이 잡히지는 않습니다만 자주 접하다보면 다루는 기술이 늘것이라 판단됩니다.