[JavaScript] 중첩된 if문 리팩토링

const val = $('#ID1').val();
const img = $('#ID2').attr('src');
const name = $('#ID3').val();
const sign = $('#ID4').find('span').text();
const today = ('오늘 날짜');
const visit = ('방문했던 날짜');

if (val === "A") {
    if (img === "../../../기본이미지") {
       func.alertT('사진 필수!');
    } else if (today === visit) {
        func.alertT('하루에 한번만 가능!');
    } else {
        startFunc();
    }
} else if (val === "B") {
    if (name === '') {
        func.alertT('점검자 성명은 필수(B)');
    } else if (sign === '서명') {
        func.alertT('서명은 필수!');
    } else if (img === "../../../기본이미지") {
        func.alertT('사진 필수!');
    } else {
        startFunc();
    }
} else if (val === "C") {
    if (name === '') {
        func.alertT('점검자성명은 필수(C)');
    } else {
        startFunc();
    }
}

• if문안에 if문이 중첩되어 있으면 코드가 지저분해 보임.
  => 한 함수안에 해야할 일이 너무 많음

if (val === "A") {
    if (img === "../../../기본이미지") {
       func.alertT('사진 필수!');
    } else if (today === visit) {
        func.alertT('하루에 한번만 가능!');
    } else {
        startFunc();
    }

위 if문의 일부만 봐도 해야할일이 많아보인다. 이런 if문이 세개가 있음

• val값이 A인지 확인하는 기능 1
• img값이 기본이미지 인지 판별하는 기능 2
• today와 visit이 같은지 판별하는 기능 3
• 판별후 startFunc();를 실행시키는 기능 4

해당 기능을 하는 함수를 따로 만들어서 관리하면 코드가 깔끔 해질 수 있다.

먼저 Validator를 만들고 그안에 각 기능들을 수행하는 함수들을 만들어보자.

let Validator = {
   isNoImg: function () {

   },
   
   isAlreadyVisit : function (){

   }

}

기능들이 어떤것이 있는지 정리하면 간단하게 어떤 방식으로 작성할지 생각할 수 있을것이다.

• 위 기능들을 토대로
  img를 판별하는 함수 1 : isNoImg
  today===vist를 판별하는 함수 2 : isAlreadyVisit

내용들도 마저 작성해 보자.

let Validator = {
   isNoImg: function (img) {
       if(img.attr('src')==="../../../기본이미지"){
           return true;
       }
       return false;

   },

   isAlreadyVisit : function (){
       const today = ('오늘 날짜');
       const visit = ('방문했던 날짜');

       return today===visit ;

   },

}

다음으로 func.alertT를 실행시켜주는 기능을 하는 함수를 만들자.

page = {
   funcA: function () {
       if (Validator.isNoImg($('#ID2'))) {
           func.alertT('사진 필수!');
           return;
       }
       if (Validator.isAlreadyVisit()) {
           func.alertT('방문했던 날짜');
           return;
       }
       startFunc();
   },
}

Validator에 있는 함수들의 리턴값으로 판별하고 각 기능 실행

즉, funcA라는 함수가 validator에서 받아온 값으로 다음 기능 실행

• 이전코드

if (val === "A") {
    if (img === "../../../기본이미지") {
       func.alertT('사진 필수!');
    } else if (today === visit) {
        func.alertT('하루에 한번만 가능!');
    } else {
        startFunc();
    }

• 각 기능들을 분리시킨 후 작성한 코드

 if (val === "A") {
    page.funcA();
}

같은 방식으로 나머지 필요한 함수들을 Validator에 추가해주고 funcB() ,funcC() 함수들을 만들어 주면 최종적으로 아래 코드와 같이 된다.

const val = $('#ID1').val();
 if (val === "A") {
    page.funcA();
}else if (val === "B"){
	page.funcB();
}else if (val === "C"){
	page.funcC();
}else

위 함수 안에서는 말그대로 A 인지 B인지 C인지만 판별해주는 기능만 하게 된다.