[오류 노트] 유효성 검사 시 ASYNC사용

1. 사용예시

유효성 검사 시 function으로 처리하고 있던 와중에 Ajax로 데이터를 보내서 확인 유무를 true, false로 판단할 때 

---

async function jsb_BRCheck(jsb_BR) {

    if (jsb_BR != null) {

        //기본 처리
        jsb_BR = jsb_BR.replace(/,/g, "");
        if (isNaN(jsb_BR) || /[^0-9]$/.test(jsb_BR)) {
            displayErrorMessage("코드는 숫자만 입력해주세요.");
            return false;
        }
        if (jsb_BR.length !== 4) {
            displayErrorMessage("코드는 4자리 숫자로 입력해주세요.");
            return false;
        }
        if (jsb_BR.trim() === " ") {
            displayErrorMessage("잘못된 입력입니다. 다시 확인해주세요.");
            return false;
        }

       const data = await $.ajax({
                type: "POST",
                url: "/jsb_BRCheck.do",
                data: {
                    jsb_BR: jsb_BR,
                },
        });   
        const passData = data.list;
        if (passData === null || passData === 0) {
                displayErrorMessage("일치하는  코드가 없습니다.");
                return false;
        }
        
    }
    displayErrorMessage("코드는 이상없습니다.");
    return true;
    
}

2. 해설 🧑‍💻

---

jsb_BRCheck는 비동기 함수라서.

await 키워드를 사용하여 AJAX 요청의 응답을 기다린 후에 다음 코드가 실행되고

비동기 함수에서 return 문은 함수의 실행을 종료시키고, false를 반환하게 된다!

그러나 await 키워드를 사용하여 비동기 작업이 완료될 때까지 대기하는 동안,

return 문은 해당 async 함수의 범위를 벗어나지 않고 비동기 작업이 완료된 후에 실행된다.

 

따라서 함수에서 return false를 실행하더라도 await 이전에 있는 코드들은 여전히 실행되고,

return false는 비동기 작업이 완료된 후에 실행됩니다. 이로 인해 return false 이후의 코드가 실행되며,

"코드는 이상없습니다."라는 메시지가 표시되는 것이다.