Ted's Codding study

Error - 구문 본문

JavaScript

Error - 구문

Ted93 2024. 5. 24. 12:27
HTML 코드 
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>자바스크립트 예외/오류</title>
</head>
<body>
  <script src="exception01.js"></script>
</body>
</html>

 

1. 구문 오류와 예외

오류(Error, 에러): 부정확하거나 유효하지 않은 동작

  1. 오류의 종류 : 프로그래밍 언어의 오류(2가지)
    • 프로그램 실행 전에 발생하는 "구문 오류"
    • 프로그램 실행 중에 발생하는 "런타임 오류(예외)"
  2. 구문 오류
    • 프로그램 코드를 작성할 때 발생하는 오류
    • 프로그램의 문법이 언어의 정의된 규칙을 따르지 않을 때 발생
    • EX) 괄호를 닫지 않거나, 잘못된 키워드를 사용하는 경우 등 : 구문 자체의 오류가 있으면 웹 브라우저가 코드를 분석 조차 하지 X >> 실행 X
  3. 런타임 오류(예외)
    • 프로그램의 실행 중에 발생하는 오류
    • 예측 가능한 비정상적인 조건 또는 예외적인 사건을 의미 : 코드가 순차적으로 실행되다가 오류가 위치하는 부분 이후에는 실행이 중단
    • EX) 파일을 찾을 수 없거나, 잘못된 입력이 주어지는 경우, 네트워크 연결 오류 등

 

2. 구문 오류 예제

SyntaxError 발생 - 구문 오류

  • 오류 자체에 어떤 파일의 어느 위치에서 오류가 발생했는지 명시
console.log('=== 구문 오류 예제 ===');
console.log('# 프로그램이 시작되었습니다!');
console.log('괄호를 닫지 않는 실수를 했습니다.';
  • 앞에 있던 정상적인 코드들 조차도 실행되지 않음

SyntaxError

 

3. 런타임 오류(예외) 예제

TypeError

  • 자바스크립트는 SyntaxError라고 출력되는 오류 이외의 모든 오류가 예외(런타임 에러)로 분류
  • ex) TypeError, ReferenceError, RangeError 등
console.log('=== 런타임 오류(예외) 예제 ===');
console.log('@ 프로그램이 시작되었습니다!');
console.rog('log를 rog로 잘못 입력하였습니다.');
console.log('런타임 오류 발생 이후의 코드는 실행되지 X');
  • 런타임 에러 이전 코드는 실행되고 이후 코드는 실행되지 않음

TypeError

 

4. JS 실행 중 발생하는 예외를 다루는 방법

1) 기본 예외 처리

  • 조건문을 사용해서 예외가 발생하지 않도록 지정
    • 권장하지 X
    • 로직의 복잡성이 증가
    • 아래 코드는 권장하지 않는 코드
document.addEventListener('DOMContentLoaded', () => {
  const h1 = document.querySelector('h1');
  // h1.textContent = '안녕하세요'; // Error - HTML에 h1요소가 존재하지 X
  if (h1) {
    h1.textContent = '안녕하세요';
  } else {
    console.log('h1 태그를 추출할 수 없습니다');
  }
  console.log('다음 문장을 실행합니다');
});
  • h1.textContent = '안녕하세요'; 를 실행하면 아래와 같은 에러 발생

TypeError

  • 에러 코드를 주석 처리하고 정상적으로 실행 된다면, 아래와 같이 출력 - 권장하지는 않지만 에러 처리가 잘 작동은 잘 되는 것을 확인

textContent

 

2) 고급 예외 처리

try catch finally 구문

  • try: 블록 내에서 실행된 코드는 예외 발생 여부를 감시 예외가 발생하면 즉시 실행이 중단되고 catch 블록으로 제어가 이동
  • catch: 예외가 발생했을 때 실행되는 블록 catch 블록에 전달되는 예외 객체를 통해 오류 정보를 얻는 것이 가능
  • finally: 예외 발생 여부와 관계없이 try 또는 catch 블록 실행 후 항상 실행 주로 자원을 정리하는 코드(예: 파일을 닫는 등)를 포함

try catch문 사용 전 예시

function riskyOperation() {
  // 50% 확률로 예외 발생
  if (Math.random() < 0.5) {
    throw new Error('Something went wrong!');
  }
  return 'Operation successful';
}

const result = riskyOperation();
console.log(result);

if문의 조건을 만족하면 아래처럼 에러가 나오면서 어플리케이션이 죽음

Error

 

if 문을 만족하지 않으면 정상적으로 작동이 됨

Error

try catch문 적용 예시

try {
  const result = riskyOperation();
  console.log(result);
  console.log('try블럭의 마지막 줄');
} catch (e) {
  // e: exception
  console.log('catch블럭의 마지막 줄');
} finally {
  console.log('finally 블럭의 마지막 줄');
}

try 구문에서 정상 작동한 경우

try-catch

 

에러가 발생해서 catch 문에서 에러를 캐치한 경우

try-catch

 

finally 구문을 사용하는 이유

function test() {
  try {
    console.log('A 위치입니다.');
    throw '예외 강제 발생';
  } catch (exception) {
    console.log('B 위치입니다.');
    return;
  }
  console.log('C 위치입니다.');
}

try 문에서 강제로 예외를 발생해서 무조건 catch 구문이 실행 되는 코드인데 return을 해준 경우 console.log(’C 위치입니다.’); 라는 해당 코드는 절대 실행 될 수 없는 코드이며 VSCode에서도 코드가 흐리게 처리된 것을 볼 수 있다.

finally

그래서 이 코드를 정상적으로 작동하게 하려면, Finally 구문을 사용해야 한다

 

아래 코드는 올바르게 수정된 예시

function sample() {
  try {
    console.log('A 위치입니다.');
    throw '예외 강제 발생';
  } catch (exception) {
    console.log('B 위치입니다.');
    return;
  } finally {
    console.log('C 위치입니다.');
  }
}

sample();

finally

 

노션으로 보고 싶다면?

https://short-echidna-b16.notion.site/Error-3e598d8ff58348ba925583e5a8d81d73?pvs=4

 

Error - 구문 | Notion

목차

short-echidna-b16.notion.site

 

저작자표시 비영리 변경금지
'JavaScript' Related Articles more