Vòng lặp while và do...while trong JavaScript

Trong lập trình, các vòng lặp được sử dụng để lặp lại một khối code. Ví dụ nếu bạn muốn hiển thị một đoạn văn bản 100 lần, thì bạn có thể sử dụng vòng lặp. Đây là một ví dụ đơn giản, chúng ta còn có thể làm được nhiều thứ hơn thế với các vòng lặp.

Trong hướng dẫn trước, các bạn đã được tìm hiểu về vòng lặp for trong JavaScript. Hôm nay, chúng ta sẽ tìm hiểu về vòng lặp while và do ... while nhé 😋.

Vòng lặp while trong JavaScript

Cú pháp của vòng lặp while là:

while (condition) {
    // phần thân vòng lặp while
}

Chúng ta cùng xem cách vòng lặp while hoạt động:

1. Vòng lặp while xử lý điều kiện bên trong dấu ngoặc đơn ().
2. Nếu điều kiện là true, khối code trong vòng lặp while được thực thi.
3. Sau khi chạy xong khối code trong {}, điều kiện được kiểm tra một lần nữa.
4. Quá trình này tiếp tục cho đến khi điều kiện là false.
5. Khi điều kiện được đánh giá là false, vòng lặp sẽ dừng lại.

Để tìm hiểu thêm về condition, các bạn có thể đọc bài viết Toán tử lôgic và So sánh trong JavaScript: Comparison và Logical Operators trong Javascript.

Cùng đến với các ví dụ để hiểu vòng lặp này hơn nhé.

Ví dụ 1:

// Hiển thị số từ 1 đến 10

let i = 1, n = 10; // Khởi tạo biến
// while loop từ i = 1 đến 10
while (i <= n) {
    console.log(i);
    i += 1;
}

Kết quả của ví dụ 1:

1
2
3
4
5
6
7
8
9
10

Cùng xem vòng lặp while ở ví dụ trên hoạt động thế nào nhé.

Ví dụ 2:

Trong ví dụ này ta sẽ tính tổng số dương nhập vào.

let sum = 0;

// Lấy số người dùng đã nhập
let number = parseInt(prompt('Nhập số tùy chọn: '));

while(number > 0) {
    sum += number;

    // gán lại cho number số người dùng đã nhập
    number = parseInt(prompt('Nhập số tùy chọn: '));
}

console.log(`Tổng các số bạn đã nhập là: ${sum}.`);

Kết quả của ví dụ trên.

Nhập số tùy chọn: 2
Nhập số tùy chọn: 4
Nhập số tùy chọn: 0
Tổng các số bạn đã nhập là: 6.

Sử dụng prompt() trong Javascript sẽ hiển thị một dialog để người dùng nhập một số.

Ở đây, parseInt() được sử dụng vì prompt() nhận input dưới dạng string. Lý do chúng ta cần chuyển giá trị nhập vào sang kiểu integer vì khi các chuỗi số được cộng vào, nó sẽ thực hiện cộng chuỗi. Ví dụ: '1' + '1' = '11'. Sử dụng parseInt() sẽ chuyển đổi một chuỗi số thành số.

Vòng lặp while tiếp tục chạy, và sẽ dừng khi người dùng nhập một số âm hoặc 0. Trong mỗi lần lặp, số do người dùng nhập được cộng vào biến sum.

Khi người dùng nhập một số âm hoặc 0. Vòng lặp kết thúc, Tổng sum sẽ hiển thị.

Vòng lặp do...while trong JavaScript

Cú pháp của vòng lặp do...while là:

do {
    // phần thân của vòng lặp
} while(condition)

do...while bạn có thể hiểu là thực hiện cái này khi điều kiện true. Nó sẽ dừng chạy khối code trong do khi điều kiện là false.

1. Phần thân của vòng lặp được thực thi lúc đầu. Sau đó, điều kiện (condition) được xem xét.
2. Nếu điều kiện kết quả là true, phần thân của vòng lặp bên trong câu lệnh do được thực thi lại.
3. Tiếp tục điều kiện được kiểm tra một lần nữa.
4. Nếu điều kiện là true, phần thân của vòng lặp bên trong câu lệnh do được thực thi lại.
5. Quá trình này tiếp tục cho đến khi điều kiện là false thì vòng lặp dừng lại.

Vòng lặp do ... while tương tự như vòng lặp while. Khác biệt duy nhất là trong vòng lặp do… while, phần thân của vòng lặp được thực thi ít nhất một lần.

Ví dụ 3:

// Hiện số từ 1 đến 5
let i = 1;
const n = 5;

// Vòng lặp do...while hiện số từ 1 đến 5
do {
    console.log(i);
    i++;
} while(i <= n);

Kết quả chúng ta được:

1
2
3
4
5

Cùng xem vòng lặp do...while ở ví dụ trên hoạt động thế nào nhé.

Ví dụ 4:

Trong ví dụ này ta sẽ tính tổng số tự nhiên nhập vào.

let sum = 0;
let number = 0

do {
    sum += number;
    // gán lại cho number số người dùng đã nhập
    number = parseInt(prompt('Nhập số tùy chọn: '));
} while(number >= 0)

console.log(`Tổng các số bạn đã nhập là: ${sum}.`);

Ta nhập thử một vài số và xem kết quả.

Nhập số tùy chọn: 2
Nhập số tùy chọn: 4
Nhập số tùy chọn: 0
Nhập số tùy chọn: -3
Tổng các số bạn đã nhập là: 6.

Ở ví dụ trên, vòng lặp do ... while tiếp tục cho đến khi người dùng nhập một số âm. Khi kiểm tra số vừa nhập là số âm, vòng lặp sẽ kết thúc, số âm lúc này không được thêm vào biến sum.

Nhập số tùy chọn: -3
Tổng các số bạn đã nhập là: 0.

Phần thân của vòng lặp do ... while chỉ chạy một lần nếu người dùng nhập một số âm. Vì lần đầu tiên vòng lặp do ... while sẽ không kiểm tra điều kiện nên phần thân được thực thi ngay.

Infinite Loop

Nếu điều kiện của vòng lặp luôn là true, vòng lặp sẽ chạy vô hạn (cho đến khi bộ nhớ đầy).

Ví dụ:

// infinite while loop
while(true){
    // body of loop
}

// infinite do...while loop
const text = 'homiedev';
do {
   // body of loop
} while(text == 'homiedev')

Khác nhau giữa for vs while Loop trong Javascript

Vòng lặp for thường được sử dụng khi biết trước số lần lặp.

Ví dụ:

// Lặp 5 lần
for (let i = 1; i <= 5; ++i) {
   // body of loop
}

Và vòng lặp while và do ... while thường được sử dụng khi chúng ta chưa cần biết trước số lần lặp.

Hy vọng sau bài viết này các bạn sẽ hiểu hơn về vòng lặp while và do...while. Chúc các bạn học tốt ^^.