JavaScript 함수가 자기 자신을 참조하기
JavaScript에서는 함수 내부에서 자기 자신의 이름을 그대로 호출할 수 있습니다. 이러한 기법을 재귀 호출(recursion)이라고 하며, 반복 작업이나 중첩된 구조를 처리할 때 유용하게 사용됩니다.
아래 예제는 printHello() 함수가 스스로를 재귀적으로 호출하여, 지정된 횟수만큼 "Hello World"를 화면에 출력하는 코드입니다.
예제
<!DOCTYPE html>
<html lang="en">
<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 {
font-size: 20px;
font-weight: 500;
color: blueviolet;
}
</style>
</head>
<body>
<h1>Referring JavaScript function from within itself</h1>
<div class="result"></div>
<br />
<button class="Btn">Click Here</button>
<h3>Click on the above button to call the printHello() function</h3>
<script>
let resEle = document.querySelector(".result");
let BtnEle = document.querySelector(".Btn");
function printHello(num) {
for (let i = 0; i < num; i++) {
resEle.innerHTML += "Hello World <br>";
printHello(--num);
}
}
BtnEle.addEventListener("click", () => {
printHello(3);
});
</script>
</body>
</html>코드 설명
printHello(num) 함수는 매개변수로 받은 값만큼 반복문을 실행하며, 각 반복마다 결과 영역에 "Hello World"를 추가하고 --num으로 값을 하나씩 감소시킨 후 자기 자신을 다시 호출합니다. 이처럼 함수가 자기 자신을 참조함으로써 재귀적인 동작이 가능해집니다.
버튼을 클릭하면 이벤트 리스너가 printHello(3)을 호출하여 재귀 호출이 시작됩니다.
실행 결과
페이지를 처음 열면 다음과 같은 초기 화면이 표시됩니다.
'Click Here' 버튼을 클릭하면 −
버튼을 클릭한 후에는 printHello() 함수의 재귀 호출에 의해 "Hello World" 문구가 여러 번 출력되는 것을 확인할 수 있습니다.