javascript 함수 return false 로 종료가 되지 않고 계속 진행될때

등록 함수를 코딩할 때 유효성 체크를 하기 위해 화면에 입력된 값을 체크하는 경우 자주 발생할 수 있습니다.

함수내에 jquery 의 each() 함수가 있을 경우 return false 를 올바르게 사용해야 합니다.

 

잘못된 예

---

아래와 같은 예제 소스가 있다고 가정할 때 유효성 체크하는 함수 내에 each 로 수량 체크를 하고 있습니다. 이때 each 내에 있는 return false 는 each 를 중단하는 break 역활을 할 뿐이고 함수를 멈추는 것은 아닙니다. 

//  등록  
function fn_promInfrSave(){
	// 유효성 체크 
    if (!fn_validation("promInfrSave")){
		return false;
	}
 }
 
 // 유효성 체크 
function fn_validation(flag){

	switch (flag){
		case "promInfrSave" : 
			$(".promPrdMinQty").each(function (index){
                if (Number($(this).val().replaceAll(',', '')) <= 0){
                    alert("최소수량을 입력해 주세요.");
                    $(this).focus();
                    return false;
                }
            });
		break;
	}
	return true;
}

 

올바른 예

---

try catch 문을 사용해서 each 를 빠져 나오고 결과에 따라 return false 를 해줘야지 정상적으로 함수를 빠져나올 수 있고 return 값을 전달 할 수 있습니다.

//  등록  
function fn_promInfrSave(){
	// 유효성 체크 
    if (!fn_validation("promInfrSave")){
		return false;
	}
 }
 
 // 유효성 체크 
function fn_validation(flag){

	switch (flag){
		case "promInfrSave" : 
		try {
                $(".promPrdMinQty").each(function (index){
                        if (Number($(this).val().replaceAll(',', '')) <= 0){
                            toastr.error("최소수량을 입력해 주세요.");
                            $(this).focus();
                            throw 'stop';
                        }
                    });
         } catch(Exception){
                if (Exception !== 'stop') throw Exception;
                else return false;    	
         }
		break;
	}
	return true;
}