Cách sử dụng vòng lặp while trong JavaScript

Javascript căn bản | 11/03/2025 by Học Javascript

Vòng lặp là một trong những khái niệm quan trọng trong lập trình giúp tự động hóa các tác vụ lặp đi lặp lại. Trong JavaScript, ngoài các vòng lặp phổ biến như for và forEach, vòng lặp while đóng vai trò quan trọng khi cần thực thi một khối lệnh liên tục miễn là một điều kiện nào đó còn đúng.

Vòng lặp while đặc biệt hữu ích khi số lần lặp chưa xác định trước, chẳng hạn như chờ người dùng nhập đúng dữ liệu hoặc duyệt qua dữ liệu đến khi đạt một trạng thái mong muốn. So với for, vòng lặp while linh hoạt hơn nhưng cũng đòi hỏi lập trình viên phải cẩn thận để tránh rơi vào vòng lặp vô hạn.

Bài viết này sẽ giúp bạn hiểu rõ cú pháp, cách sử dụng vòng lặp while trong JavaScript, cũng như các lưu ý quan trọng để tránh lỗi khi sử dụng.

Vòng lặp while trong JavaScript

Vòng lặp `while` trong JavaScript là một loại vòng lặp giúp thực thi một khối lệnh lặp đi lặp lại miễn là một điều kiện nào đó còn đúng (`true`). Khi điều kiện trở thành `false`, vòng lặp sẽ dừng lại.

Cấu trúc chung của vòng lặp while:

while (điều_kiện) {
    // Khối lệnh sẽ được thực thi nếu điều_kiện là true
}

Trước khi thực thi khối lệnh, JavaScript kiểm tra điều kiện.
Nếu điều kiện là true, khối lệnh sẽ chạy.
Sau khi thực thi xong, điều kiện được kiểm tra lại.
Nếu điều kiện vẫn là true, vòng lặp tiếp tục, nếu false, vòng lặp kết thúc.

Ví dụ minh họa:

let count = 1;
while (count <= 5) {
    console.log("Lần lặp thứ: " + count);
    count++; // Tăng giá trị count để tránh lặp vô hạn
}

Kết quả:

Lần lặp thứ: 1  
Lần lặp thứ: 2  
Lần lặp thứ: 3  
Lần lặp thứ: 4  
Lần lặp thứ: 5

Ở đây, vòng lặp tiếp tục chạy cho đến khi count > 5, khi đó điều kiện trở thành false và vòng lặp kết thúc.

Khi nào nên sử dụng while thay vì for?

Mặc dù vòng lặp for có thể thực hiện hầu hết các tác vụ lặp, nhưng while lại phù hợp hơn trong một số trường hợp nhất định:

Khi số lần lặp chưa xác định trước

Nếu bạn không biết trước số lần lặp, nhưng chỉ muốn lặp cho đến khi một điều kiện nào đó sai (false), thì while là lựa chọn tốt.
Ví dụ: Chờ người dùng nhập đúng dữ liệu:

let input;
while (input !== "yes") {
    input = prompt("Nhập 'yes' để tiếp tục:");
}
console.log("Bạn đã nhập đúng!");

Ở đây, vòng lặp tiếp tục chạy cho đến khi người dùng nhập "yes", vì số lần nhập không xác định trước, nên while là lựa chọn tốt hơn for.

Khi điều kiện lặp phụ thuộc vào một sự kiện bên ngoài

Ví dụ: Lặp cho đến khi nhận được phản hồi từ server hoặc người dùng bấm một nút.

Khi chỉ cần kiểm tra điều kiện đơn giản mà không cần biến đếm

Vòng lặp for thường đi kèm với biến đếm (i), trong khi while phù hợp hơn cho những điều kiện đơn giản.

So sánh while, for và do...while

Tiêu chí	`while`	`for`	`do...while`
Sử dụng khi	Không biết trước số lần lặp	Biết trước số lần lặp	Muốn chạy ít nhất một lần
Cách kiểm tra điều kiện	Trước khi thực thi khối lệnh	Trước khi thực thi khối lệnh	Sau khi thực thi khối lệnh
Cú pháp	`while (condition) { code }`	`for (init; condition; update) { code }`	`do { code } while (condition);`
Ưu điểm	Linh hoạt, phù hợp cho vòng lặp phụ thuộc điều kiện	Rõ ràng, dễ kiểm soát với biến đếm	Đảm bảo khối lệnh chạy ít nhất một lần
Nhược điểm	Dễ gây vòng lặp vô hạn nếu quên cập nhật điều kiện	Không linh hoạt khi không cần biến đếm	Có thể chạy dư một lần nếu không kiểm soát tốt

Ví dụ so sánh thực tế:

Sử dụng for khi biết số lần lặp trước:

for (let i = 0; i < 5; i++) {
    console.log("Lần lặp thứ: " + (i + 1));
}

