자바스크립트 예외 처리, How to Handle Errors

개발 및 관리/Javascript 2022. 3. 16. 10:50 posted by HighLighter
반응형

요즘 자바스크립트를 공부하고 있습니다. 자바스크립트에서 자바와 유사한 예외처리가 있습니다

1. 자바스크립트 예외 처리 - throw

function sum1(x, y) {
 return x + y;
};

function sum2(x, y) {
  if( typeof x !== 'number' || typeof y !== 'number') {
throw '숫자가 아닙니다.'
  }
 return x + y;
}

console.log(sum1(1, 2));
console.log(sum1('a', 2));

console.log(sum1(1, 2));
console.log(sum1('a', 2));

2. 자바스크립트 예외 처리 - try catch, Error 객체

--------------------------------------------------------------------

--2-1. 
function f2() {
  console.log('f2 start');
  console.log('f2 end');
}

function f1() {
  console.log('f1 start');
  f2();
  console.log('f1 end');
}

console.log('will : f1');
f1();
console.log('did : f1');

--------------------------------------------------------------------

--2-2.
function f2() {
  console.log('f2 start');
  //throw '에러';
  console.log('f2 end');
}

function f1() {
  console.log('f1 start');
  f2();
  console.log('f1 end');
}

console.log('will : f1');
f1();
console.log('did : f1');

--------------------------------------------------------------------
--2-3.
function f2() {
  console.log('f2 start');
  throw '에러';
  console.log('f2 end');
}

function f1() {
  console.log('f1 start');
  try {
    f2();
  } catch (e) {
    console.log(e);
  }
  console.log('f1 end');
}

console.log('will : f1');
f1();
console.log('did : f1');

--------------------------------------------------------------------
--2-4.
function f2() {
  console.log('f2 start');
  throw new Error('에러');
  console.log('f2 end');
}

function f1() {
  console.log('f1 start');
  f2();
  console.log('f1 end');
}

console.log('will : f1');
try {
  f1();
} catch (e) {
  console.log(e);
}

console.log('did : f1');

--2-5.
--------------------------------------------------------------------

<!DOCTYPE html>
<head>
  <title>Error Handling Basics</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="utf=8">
  <style>
      .box {
          width: 150px;
          height: 150px;
          border: 1px solid #000;
      }
  </style>
</head>

<body>
    <h1>Error Handing Basics</h1>
    <ul >
        <li>recovering form unexpected situations (errors)</li>
    </ul>
    <hr class="hr">
    <div id="myBox"></div>

    <script>
        function changeBackgroundColor(element, color) {
            element.style.backgroundColor = color;
        }

        const myBox = document.getElementById("myBox");
         
        try {
            changeBackgroundColor(myBox, "blue");
        } catch (e) {
            // console.log(e);
            // console.dir(e);
            alert("something went wrong. sorry about that.")
        } finally {
            console.log(20);
        }

        prompt("What is your name?");
    </script>
</body>


--------------------------------------------------------------------

How to Handle Errors - Basics of Error Handling in JavaScript - Tutorial

https://youtu.be/G8Jux_bsIXU

--------------------------------------------------------------------
3. 자바스크립트 예외 처리 - promise의 catch함수

--3-1.

function wait(sec) {
  return new Promise((resolve, reject) => {
setTimeout(() => {
  reject('error!');
}, sec * 1000);
  });
}

try {
  wait(3);
} catch (e) {
  console.error(e);
}

--------------------------------------------------------------------
--3-2.
function wait(sec) {
  return new Promise((resolve, reject) => {
setTimeout(() => {
  reject('error!');
}, sec * 1000);
  });
}

wait(3).catch( e => {
  console.log(e);
});

--------------------------------------------------------------------
--3-3.
function wait(sec) {
  return new Promise((resolve, reject) => {
setTimeout(() => {
  reject('error!');
}, sec * 1000);
  });
}

wait(3).catch( e => {
  console.log('1st catch', e);
});

--------------------------------------------------------------------
--3-4.
function wait(sec) {
  return new Promise((resolve, reject) => {
setTimeout(() => {
  reject('error!');
}, sec * 1000);
  });
}

wait(3)
  .catch( e => {
  console.log('1st catch', e);
})
  .catch( e => {
  console.log('2nd catch', e);
});

--------------------------------------------------------------------
--3-5.
function wait(sec) {
  return new Promise((resolve, reject) => {
setTimeout(() => {
  reject('error!');
}, sec * 1000);
  });
}

wait(3)
  .catch( e => {
  console.log('1st catch', e);
  throw e;
})
  .catch( e => {
  console.log('2nd catch', e);
});

--------------------------------------------------------------------
--3-6.
function wait(sec) {
  return new Promise((resolve, reject) => {
setTimeout(() => {
  reject('error!');
}, sec * 1000);
  });
}

wait(3)
  .then( () => {
  console.log('done!!!');
  },
  e => {
    console.log('1nd catch in Then', e);
  }
 )
  .catch( e => {
  console.log('2nd catch', e);
});

반응형

'개발 및 관리 > Javascript' 카테고리의 다른 글

ES6에 추가된 스펙, Class  (0) 2022.03.18
JavaScript 디버깅, Java 디버깅  (0) 2022.03.17
자바스크립트 클로저? 간단히 핵심만 파악하기  (0) 2022.03.15
자바스크립트 중급 강좌 : 140분 완성  (0) 2022.03.02
자바스트립트 기초 강의 - [프론트엔드 개발자 첫걸음] - 3시간 완성  (0) 2022.02.28
,

티스토리툴바