티스토리 뷰

Language/JavaScript

[혼공자] Ch8 -1. 구문 오류와 예외

soobin Choi 2022. 11. 28. 23:41

syntax error 구문 오류

문법적으로 유효하지 않은 코드를 해석하려고 시도할 때 발생하는 오류. 프로그램 실행 전 발생하는 오류로 구문 오류가 있으면 웹 브라우저가 코드를 분석하지 못하므로 실행되지 않음. 오류의 위치를 'HTML.Page.html:6' 이렇게 알려주므로 쉽게 해결할 수 있음.

 

console.log('괄호를 안닫음...'

실행하면

**SyntaxError: missing ) after argument list**

exception 예외 / runtime error 런타임 오류

SyntaxError 외의 모든 에러 TypeError, ReferenceError, RangeErrorr가 예외로 분류됨, 프로그램 실행 중 발생.

- TypeError 

값이 기대하던 자료형이 아니라서 연산을 할 수 없을 때 발생하는 오류

  • 함수에 전달된 피연산자 또는 인수가 해당 연산자나 함수가 예상하는 타입과 호환되지 않거나,
  • 변경할 수 없는 값을 수정하려고 하거나,
  • 부적절한 방법으로 값을 사용하려고 할 때.

- ReferenceError

현재 범위에서 존재하지 않거나 초기화되지 않은 변수를 참조했을 때 발생하는 에러.

- RangeErrorr

어떤 값이 집합에 없거나 허용되는 범위가 아닐 때. 어떤 값을 그 값이 포함되는 범위를 허용하지 않는 함수에 인수로 전달하려 할 때

기본예외처리

예외가 발생하지 않게 사전에 해결하는 것

<body>
  
</body>
<script>
  const h1 = document.querySelector('h1')
  h1.textContent = '안녕하세요.'
</script>

<body>
  
</body>
<script>
  const h1 = document.querySelector('h1')
  
  // h1이 존재하면 true로 변환되고, 존재하지 않으면 false로 변환된다.
  if(h1) {
    h1.textContent = '안녕하세요.'
  } else {
    console.log('h1 태그를 추출할 수 없습니다.')
  }
</script>

고급예외처리

try catch finally

실행할 코드블럭을 표시하고 예외(exception)가 발생(throw)할 경우의 응답을 지정

try {
	// 예외가 발생할 가능성이 있는 코드
} catch (exception) {
	// 예외가 발생했을 때 실행할 코드
} finally {
	// 무조건 실행할 코드
}

finally 구문은 필요한 경우에만 사용함. catch나 finally 블록은 생략 가능. 하지만 try 블록은 catch나 finally 중 적어도 하나 이상의 블록과 함께 사용되어야만 함.

*try, catch, finally 블록은 모두 중괄호로 시작하여 중괄호로 끝남. 이들 중괄호는 필수로 요구되는 문법의 일부로서 생략할 수 없음.

 

❗️finally 구문은 예외 발생 여부와 상관없이 무조건 실행됨!

예외 객체

try catch 구문에서 catch의 괄호 안에 입력하는 식별자를 예외 객체 라고 한다. 일반적으로는 e 또는 exception 식별자를 사용한다. 예외 객체의 속성은 브라우저마다 다른데 공통적으로 사용하는 것은 아래의 3개가 있다.

속성 이름 설명
message 예외 메세지
description 예외 설명
name 예외 이름

이러한 식별자는 오직 catch 블록 내부에서만 존재하는 지역변수. 이 식별자를 통해, 발생한 예외의 정보를 알아낼 수 있음

https://webclub.tistory.com/71

1.  try catch 구문 내부에서 return 키워드를 만날 때

ㄱ. try catch

const test = () => {
  try {
    console.log("A 위치");

    // throw 키워드는 예외를 강제로 발생시킨다.
    throw "예외 강제 발생";
  } catch (exception) {
    console.log("B 위치");
    return;
    // catch 블록은 throw 명령문이 던진 예외의 값을 식별자 exception에 담았음
  }
  console.log("C 위치");
};

// 함수 호출
test();

 