Dùng for khi có biến đếm (i) và số lần lặp xác định trước (5 lần).

Sử dụng while khi số lần lặp không xác định:

let number = 0;
while (number < 10) {
    number = Math.floor(Math.random() * 20); // Sinh số ngẫu nhiên từ 0-19
    console.log("Số hiện tại: " + number);
}

Không biết khi nào số ngẫu nhiên sẽ đạt >= 10, nên while là lựa chọn phù hợp.

Sử dụng do...while để đảm bảo chạy ít nhất một lần:

let number;
do {
    number = Math.floor(Math.random() * 20);
    console.log("Số đã tạo: " + number);
} while (number < 10);

Dù số ban đầu đã lớn hơn 10, vòng lặp vẫn chạy ít nhất một lần.

Cú pháp của vòng lặp while trong JavaScript

Cấu trúc chung của vòng lặp while

Vòng lặp while trong JavaScript có cú pháp đơn giản như sau:

while (điều_kiện) {
    // Khối lệnh sẽ thực thi nếu điều_kiện là true
}

điều_kiện: Một biểu thức điều kiện trả về giá trị true hoặc false.
Khối lệnh bên trong {}: Chạy khi điều kiện là true.
Khi nào vòng lặp dừng? Khi điều kiện trở thành false.

Giải thích cách hoạt động của vòng lặp while

Bước 1: Kiểm tra điều kiện: Nếu true, tiếp tục thực hiện khối lệnh.
Bước 2: Thực thi khối lệnh bên trong {}.
Bước 3: Quay lại kiểm tra điều kiện lần nữa. Nếu true, tiếp tục lặp lại bước 2.
Bước 4: Khi điều kiện false, vòng lặp dừng lại và chương trình tiếp tục chạy dòng lệnh tiếp theo.

Lưu ý quan trọng:

Nếu điều kiện ban đầu là false, vòng lặp không chạy lần nào.
Nếu không cập nhật điều kiện bên trong vòng lặp, chương trình có thể bị rơi vào vòng lặp vô hạn.

Ví dụ đơn giản minh họa

Ví dụ 1: Đếm từ 1 đến 5

let count = 1;

while (count <= 5) { 
    console.log("Lần lặp thứ: " + count);
    count++; // Tăng biến đếm để tránh vòng lặp vô hạn
}

Kết quả:

Lần lặp thứ: 1  
Lần lặp thứ: 2  
Lần lặp thứ: 3  
Lần lặp thứ: 4  
Lần lặp thứ: 5

Giải thích:

Ban đầu count = 1, điều kiện count <= 5 là true, nên khối lệnh chạy.
count++ tăng count lên mỗi lần lặp, cho đến khi count bằng 6, điều kiện false, vòng lặp dừng lại.

Ví dụ 2: Vòng lặp chạy đến khi tìm thấy số chẵn ngẫu nhiên

let number = 1;

while (number % 2 !== 0) {  
    number = Math.floor(Math.random() * 10) + 1; // Sinh số ngẫu nhiên từ 1-10
    console.log("Số tạo ra: " + number);
}

Kết quả (mỗi lần chạy sẽ khác nhau):

Số tạo ra: 3  
Số tạo ra: 7  
Số tạo ra: 4

Giải thích:

Vòng lặp sẽ tiếp tục tạo số ngẫu nhiên cho đến khi tìm thấy một số chẵn (number % 2 === 0).
Do số ngẫu nhiên có thể là chẵn ngay từ đầu, vòng lặp có thể chạy ít hoặc nhiều lần.

Ví dụ 3: Vòng lặp vô hạn (lỗi phổ biến)

let x = 1;

while (x > 0) {
    console.log("Vòng lặp vô hạn!");
}

Lỗi: Điều kiện x > 0 luôn đúng, vì x không thay đổi bên trong vòng lặp, dẫn đến vòng lặp chạy mãi mãi và treo chương trình!

Cách khắc phục: Cập nhật biến x bên trong vòng lặp để điều kiện có thể trở thành false.

let x = 5;

while (x > 0) {
    console.log("Giá trị của x: " + x);
    x--; // Giảm giá trị x để vòng lặp kết thúc
}

Kết quả:

Giá trị của x: 5  
Giá trị của x: 4  
Giá trị của x: 3  
Giá trị của x: 2  
Giá trị của x: 1

Vòng lặp sẽ kết thúc khi x giảm xuống 0.

Sử dụng vòng lặp while trong các tình huống trong JavaScript

Vòng lặp while rất linh hoạt và phù hợp với các tình huống mà chúng ta không biết trước số lần lặp cụ thể. Dưới đây là một số trường hợp thường gặp khi sử dụng while.

Lặp với điều kiện dừng cụ thể

