일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
- Flex Container
- margin-left
- flex item
- 자바스크립트
- react강의
- CSS
- js split
- 국비지원
- 프로그래머스 lv0
- 코딩테스트 lv0
- DOM
- 나라사랑카드
- 패스트캠퍼스
- 코딩테스트 js
- 노드
- K디지털기초역량훈련
- 프로그래머스 JS
- javascript
- udemy
- API
- 호이스팅
- js
- 바이트디그리
- flex
- SVG
- 리액트
- html
- React
- 변수 선언
- 내일배움카드
- Today
- Total
꺾이지 않는 마음
[JS] 제어문에서 'Try-catch'로 오류 처리하기 본문
Try-catch문은 주로 서버와 관련된 네트워크 작업에서 발생할 오류를 잡고 처리하기 위해 사용한다.
제어문에서는 Try-catch문을 사용할 일이 거의 없지만,
그래도 알아두면 좋은 개념이므로 한번 연습해보았다.
Try-catch문의 기본 문법은 아래와 같다.
try { 검사할 코드 } catch (매개변수) { 오류 발생시 실행할 코드 }
앞에 서술한 {}는 오류 발생 여부를 확인할 코드를 감싼다.
뒤에 서술한 {}는 앞서 {}로 감싼 코드에서 오류가 발생할 시 오류를 무시하고 실행할 코드를 작성한다.
원래 에러가 발생하면 해당 실행문이 중단되지만 후술한 catch () {}를 통해 에러를 무시하고 새로운 코드를 실행할 수 있게 되는 것이다.
즉, Try-catch문은 에러가 발생했을 때를 대비하여 대신 실행할 코드를 지정해주기 위해 사용한다.
아래에 예시를 보자.
function getMaxLifeValues() {
const enteredValue = prompt("Maximum life for you and the monster.", "100");
const parsedValue = parseInt(enteredValue);
if (isNaN(parsedValue) || parsedValue <= 0) {
throw { message: "Invalid user input, not a number! " };
}
return parsedValue;
}
try {
let chosenMaxLife = getMaxLifeValues();
} catch (error) {
console.log(error);
chosenMaxLife = 100;
alert("You entered something wrong,default, default value of 100 was used.");
}
prompt 입력 창에 양수를 입력하지 않으면 에러가 발생하는 getMaxLifeValues 함수를 선언했다.
(본 코드에서는 설명을 위해 의도적으로 에러를 발생시키는 키워드인 throw를 사용하였다)
try로 시작하는 코드를 보자.
getMaxLifeValues 함수를 통해 전달받은 값을 chosenMaxLife라는 변수에 저장하는 코드를 {}로 먼저 감쌌다.
즉, 해당 코드줄이 에러 발생 유무를 검사하는 대상이 된다.
만약 사용자가 prompt 창에 양수 이외의 값을 입력하면 본 함수는 에러를 발생시킬 것이다.
이 때, 에러가 제어되면서 본 로직이 멈추는 것이 아니라 catch { } 안에 있는 코드가 대신 실행된다.
그리고 여기서 중요한 점은,
에러 발생 시 콘솔 창에 에러 메시지는 출력되지만 에러로 표시되지 않는다는 것이다.
시스템 오류가 아닌 일반적인 에러 메시지 형태로 나타나게 된다.
위 코드를 실행하고 콘솔창을 확인해보면
이처럼 오류 메시지만 표시될 뿐 에러표시는 나오지 않는다.
이처럼 Try-catch문을 사용하면 오류를 잡고 처리할 수 있게 된다.
하지만 서론에서 서술했듯이 Try-catch문은 제어문에서는 잘 사용하지 않는다.
왜냐하면 그냥 if else 문을 쓰면 되니까.
오류가 필히 발생할 수 밖에 없는 네트워크 서버 쪽에서 코드를 작성할 때 사용하는 개념으로,
해당 예제 학습은 나중에 따로 포스팅할 예정이다.
그래도 제어문을 대상으로 Try-catch문의 원리를 미리 파악해두면 후에 공부할 때 도움이 될 것이다.
'웹 프로그래밍 > JavaScript' 카테고리의 다른 글
[JS] bind 메소드로 this 제어하기 (0) | 2022.09.09 |
---|---|
[JS] var, let, const 비교하기 (0) | 2022.08.27 |
[JS] DOM이란? - DOM tree 구조와 사용 이유 (0) | 2022.08.25 |
[JS] 호이스팅이란? - let, const, var에 대하여 (0) | 2022.08.21 |
[JS] innerHTML과 innerAdjacentHTML 비교하기 (0) | 2022.08.01 |