try / catch

이재영·2023년 3월 30일

HTML CSS JS

목록 보기

13/22

try / catch

예외처리문으로 예외상황을 따로 처리할 수 있기 때문에
코드실행중 예외상황이 발생해도 프로그램이 종료되지 않고 프로그램을 유지할 수 있다.
프로그램의 안정성을 높일 수 있다.

try {
     // 예외처리를 하고싶을때 작성
     // 검색창에서 검색할 때 빈칸을 그대로 입력하는 상황을 거르고 싶을 때
     // throw 로 error 메세지를 보낼수 있다.

} catch (error) {
    
    // 오류가 발생했을 때
    // 오류의 메시지 error(매개변수 이름 바꿔도 됨)
    // throw 에 작성한 구문이 error 에 담긴다.

}

숫자를 제외한 다른 것을 입력했을 때 예외처리를 하는 예제

html

<body>
    <div>
        <input type="text" class="dev">
        <button onclick="myStr()">클릭</button>
        <p class="message"></p>
    </div>
</body>

js

function myStr(){
    let devValue = document.querySelector(".dev").value;

    try {
        if(devValue == "") throw "비었음";

        devValue = Number(devValue);
        // Number숫자로 타입을 변경해주는 생성자 함수
        if(isNaN(devValue)) throw "숫자가 아님"
      	// isNaN : 문자는 true , 숫자는 false 반환
        // 문자열이 들어가면 문자가 숫자로 변환될수 없다.
      	// 타입만 number 로 바뀌고 자체는 문자이다.

    } catch (error) {

        //코드를 실행하다 에러가 발생하면
        // catch문을 실행하고 throw의 내용은
        //error 매개변수에 들어온다.
        document.querySelector(".message").innerHTML = error;
    }

    if(isNaN(devValue)==false && devValue !== ""){
        document.querySelector(".message").innerHTML = "숫자가 정상적으로 입력되었습니다."
    }
}