Vòng lặp while rất hữu ích khi chúng ta cần lặp lại một thao tác cho đến khi đạt một điều kiện cụ thể, mà không biết trước số lần lặp.

Ví dụ: Lặp cho đến khi một số đạt giá trị mong muốn

let target = 10;
let number = 0;

while (number < target) {
    number = Math.floor(Math.random() * 20); // Sinh số ngẫu nhiên từ 0-19
    console.log("Số tạo ra: " + number);
}
console.log("Đã đạt hoặc vượt qua " + target);

Giải thích:

Mỗi lần lặp, một số ngẫu nhiên được tạo ra.
Vòng lặp chỉ dừng lại khi số đó >= 10.
Do số ngẫu nhiên có thể lớn ngay từ đầu, số lần lặp có thể thay đổi.

Kết quả (mỗi lần chạy khác nhau):

Số tạo ra: 3  
Số tạo ra: 7  
Số tạo ra: 11  
Đã đạt hoặc vượt qua 10

Lặp với biến đếm

Vòng lặp while có thể dùng như một vòng for, nhưng linh hoạt hơn khi điều kiện có thể thay đổi bên trong vòng lặp.

Ví dụ: Đếm từ 1 đến 5 bằng `while`

let count = 1;

while (count <= 5) {
    console.log("Lần lặp thứ: " + count);
    count++; // Cập nhật biến đếm
}

Kết quả:

Lần lặp thứ: 1  
Lần lặp thứ: 2  
Lần lặp thứ: 3  
Lần lặp thứ: 4  
Lần lặp thứ: 5

So sánh với vòng lặp for:
Với for, đoạn code trên có thể được viết gọn hơn:

for (let count = 1; count <= 5; count++) {
    console.log("Lần lặp thứ: " + count);
}

Xử lý vòng lặp vô hạn và cách tránh

Một trong những lỗi phổ biến khi dùng while là vòng lặp không bao giờ dừng, khiến chương trình bị treo.

Ví dụ: Vòng lặp vô hạn do quên cập nhật điều kiện

let x = 1;

while (x > 0) {  
    console.log("Vòng lặp không bao giờ kết thúc!");
}

Lỗi:

Điều kiện x > 0 luôn đúng vì x không thay đổi.
Kết quả: Vòng lặp chạy mãi, gây treo chương trình.

Cách khắc phục: Cập nhật x bên trong vòng lặp.

let x = 5;

while (x > 0) {
    console.log("Giá trị của x: " + x);
    x--; // Giảm giá trị x để vòng lặp dừng
}

Kết quả:

Giá trị của x: 5  
Giá trị của x: 4  
Giá trị của x: 3  
Giá trị của x: 2  
Giá trị của x: 1

Lưu ý:

Luôn đảm bảo điều kiện có thể trở thành false.
Kiểm tra kỹ biến đếm hoặc điều kiện dừng.

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

Vòng lặp do...while là một biến thể của while, nhưng có điểm khác biệt quan trọng:
Vòng lặp do...while luôn thực thi ít nhất một lần, ngay cả khi điều kiện không đúng ngay từ đầu.

Sự khác biệt giữa while và do...while

Vòng lặp	Cách hoạt động	Điểm khác biệt chính
`while`	Kiểm tra điều kiện trước khi chạy	Nếu điều kiện sai ngay từ đầu, vòng lặp sẽ không chạy lần nào
`do...while`	Chạy ít nhất một lần, sau đó mới kiểm tra điều kiện	Luôn thực thi ít nhất một lần, ngay cả khi điều kiện sai

Cú pháp vòng lặp do...while

do {
    // Khối lệnh được thực thi ít nhất một lần
} while (điều kiện);

Điểm quan trọng:

Đầu tiên, khối lệnh bên trong do chạy một lần.
Sau đó, kiểm tra điều kiện trong while().
Nếu điều kiện đúng, vòng lặp tiếp tục.
Nếu điều kiện sai, vòng lặp dừng ngay lập tức.

Ví dụ minh họa while vs do...while

Ví dụ 1: So sánh `while` và `do...while` khi điều kiện sai ngay từ đầu

Sử dụng while (không chạy vì điều kiện sai từ đầu)

let count = 10;

while (count < 5) {  
    console.log("Giá trị của count: " + count);
    count++;
}
console.log("Vòng lặp while kết thúc");

Kết quả: Không có gì hiển thị vì count < 5 ngay từ đầu không đúng.

Sử dụng do...while (chạy ít nhất một lần dù điều kiện sai)

let count = 10;

do {
    console.log("Giá trị của count: " + count);
    count++;
} while (count < 5);

console.log("Vòng lặp do...while kết thúc");

Kết quả:

Giá trị của count: 10  
Vòng lặp do...while kết thúc

Giải thích:

Dù count < 5 sai ngay từ đầu, do...while vẫn chạy một lần, sau đó mới kiểm tra điều kiện.
Điều này giúp đảm bảo rằng một lần thực thi luôn diễn ra, rất hữu ích trong một số tình huống cụ thể.

Lưu ý và hạn chế của Vòng lặp while trong JavaScript

Vòng lặp while là một công cụ mạnh mẽ để thực hiện các tác vụ lặp đi lặp lại dựa trên một điều kiện. Tuy nhiên, nếu không sử dụng đúng cách, nó có thể gây ra lỗi nghiêm trọng, chẳng hạn như vòng lặp vô hạn hoặc hiệu suất kém. Dưới đây là một số lưu ý và hạn chế quan trọng khi sử dụng while.

Tránh vòng lặp vô hạn

Vòng lặp vô hạn xảy ra khi điều kiện trong while luôn đúng, khiến chương trình chạy mãi không dừng. Điều này có thể gây treo trình duyệt hoặc đóng băng chương trình.

Ví dụ 1: Vòng lặp vô hạn do quên cập nhật biến

let i = 0;

while (i < 5) {
    console.log("Giá trị của i:", i);
    // Thiếu i++ => Điều kiện i < 5 luôn đúng => vòng lặp không bao giờ kết thúc
}

Cách khắc phục: Đảm bảo có bước cập nhật biến để điều kiện false sau một số lần lặp.

Sửa lại đúng cách:

let i = 0;

while (i < 5) {
    console.log("Giá trị của i:", i);
    i++; // Cập nhật i để vòng lặp kết thúc đúng lúc
}

Ví dụ 2: Vòng lặp vô hạn do điều kiện luôn đúng

let x = 10;

while (x > 5) {
    console.log("Giá trị của x:", x);
    // Không có bước giảm x, điều kiện x > 5 luôn đúng => vòng lặp không dừng
}

Cách khắc phục: Cần cập nhật x để vòng lặp dừng sau một số lần lặp.

Sửa lại đúng cách:

let x = 10;

while (x > 5) {
    console.log("Giá trị của x:", x);
    x--; // Giảm x để tránh vòng lặp vô hạn
}

So sánh while với for để lựa chọn vòng lặp phù hợp

Vòng lặp while và for đều được sử dụng để lặp đi lặp lại một đoạn mã, nhưng có sự khác biệt quan trọng:

Tiêu chí	while	for
Điều kiện lặp	Kiểm tra trước khi thực thi	Được định nghĩa ngay từ đầu (điểm bắt đầu, điều kiện, bước nhảy)
Khi nào sử dụng?	Khi số lần lặp không xác định trước	Khi số lần lặp đã biết trước
Khả năng xảy ra vòng lặp vô hạn	Dễ xảy ra nếu không cập nhật biến điều kiện đúng cách	Ít xảy ra hơn vì có bước cập nhật biến ngay trong cấu trúc vòng lặp
Cách sử dụng phổ biến	Chờ người dùng nhập dữ liệu hợp lệ, đợi sự kiện xảy ra	Duyệt qua mảng, danh sách hoặc thực hiện số lần lặp cố định

Ví dụ 3: Cùng một bài toán viết bằng `while` và `for`

Sử dụng while (khi không biết trước số lần lặp)

let number = 0;

while (number < 10) {
    console.log("Giá trị của number:", number);
    number++; // Cập nhật biến điều kiện
}

Sử dụng for (khi số lần lặp đã biết trước)

for (let number = 0; number < 10; number++) {
    console.log("Giá trị của number:", number);
}

Nhận xét:

Dùng while nếu không biết trước số lần lặp (ví dụ: chờ dữ liệu nhập từ người dùng).
Dùng for nếu đã biết trước số lần lặp (ví dụ: chạy từ 1 đến 100).

Kết bài

Vòng lặp while là một công cụ mạnh mẽ trong JavaScript, giúp thực hiện các tác vụ lặp đi lặp lại dựa trên một điều kiện cụ thể. Nó đặc biệt hữu ích trong những trường hợp số lần lặp không được xác định trước, chẳng hạn như chờ đầu vào từ người dùng hoặc xử lý các điều kiện động.

Tuy nhiên, khi sử dụng while, chúng ta cần cẩn thận để tránh vòng lặp vô hạn bằng cách đảm bảo điều kiện dừng sẽ trở thành false sau một số lần lặp nhất định. Ngoài ra, nếu số lần lặp đã được xác định trước, vòng lặp for sẽ là lựa chọn tối ưu hơn về mặt hiệu suất và độ rõ ràng của mã.

Hy vọng rằng qua bài viết này, bạn đã hiểu rõ hơn về cách sử dụng vòng lặp while, do...while, cũng như khi nào nên lựa chọn while thay vì các vòng lặp khác. Hãy thử áp dụng vòng lặp while vào các tình huống thực tế để làm chủ cách hoạt động của nó trong lập trình JavaScript!