A 위치
B 위치

try...catch는 성공하길 바라는 코드(try 블록)가 만약 실패하면 catch로 제어권을 넘겨야 할 때 사용.

try 블록의 명령문 중 하나에서 예외를 던지면, 실행 제어권은 그 즉시 catch 블록으로 넘어간다.

try 블록 내에서 예외가 발생하지 않았으면 catch 블록은 실행되지 않는다.

catch 블록에 진입해야 예외의 식별자를 생성하고, catch 블록의 밖으로 나가면 식별자를 더 이상 유지하지 않는다.

즉, catch 블록의 실행이 끝나면 예외 식별자에 접근할 수 없다.

 

ㄴ. try catch finally

const test = () => {
  try {
    console.log("A 위치");
    throw "예외 강제 발생";
  } catch (exception) {
    console.log("B 위치");
    return;
  } finally {
    console.log("C 위치");
  }
};

// 함수 호출
test();

실행하면

A 위치
B 위치
C 위치

첫번째 코드는 "A 위치 B 위치" 만 출력한다. return 키워드를 사용해 함수를 벗어났으므로 "C 위치" 라는 글자를 출력하지 않는다.

두번째 코드는 "A 위치 B 위치 C 위치" 를 모두 출력한다. 이는 finally 구문을 반드시 실행한다는 특성 때문이다.

 

https://codevang.tistory.com/211

 

메소드 내 예외처리(try-catch-finally)에서의 리턴 처리

1. try 구문 내에서 리턴에 도달했을 경우 try 내에서 리턴에 정상적으로 도달하였으므로, 리턴시킬 값을 임시 저장한 뒤 바로 finally 문을 최종 실행시키고 메소드를 종료합니다. 실제 리턴은 finall

codevang.tistory.com

https://milkye.tistory.com/367

 

[Java] try-catch-finally 반환값(return) 이해하기

코드를 작성하다 보면 예외처리를 위해 try-catch 구문을 굉장히 많이 사용 한다. 그러다 특별한 경우에 finally를 사용하게 되는데 만약 이 세 곳에 다 return 값이 있다면? 어떤 구문에 있는게 반환이

milkye.tistory.com

2.  try catch 구문 내부에서 break 또는 continue 키워드를 만날 때

var i = 0, total = 0;
while (i < a.length) {
	try {
		if(typeof a[i] != 'number' || isNaN(a[i])) { // 만일 이것이 숫자가 아니라면
			continue; // 이 루프의 다음 반복으로 넘어간다.
		}
		total += a[i]; // 숫자라면 total에 이 숫자를 더한다.
	} finally {
		i++; // 위에서 continue 를 사용했지만 무조건 i를 증가시키도록 한다.
	}
}

try와 finally는 catch가 없어도 함께 쓰일 수 있습니다.

이러한 경우 try 절에서 try, continue, return 문 등이 실행된 것과 관계없이, finally 블록은 그저 무조건 실행이 보장되는 뒷정리 코드의 역할을 하게 됩니다.

예를 들어 다음의 코드에서는 루프 카운터 변수가 정상적으로 증가될 수 있게 try/finally 문을 사용하고 있습니다.

설사 continue 문에 의해 루프 반복이 갑자기 끝났다 하더라도 루프 카운터 변수는 증가되는 코드입니다.

 

https://webclub.tistory.com/71

 

예외 처리 - throw 및 try/catch/finally

throw & try/catch/finally(Exception Handling) 이 글에서는 예외 처리 방식에 대해 알아봅니다. 프로그램이 실행되는 동안 문제가 발생하면 프로그램이 자동으로 중단됩니다. 이럴 경우에 프로그램이 대처

webclub.tistory.com

 

저작자표시 비영리 변경금지

'Language > JavaScript' 카테고리의 다른 글

[혼공자] Ch 10-1 ~ 10-2 리액트  (0) 2022.12.11
[Js] JavaScript의 ES란?, ES5/ES6 문법 차이  (0) 2022.11.27
[혼자 공부하는 자바스크립트] Ch6  (0) 2022.11.22