generator.throw() 메서드란?
JavaScript의 generator.throw() 메서드는 제너레이터 함수 내부의 yield 표현식에 에러를 전달하는 데 사용됩니다. 이 메서드가 호출되면 제너레이터는 마치 해당 지점에서 에러가 발생한 것처럼 실행을 재개하며, 그 결과로 done과 value 속성을 가진 객체를 반환합니다.
즉, 외부 코드에서 제너레이터 내부로 예외(exception)를 주입할 수 있어, 제너레이터 내부의 try...catch 블록에서 이를 처리할 수 있습니다.
generator.throw() 동작 방식
- 제너레이터가 일시 중단된
yield지점에서 에러를 발생시킴 - 제너레이터 내부에
try...catch블록이 있다면 해당 에러를 catch하여 계속 실행 가능 - catch 블록이 없다면 에러가 호출자에게 전파되고 제너레이터는 종료(
done: true)됨
예제 코드
다음은 JavaScript에서 generator.throw() 메서드를 사용하는 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result,.sample {
font-size: 18px;
font-weight: 500;
color: rebeccapurple;
}
.result {
color: red;
}
</style>
</head>
<body>
<h1>JavaScript의 generator.throw() 메서드</h1>
<div class="sample"></div>
<div class="result"></div>
<button class="Btn">숫자 표시</button>
<button class="Btn">에러 발생</button>
<h3>위 버튼을 클릭하여 숫자를 표시하거나 에러를 발생시켜 보세요</h3>
<script>
let BtnEle = document.querySelectorAll(".Btn");
let resEle = document.querySelector(".result");
let sampleEle = document.querySelector(".sample");
function* increment() {
let num = 0;
while (true) {
try {
yield num++;
}
catch (err) {
resEle.innerHTML = "Error = " + err + "<br>";
}
}
}
let inc = increment();
BtnEle[0].addEventListener("click", () => {
sampleEle.innerHTML = inc.next().value + " ";
});
BtnEle[1].addEventListener("click", () => {
inc.throw(new Error("Some error occured"));
});
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
'숫자 표시' 버튼을 여러 번 클릭한 경우 — 제너레이터의 next() 메서드가 호출될 때마다 숫자가 하나씩 증가하며 출력됩니다.
'에러 발생' 버튼을 클릭한 경우 — inc.throw(new Error(...)) 호출로 인해 제너레이터 내부의 catch 블록이 실행되고, 에러 메시지가 화면에 표시됩니다.
정리
generator.throw() 메서드는 제너레이터와 외부 코드 간의 양방향 통신을 가능하게 하는 강력한 도구입니다. next(value)가 데이터를 제너레이터로 전달한다면, throw(error)는 예외를 전달합니다. 이를 활용하면 비동기 작업 흐름 제어나 상태 머신 구현 시 에러 처리 로직을 더욱 유연하게 구성할 수 있습니다.