[ es6 ] if문 중첩 / 렛츠기릿 자바스크립트

인프런에서 렛츠기릿 자바스크립트가 무료 강의로 오픈되면서

자바스크립트 기초를 다시 다져야겠다는 생각으로 강의를 들었는데

기초부터 잘 알려주는 강의입니다.

 

평소 자바스크립트하더라도 헷갈렸던 부분들이 많이 생기기 마련인데

왜 이렇게 작동되는지에 대한 원리 또는 코드 작성 시, 스킬등 꿀팁들을 다양하게 

알려주셔서 궁금증 해소가 많이 되는 강좌였고, 계속 진행예정입니다.

 

4강. if문 중첩 줄이기

const onClickNumber = ( event ) => {
	// 연산자가 비어 있지 않고, numTwo의 값이 없다면
     if (operator) { // 비어있지 않다
     	if(!numTwo) {
        	$result.value = '';
        }
         numTwo += evnet.target.textContent;
     } else { // 비어 있다
         numOne += evnet.target.textContent;
     }    
     $result.value += evnet.target.textContent;
 }

if문이 중첩이 많이 되어 있으면 코드 맥락을 확인하기가 어려워지며, 언제 실행되는 지 헷갈리는 부분도 많아진다.

처음부터 if문이 중첩이 되지 않고 코드를 작성하도록 하는 것이 좋은 방향입니다.

 

실제로 대부분의 if문은 순서도를 살짝 바꾸면 중첩을 피할 수 있습니다.

if중첩문 피하는 방법

1. if문 다음에 나오는 공통된 절차를 각 분기점 내부에 넣는다.

2. 분기점에서 짧은 절차부터 실행하게 if문을 작성한다.

3. 짧은 절차가 끝나면 return(함수 내부의 경우)이나 break(for문 내부의 경우)로 중단한다.

-> 3번을 실행하게 되면 else를 제거하게 됨으로 중첩 하나가 또 줄어드는 결과를 가져옴으로서

가독성이 더 좋아진다.

const onClickNumber = ( event ) => {
    if (!operator) { // 비어있다
    	numOne += evnet.target.textContent;
		$result.value += evnet.target.textContent;
        
        return; // 함수 중단
    }  
     
    if(!numTwo) { // 비어있지 않다
        $result.value = '';
    }
    numTwo += evnet.target.textContent;
    $result.value += evnet.target.textContent;
 }