Lỗi vòng lặp trong JS

Vòng lặp trong JS nói riêng và trong ngôn ngữ lập trình nói chung có cấu trúc như thế này:

(điều kiện) {thỏa mãn điều kiện thì làm việc abc xyz; làm điều gì đó để thay đổi điều kiện}

Nếu không thỏa mãn điều kiện thì không làm gì (tức là không làm việc abc xyz).

Ví dụ về vòng lặp for:

<p id="demo"></p>

<script>

let text = "";

for (let i = 0; i < 10; i++) {
  text += i + "<br>";
}

document.getElementById("demo").innerHTML = text;

</script>

• Điều kiện: i khởi đầu bằng 0, và phải nhỏ hơn 10;
• Thay đổi điều kiện là sau mỗi vòng lặp, i tăng lên một đơn vị, thể hiện bằng câu lệnh i++
• text += i + "<br>"; chính là việc abc xyz;

Giờ nếu bạn thay đổi điều kiện của i++ thành i=9, vòng lặp sẽ biến thành vô tận vì giá trị đó lúc nào cũng nhỏ hơn 10, và nó sẽ gây ra lỗi crash cho trình duyệt (đơ).

<p id="demo"></p>

<script>

let text = "";

for (let i = 0; i < 10; i=9) {
  text += i + "<br>";
}

document.getElementById("demo").innerHTML = text;

</script>

Một trường hợp khác cũng gây lỗi vòng lặp cho dù điều kiện thay đổi bạn có thiết lập đúng, đó là dù nó thay đổi, nó không bao giờ đạt đến ngưỡng kết thúc.

Chẳng hạn:

<p id="demo"></p>

<script>

let text = "";

for (let i = 0; i == "a"; i++) {
  text += i + "<br>";
}

document.getElementById("demo").innerHTML = text;

</script>

Cái điều kiện kết thúc ở trên i == "a" sẽ không bao giờ xảy ra, vì i là dạng số, trong khi a là string.

Một ví dụ nữa khiến cho vòng lặp kết thúc ngay từ lúc bắt đầu đó là điều kiện khởi động của nó đã thỏa mãn ngay từ lúc ban đầu khi so sánh với điều kiện kết thúc:

<p id="demo"></p>

<script>

let text = "";

for (let i = 10; i > 7; i++) {
  text += i + "<br>";
}

document.getElementById("demo").innerHTML = text;

</script>

Ở trên điều kiện khởi động i = 10 đã thỏa mãn ngay lập tức điều kiện kết thúc i = 7 rồi, nên sẽ không có vòng lặp nào được thực hiện cả.

---

Ví dụ về vòng lặp dùng While cho kết quả tương tự với lệnh trên:

<p id="demo"></p>

<script>

let text = ""; let i = 0;
while (i < 10) {
  text += i + "<br>";
  i++;
}

document.getElementById("demo").innerHTML = text;

</script>

Nó sẽ show ra số từ 0 tới 9 có xuống dòng như thế này khi được viết đúng:

0
1
2
3
4
5
6
7
8
9

Ở đây chúng ta cũng thấy là có giá trị khởi động, giá trị điều kiện kết thúc, và sự thay đổi điều kiện sau mỗi vòng lặp.

Nó cũng gặp các lỗi giống vòng lặp for khi bạn phá vỡ cấu trúc so sánh logic của biến điều kiện.