try catch문
try catch문은 실행중인 코드에 예외상황(오류)이 발생해도 프로그램이 종료되지 않고 실행 유지를 해주기 때문에 프로그램의 안정성을 높힐 수 있다. 일반적인 구조는 try 부분에 예외가 발생 할 수 있을 코드를 작성하고 catch 부분에 예외가 발생했을때 처리할 코드를 작성하여 준다. 간단한 예를 들어 실습을 진행해보자.
// try-catch문
try {
오류가 발생할 거 같은 코드 작성하는 곳
} catch (error) {
오류가 발생했을때 실행되는 코드를 작성하는 곳
}
trycatch.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div>
<input type="text" class="dev" />
<button onclick="myStr()">클릭</button>
<p class="message"></p>
</div>
</body>
<script src="./trycatch.js"></script>
</html>trycatch.js
function myStr() {
let devValue = document.querySelector(".dev").value;
try {
if (devValue == "") throw "숫자를 입력해주세요.";
if (isNaN(devValue)) throw "잘못 입력하였습니다. 숫자를 입력해주세요.";
} catch (error) {
document.querySelector(".message").innerHTML = error;
}
}
결과
- 공간이 비어있는 상태로 누르면 input 아래 글씨 출력
- 숫자가 아닌 문자열 입력시 input아래 글씨 출력
재귀함수
재귀함수는 함수가 자기자신은 호출하는 함수를 말한다. 자기자신을 반복적으로 호출하기 때문에 종료조건을 반드시 입력해 주어야한다.
function add(a) {
if (a < 5) {
add(a + 1);
console.log(a);
}
}
add(0);
재귀함수를 활용한 피보나치 수열 만들기
let fiArr = [];
function fibonacci(n) {
if (n < 2) return n;
return fibonacci(n - 1) + fibonacci(n - 2);
}
for (let i = 0; i < 20; i++) {
fiArr += fibonacci(i) + " ";
console.log(fibonacci(i));
if (i == 19) {
console.log(fiArr);
}
}
Promise 객체
비동기 처리를 위한 객체이다.
function testPromise(num) {
// 함수값에 resolve, reject 두가지 매개변수를 받음
// resolve() 함수는 처리가 완료되면 반환
// reject() 함수는 오류나면 반환
return new Promise(function (res, rej) {
try {
if (num > 10) rej({ date: "over" });
setTimeout(function () {
res(num + 10);
}, num * 1000);
} catch (error) {
rej(error);
}
});
}
testPromise(5)
.then(function (date) {
console.log(date);
// 데이터를 가져오고 처리할 구문을 작성
return testPromise(date);
})
// res를 실행하면 then() 메소드가 실행
.then(function (date) {
console.log(date);
})
// rej를 실행하면 catch() 메소드 실행
.catch(function (error) {
console.log(error);
});
async await
async await는 비동기 처리를 좀 더 간편하고 직관적으로 처리할 수 있게 해주는 문법으로 둘이 한쌍으로 붙어다니므로 같이 써야한다.
// 위에 썼던거 다시쓰기
function testPromise(num) {
// 함수값에 resolve, reject 두가지 매개변수를 받음
// resolve() 함수는 처리가 완료되면 반환
// reject() 함수는 오류나면 반환
return new Promise(function (res, rej) {
try {
if (num > 10) rej({ date: "over" });
setTimeout(function () {
res(num + 10);
}, num * 1000);
} catch (error) {
rej(error);
}
});
}
// async 와 await는 짝으로 붙어 다닌다. 같이써야함
async function asyncFun() {
try {
// await 뒤에 promise 객체
let temp = await testPromise(3);
// res나 rej이 처리될때까지 기다렸다 출력
console.log(temp);
temp = await testPromise(temp);
// await + promise = promise를 기다리고 resolve 값을 반환
console.log(temp);
} catch (error) {}
}
asyncFun();
728x90
'JavaScript' 카테고리의 다른 글
| [Javascript] class 알아보기 (0) | 2023.03.31 |
|---|---|
| [Javascript] 정규식 표현 (0) | 2023.03.30 |
| [Javascript] 생성자 함수, 구조분해할당을 활용한 묵찌빠 게임 만들기 (0) | 2023.03.29 |
| [Javascript] 슬라이드 만들기 (0) | 2023.03.27 |
| [Javascript] 구조분해할당 (0) | 2023.03.27 |
