ฟังก์ชันใน JavaScript สามารถเรียกตัวเองได้ ซึ่งเรียกว่า Recursion หรือการทำซ้ำแบบเรียกตัวเอง เทคนิคนี้เหมาะสำหรับปัญหาที่สามารถแบ่งเป็นย่อยได้ในรูปแบบเดียวกัน
ตัวอย่างโค้ด
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Recursion Demo</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>การอ้างอิงฟังก์ชัน JavaScript จากภายในตัวมันเอง</h1>
<div class="result"></div>
<br />
<button class="Btn">คลิกที่นี่</button>
<h3>คลิกปุ่มด้านบนเพื่อเรียกฟังก์ชัน printHello()</h3>
<script>
const resEle = document.querySelector(".result");
const BtnEle = document.querySelector(".Btn");
function printHello(num) {
for (let i = 0; i < num; i++) {
resEle.innerHTML += "Hello World <br>";
printHello(--num); // เรียกตัวเองพร้อมลดค่า num
}
}
BtnEle.addEventListener("click", () => {
printHello(3);
});
</script>
</body>
</html>⚠️ ข้อควรระวังสำคัญ
- ตัวอย่างนี้มี Base Case ไม่ชัดเจน อาจทำให้เกิด Stack Overflow (ลูปไม่มีที่สิ้นสุด)
- Recursion ที่ถูกต้องควรมีเงื่อนไขหยุดชัดเจน เช่น:
function printHello(num) { if (num <= 0) return; // Base case resEle.innerHTML += "Hello World <br>"; printHello(num - 1); // Recursive call }
ผลลัพธ์
แสดง "Hello World" หลายบรรทัด (แต่โค้ดต้นฉบับมีปัญหา logic อาจทำงานไม่ถูกต้อง)
