본문 바로가기

Javascript/이론+예제

에러 핸들링(error handling)

에러핸들링 하는 방법!

try{} - catch(){}

사용 방법은?

try{
    // 소스코드를 쓴다
    // 이 안에서 에러가 발생하면 catch로 간다.
}catch(){
    //catch 가 에러를 잡아준다.
}

이런 구조로 이루어져있어요!

시도했는데 에러 발생? 그럼 catch 가 잡아준다! 라는 느낌입니다. ㅋㅋ 영어 해석하심 편할듯

근데 catch 가 어디서 에러를 받아오죠?

try 에서 받아오죠??

그래서 catch 는 자연스럽게 error 라는 아이를 매개변수로 받아요.

try{
    // 소스코드를 쓴다
    // 이 안에서 에러가 발생하면 catch로 간다.
}catch(error){
    //catch 가 에러를 잡아준다.
}

요렇게!

그래서 응용 예제를 들자면

try{
    // 소스코드를 쓴다
    // 이 안에서 에러가 발생하면 catch로 간다.
    에러키워드
}catch(error){
    //catch 가 에러를 잡아준다.
    console.log('내가 잡은 에러는' , error.message)
}

요렇게 사용해봅시다 그럼 콘솔 로그를 확인해볼까요?

오우.. 에러 요놈 잡았따!!

또 다르게 봅시다요

다르게 보기 전에 또 알아놔야하는 아이는

throw

라는 아이입니다.

이 아이는 에러를 강제로 발생시키는 아이입니다

let weight = 45

try{
    // 소스코드를 쓴다
    // 이 안에서 에러가 발생하면 catch로 간다.
    if(weight < 30) {
        throw new Error("당신은 너무 말랐어요")
    }
}

만약에 weight 이 30보다 작다면, 에러를 강제로 발생시켜주는거죠

" 당신은 너무 말랐어요 " 이런식으로

근데 뒤에 new Error 가 있죠? 이건 자바스크립트에서 제공해주는 객체구나~ 하시면 됩니다.

let weight = 22

try{
    // 소스코드를 쓴다
    // 이 안에서 에러가 발생하면 catch로 간다.
    if(weight < 30) {
        throw new Error("당신은 너무 말랐어요")
    }
}catch(error){
    //catch 가 에러를 잡아준다.
    console.log('내가 잡은 에러는' , error.message)
}

자 이렇게 실행을 해봅시다.

weight 가 30보다 작을 경우 발생시키는 에러죠?

그럼 weight 을 22로 낮춰봅시다. 저 if 문이 true 가 되게끔.

와우. 에러를 딱 보여주네요!! ㅎㅎ

프론트엔드에게 아주 중요한 친구입니다. 에러핸들링!!!!

이 try 에서 error 를 잡는 순간에

그 error 를 발생시킨 아이 밑에 있는 코드들은 작동이 되지 않습니당.

break 같은 아이죠.

너무 유용한 친구를 배워봤습니다~~ [뉴스 타임즈] 프로젝트에 응용할 예정이니 같이 봐주심 좋겠네요

'Javascript > 이론+예제' 카테고리의 다른 글

this  (0) 2022.12.29
이벤트 버블링, 이벤트 캡쳐링과 이벤트 위임  (0) 2022.12.29
자바스크립트의 동작 원리  (2) 2022.10.22
API (Application Programming Interface)  (0) 2022.10.21
배열 함수 findIndex()  (0) 2022.10.20