중첩 최소화 하기

SunnyMoon·2022년 7월 19일
0

if문을 여러번 들여쓰는것은 좋지 않은 코드이다.

⇒ 가독성의 문제점이 가장 크다 . 협업하는데 좋지 못한 코드이다

if문 중첩을 탈출하는 방법의 코드를 연습해서 쓰도록 하자

if ( 조건 A ) {
	if ( 조건 B ) {
		if ( 조건 c) {
			console.log 
		}
	}
} else {
	if (조건D) {
		if (조건E) {
			 console.log 
		}
	}
}

최악의 조건을 가진 코드이다.

if 문이 중첩되면 언제 실행되는지, 언제 되는지 정확하게 판단하기가 어려운 문제점이 발생한다

if문을 중첩되지 않게 쓰는 방법

⇒ if문을 한번 생기게 되면 계속 if문을 쓰게 된다..

중첩을 제거하는 방법은

  1. 공통된 절차를 각 분기점 내부에 넣는다
  2. 분기점에서 짧은 절차부터 실행하게 if문을 작성
  3. 짧은 절차가 끝나면 return 혹은 break로 중단 ⇒ elary return 을 잘 이용하자
  4. else를 제거한다
  5. 중첩된 분기점이 나오면 계속 반복한다

const onClickNumber = (event) =>{
		if(operator) {
			if(!numTwo) {
				result.value = '';
			}
		} else {
			console.log('hi');
		}
		result.value += event.target.textContent;
}
1. 공통된 부분을 분기점 내부로 넣는다 (if 문 이후로의 공통된 부분)

const onClickNumber = (event) =>{
		if(operator) {
			if(!numTwo) {
				result.value = '';
			}
			result.value += event.target.textContent;
		} else {
			console.log('hi');
			result.value += event.target.textContent;
		}
}
2. 짧은것을 if문 안으로 넣는다

const onClickNumber = (event) =>{
		if(!operator) {
			console.log('hi');
			result.value += event.target.textContent;
		} else {
			if(!numTwo) {
				result.value = '';
			}
			result.value += event.target.textContent;
		}
}
3. 짧은 절차를 return 한다. else를 지운다
const onClickNumber = (event) =>{
		if(!operator) {
			console.log('hi');
			result.value += event.target.textContent;
			return;
		} 
		if(!numTwo) {
			result.value = '';
		}
		result.value += event.target.textContent;
}

이런식의 계속 반복을 통해 중첩을 지우는 일을 진행하도록 하자

코드를 클린하게 유지하기 위해서는 if문 지옥에 빠지지 않도록 하자

profile
프론트앤드 개발을 공부하는 중입니다:)

0개의 댓글