Kịch bản thuyết trình: Slides 97, 98, 99, 100

Mình tiếp tục với slide 97, 98, 99 và 100 về JavaScript Loops.

Loop (Vòng lặp) là gì?

Loop (vòng lặp) = cách để chạy lặp lại một khối code nhiều lần.

Giúp tiết kiệm công sức thay vì copy/paste code nhiều lần.

Thường dùng khi bạn cần xử lý danh sách dữ liệu, mảng, hoặc công việc lặp lại.

Ví dụ đời thường: nếu bạn muốn đếm từ 1 đến 5, thay vì viết console.log(1)... console.log(5), bạn có thể dùng vòng lặp.

Các loại vòng lặp chính trong JavaScript

a) Vòng lặp for

Dùng khi biết số lần lặp cụ thể.

Cú pháp:

for (initialization; condition; increment) {
    // 実施するコード
}

Trong đó:

initialization (Khởi tạo biến đếm): Đây là bước đặt giá trị bất đầu cho biến đếm. Phần này chỉ được chạy một lần duy nhất, ngay khi vòng lặp bắt đầu.
condition (Điều kiện lặp): Trước mỗi lần chạy, JavaScript sẽ kiểm tra điều kiện này. Nếu true → chạy code trong { }. Nếu false → vòng lặp dừng lại.
increment (Cập nhật biến đếm): Sau mỗi lần chạy xong một vòng lặp, sẽ thực hiện phần này. Thường dùng để tăng hoặc giảm biến đếm.

Ví dụ:

for (let i = 0; i < 5; i++) {
    console.log(i); // 0 → 4
}

Giải thích ví dụ trên:

let i = 0 → khởi tạo biến đếm i và gán giá trị là 0 (nghĩa là bắt đầu từ 0). Đây sẽ là biến đếm dùng để điều khiển vòng lặp.
i < 5 → đây là điều kiện lặp. Trước mỗi vòng, chương trình sẽ kiểm tra: nếu i vẫn còn nhỏ hơn 5 thì tiếp tục lặp; nếu không thì dừng.
i++ → tăng i sau mỗi vòng lặp. i++ là cách viết tắt của i = i + 1. Sau mỗi vòng, biến i được tăng thêm 1.

Quy trình lặp chi tiết:

Lần 1: i = 0 → kiểm tra 0 < 5 ✅ đúng → in ra 0.
Lần 2: i tăng thêm 1, nghĩa là vòng này i = 1 → kiểm tra 1 < 5 ✅ đúng → in ra 1.
Lần 3: i = 2 → kiểm tra 2 < 5 ✅ đúng → in ra 2.
Lần 4: i = 3 → kiểm tra 3 < 5 ✅ đúng → in ra 3.
Lần 5: i = 4 → kiểm tra 4 < 5 ✅ đúng → in ra 4.
Lần 6: i = 5 → kiểm tra 5 < 5 ❌ sai → vòng lặp dừng.

Kết quả output sau cùng: 0 1 2 3 4

b) Vòng lặp while

Dùng khi không biết trước số lần lặp, chỉ biết điều kiện lặp.

Ví dụ:

let i = 0;
while (i < 5) {
    console.log(i);
    i++;
}

let i = 0; : Khai báo biến i và gán giá trị ban đầu là 0.
while (i < 5) : Đây là điều kiện lặp. Trước mỗi vòng, JavaScript kiểm tra: i < 5 có đúng không?
Nếu true → chạy code trong { }. Nếu false → dừng vòng lặp.
Kết quả output cuối cùng: 0 1 2 3 4

c) Vòng lặp do...while

Cũng tương tự while, nhưng có 1 điểm khác so với while, đó là ở do...while khối code trong {} sẽ được chạy trước kể cả khi điều kiện sai, rồi sau đó mới kiểm tra điều kiện của while.

Ví dụ:

let i = 1;
do {
    console.log("Number " + i);
    i++;
} while (i <= 5);

Với ví dụ này thì quá trình chạy chi tiết sẽ là như sau:

Lần 1: i = 1 → chạy code trong "do" trước → in "Number 1" → ở bước tăng i++ sẽ tăng i thành 2 → làm "while" : kiểm tra 2 <= 5 → true → tiếp tục đến lần 2 làm "do" trước rồi mới tới "while".
Lần 2: i = 2 → in "Number 2" → tăng i thành 3 → kiểm tra 3 <= 5 → true .... tiếp tục cho đến khi false → dừng vòng lặp.

Kết quả output cuối cùng: Number 1 ~ Number 5

d) Vòng lặp for...of (dùng cho Array, String,...)

Lặp qua từng phần tử trong array hoặc string.

Ví dụ:

const fruits = ["apple", "banana", "mango"];
for (let fruit of fruits) {
    console.log(fruit); // apple, banana, mango
}

e) Vòng lặp for...in (dùng cho Object)

Lặp qua key của object.

Ví dụ:

const person = { name: "Thu", age: 25, city: "Hochiminh" };
for (let key in person) {
    console.log(key + ":", person[key]);
    // name: Thu, age: 25, city: Hochiminh
}

Các vòng lặp khác vui lòng tham khảo thêm tại w3school.

Như vậy là mình đã trình bày xong về các loại vòng lặp chính trong JavaScript.