[Javascript / jQuery] return으로 함수가 종료되지 않는다면?

[JSP / Spring] return으로 함수가 종료되지 않는다면?

 

java나 javascript 사용시 반복문 내에서 탈출하고자 할 때 사용하는 것들이 있다고 말했다.

https://minggu92.tistory.com/63

[JSP / Spring] 함수 내에 return, break, continue

 

이를 통해 유효성체크 로직을 만들어 볼 수 있는데

다음과 같은 예제가 있겠다.

function save($targetRows){
    let targetArr = [];
    
    for (let i = 0; i < $targetRows.length; i++) {
        const $targetRow = $($targetRows[i]);
        if (!sampleValid($targetRow)) 
        	return; //타겟 유효성검사
        let targetJson = {};
        targetJson.targetName = $targetRow.find('input[name="target_name"]').val();
        targetJson.targetBirthYear = $targetRow.find('select[name="birth_year"] option:selected').val();
        targetJson.targetGrade = $targetRow.find('input[type="radio"][name="grade"]:checked').val();
        targetJson.targetschoolNo = $targetRow.find('input[name="school_no"]').val();       
        targetArr.push(targetJson);
    }
    
    return targetArr;
}

function sampleValid($thisRow){
    $thisRow.find('dl[data-col="require"] input[type="text"]').each(function (idx, el) {
        const $el = $(el);
        if (fn_isEmpty($el.val() + $el.text())) {
            const $label = $('label[for="' + $el.attr('id') + '"').text();
            showError($el, $label + ' 항목을 입력해주세요.'); //input 밑에 error text 생성            
            $el.focus(); //빈 input태그로 포커스
            return false;
        } else
            hideError($el); //생성되어있는 error text hide
    });

    let saveBtn = $('#btnSave');
    if (saveBtn.is(":disabled")) saveBtn.prop('disabled', false); //버튼 중복클릭 방지
    return true;
}

 

save() 함수를 실행시키며 sampleValid() 함수로 유효성을 체크하는 로직이다.

$targetRows 객체의 length만큼 반복문을 통해 매번 체크하는 것인데 sampleValid()의 결괏값이 true 일 때만 

targetJson 객체에 자료를 담아 배열을 return 해주고자 했다.

 

그런데 유효성체크에 걸려 error text가 생성되었는데도 배열을 리턴하는 현상을 발견.

이유를 보아하니..

jQuery의 each() 함수 때문이었다.

each() 함수 내에서 return false는 break와 같은 역할을 한다.

 

따라서 try catch 구문을 이용해 빠져나오도록 한다.

function sampleValid($thisRow){
    try {
        $thisRow.find('dl[data-col="require"] input[type="text"]').each(function (idx, el) {
            const $el = $(el);
            if (fn_isEmpty($el.val() + $el.text())) {
                const $label = $('label[for="' + $el.attr('id') + '"').text();
                showError($el, $label + ' 항목을 입력해주세요.'); //input 밑에 error text 생성            
                $el.focus(); //빈 input태그로 포커스
                throw 'finish';
            } else
                hideError($el); //생성되어있는 error text hide
        });
    } catch(Exception){
        if (Exception !== 'finish') throw Exception;
        else return false;    	
    }
    
    let saveBtn = $('#btnSave');
    if (saveBtn.is(":disabled")) saveBtn.prop('disabled', false); //버튼 중복클릭 방지
    return true;
}

 

<참고>

https://stackoverflow.com/questions/4868931/breaking-parent-function-of-jquery-each-function

Breaking parent function of jQuery each function