Vòng lặp trong JavaScript: Chi tiết 8 phương thức lặp kèm ví dụ

Vòng lặp là một trong những phương thức cơ bản trong lập trình JavaScript, giúp tự động hóa các tác vụ lặp đi lặp lại. Hiểu rõ về phương thức vòng lặp trong JavaScript sẽ giúp bạn dễ dàng thực hiện đoạn mã và thực thi chúng.

Đọc bài viết sau đây để được giải đáp chi tiết về:

• Tất tần tật định nghĩa của vòng lặp trong JavaScript
• Các phương thức cơ bản và cách sử dụng của vòng lặp JavaScript

Vòng lặp trong JavaScript là gì?

Vòng lặp trong JavaScript cho phép bạn thực hiện câu lệnh nhiều lần cho đến khi một điều kiện được đáp ứng. Vòng lặp (Loop) giúp bạn tự động hóa các tác vụ mang tính lặp đi lặp lại, tiết kiệm thời gian hiệu quả.

Ví dụ, bạn thực hiện hiển thị dòng chữ ITviec Blog 5 lần bằng cách sử dụng vòng lặp trong JavaScript. Trong Loop, câu lệnh chỉ cần được viết một lần và vòng lặp sẽ thực hiện 5 lần. Cụ thể như sau:

for (let i = 0; i < 5; i++) {
    console.log("ITviec Blog");
}

Khi thực hiện đoạn mã trên, kết quả sẽ được hiển thị như sau:

ITviec Blog

ITviec Blog

ITviec Blog

ITviec Blog

ITviec Blog

Xem thêm: JavaScript là gì? Học JavaScript cơ bản với lộ trình dễ hiểu nhất

Các phương thức cơ bản của vòng lặp trong javascript

Vòng lặp trong JavaScript: Vòng lặp for

Trong JavaScript, vòng lặp for được sử dụng để lặp lại một đoạn mã theo số lần nhất định hoặc lặp lại các phần tử của một mảng. Vòng lặp for chứa vùng khởi tạo, điều kiện tăng/giảm trong một dòng, do đó cấu trúc của vòng lặp sẽ ngắn gọn và ít lỗi hơn.

Cú pháp cơ bản của vòng lặp for:

for (initialExpression; condition; updateExpression) {
    // for loop body
}

Trong đó:

• initialExpression: Khởi tạo một biến đếm.
• Condition: Điều kiện cần được đánh giá, nếu điều kiện đúng, nội dung của vòng lặp sẽ được thực thi.
• UpdateExpression: Cập nhật giá trị của initialExpression.

Sau khi hoàn tất một lần lặp của vòng lặp, điều kiện sẽ được đánh giá lại. Quá trình sẽ được tiếp tục cho đến khi điều kiện sai.

Cách hoạt động của vòng lặp for (Nguồn: programiz.com).

Ví dụ, thực hiện hiển thị dãy số từ 1-5 với điều kiện giá trị nhỏ hơn 6. Cụ thể như sau:

for (let i = 1; i < 6; i++) {
    console.log(i);
}

Với cú pháp trên, trình duyệt sẽ hiển thị dãy số từ 1-5 là những giá trị thỏa mãn điều kiện. Khi thực thi, vòng lặp for sẽ phân tích từ giá trị đầu tiên là số 1 với điều kiện là i < 6, số 1 thỏa điều kiện vòng lặp sẽ tiếp tục phân tích đến các giá trị 2,3,4,5 và 6. Đến khi có một giá trị không thỏa mãn điều kiện, vòng lặp sẽ kết thúc.

Cách hoạt động của vòng lặp while (Nguồn: GeeksForGeeks)

Vòng lặp trong JavaScript: Vòng lặp while

Vòng lặp while là một câu lệnh điều khiển luồng cho phép mã được thực thi nhiều lần dựa trên một điều kiện boolean nhất định. Vòng lặp while cũng có thể được coi như một câu lệnh if lặp lại. Cú pháp cơ bản của vòng lặp while như sau: 

while (boolean condition) {
    loop statements...
}

Trong đó: 

• Vòng lặp while bắt đầu bằng việc kiểm tra điều kiện, nếu điều kiện đúng thì các câu lệnh trong vòng lặp sẽ được thực thi. Ngược lại, nếu điều kiện câu lệnh đầu tiên không đúng, thì câu lệnh tiếp theo sẽ được thực thi. 
• Các câu lệnh chứa giá trị được cập nhật cho biến được xử lý cho lần lặp tiếp theo.
• Khi điều kiện sai, vòng lặp sẽ kết thúc. 

Ví dụ cách sử dụng vòng lặp while khi thực hiện dãy số như sau:

let val = 1;

while (val < 6) {
    console.log(val); 
    val += 1;
}

Kết quả hiển thị của đoạn mã trên:

Vòng lặp trong JavaScript: Vòng lặp do…while

Vòng lặp do…while có chức năng tương tự với while nhưng điểm khác biệt chính là do…while sẽ kiểm tra điều kiện sau khi thực thi các câu lệnh. Do đó, do…while sẽ thực thi nội dung vòng lặp ít nhất một lần ngay cả khi điều kiện sai.

do {
    Statements...
}
while (condition);

Với cú pháp cơ bản của do…while, có thể thấy:

• Vòng lặp do…while sẽ bắt đầu thực thi các câu lệnh, không có kiểm tra bất kỳ điều kiện nào lần đầu tiên.
• Sau khi thực thi các câu lệnh và cập nhật giá trị biến, điều kiện sẽ được kiểm tra đúng hay sai. 
• Nếu điều kiện đúng, vòng lặp tiếp theo sẽ bắt đầu. Nếu điều kiện sai, vòng lặp sẽ kết thúc. 

Ngoài ra, cần lưu ý rằng vòng lặp do…while sẽ thực thi câu lệnh ít nhất một lần trước khi bất kỳ điều kiện nào được kiểm tra. 

Chẳng hạn như ví dụ tính tổng của các dãy số như sau: 

let sum = 0, num = 0;
do {
    sum += num;
    num = parseInt(prompt("Enter a number: "));
} while (num >= 0);
console.log(`The sum is ${sum}`);

Ở ví dụ trên, do…while nhắc người dùng nhập một số, miễn chúng là các số dương thì vòng lặp sẽ tự cộng chúng lại và nhắc user nhập thêm các số khác. Ngược lại, nếu bạn nhập số âm thì vòng lặp sẽ kết thúc mà không được nhập thêm bất kỳ số âm nào.

Kết quả hiển thị:

Vòng lặp trong JavaScript: Vòng lặp for…in

Vòng lặp for…in được sử dụng để thực hiện hành động lặp qua các thuộc tính của một đối tượng (object). For…in chỉ lặp qua các giá trị keys của một đối tượng có thuộc tính có thể đếm được để đặt thành “true”.

for(let variable_name in object_name) {
    // Statement
}

Ví dụ về vòng lặp for…in như sau:

const salaries = {
    Jack: 24000,
    Paul: 34000,
    Monica: 55000
};
for (let i in salaries) {
    let salary = "$" + salaries[i];
    console.log(`${i}: ${salary}`);
};

Ở ví dụ trên, có thể thấy:

• Vòng lặp for…in được sử dụng để lặp lại các thuộc tính của đối tượng salary. 
• Thêm chuỗi $ vào mỗi giá trị của đối tượng. 
• Đoạn mã sử dụng biến i thay vì key vì có thể sử dụng bất kỳ tên biến nào, miễn là chúng hợp lệ. 

Kết quả hiển thị:

Vòng lặp trong JavaScript: Vòng lặp for…of

Vòng lặp for…of được sử dụng để lặp lại các đối tượng có thể lặp lại, chẳng hạn như mảng (array), đối tượng (object), set hoặc map. Vòng lặp sẽ lặp lại trực tiếp giá trị của đối tượng đã cho và có cú pháp ngắn gọn hơn vòng lặp for. 

for(let variable_name of  object_name) {
    // Statement
}

Ví dụ về cách sử dụng for…of như sau: 

const students = ['John', 'Sara', 'Jack'];
for (let element of students) {
    console.log(element);
}

Ở ví dụ trên đã thực hiện vòng lặp for…of đối với mảng (array), cụ thể là lặp qua các đối tượng mảng là student và hiển thị tất cả các giá trị của nó.

Kết quả hiển thị:

Vòng lặp trong JavaScript: Break Statement

Câu lệnh break được sử dụng để chấm dứt việc thực thi vòng lặp hoặc câu lệnh switch khi điều kiện đúng. Ví dụ như sau: 

for (let i = 1; i < 6; i++) {
    if (i == 4) 
        break;
        
    console.log(i);
}

Ở ví dụ trên, có thể thấy như sau:

• Vòng lặp bắt đầu với i=1 và tiếp tục cho đến khi giá trị i nhỏ hơn 6. 
• Khi i bằng 4, câu lệnh break được thực thi, điều này sẽ dừng vòng lặp ngay lập tức.
• Các giá trị của i từ 1 đến 3 sẽ được hiển thị. Khi đến giá trị i bằng 4, vòng lặp sẽ dừng lại trước khi i=4 được hiển thị.

Kết quả hiển thị:

Vòng lặp trong JavaScript: Continue Statement

Câu lệnh continue được sử dụng để bỏ qua phần còn lại của vòng lặp hiện tại và tiếp tục với vòng lặp tiếp theo.

Câu lệnh continue khác biệt so với câu lệnh break ở một số đặc điểm như:

• Câu lệnh continue sẽ dừng hoàn toàn vòng lặp và tiếp tục thực thi mã sau vòng lặp.
• Trong khi đó, câu lệnh break sẽ bỏ qua phần còn lại của vòng lặp hiện tại, tiếp tục với vòng lặp tiếp theo mà không dừng hoàn toàn vòng lặp.

Chẳng hạn như ví dụ sau:

for (let i = 0; i < 11; i++) {
    if (i % 2 == 0) 
        continue;
        
    console.log(i);
}

Ở ví dụ trên, giá trị của i được tăng lên cho lần lặp tiếp theo, sau đó câu lệnh continue sẽ bỏ qua lần lặp hiện tại. Lưu ý rằng đoạn mã trên đã tăng giá trị của i cả bên trong và bên ngoài câu lệnh if. 

Kết quả hiển thị:

Vòng lặp trong JavaScript: Infinite Loop 

Vòng lặp vô hạn (hay còn gọi là Infinite Loop) là một trong những lỗi sai phổ biến khi triển khai bất kỳ loại vòng lặp nào, bởi chúng có thể không bao giờ thoát, tức là vòng lặp sẽ chạy vô hạn lần. Điều này xảy ra khi điều kiện không thành công vì một lý do nào đó.

for (let i = 5; i != 0; i -= 2) {
    console.log(i);
}

let x = 5;
while (x == 5) {
    console.log("In the loop");
}

Câu hỏi thường gặp về vòng lặp trong JavaScript

Vòng lặp while và do…while khác nhau như thế nào?

Vòng lặp while và do…while đều được sử dụng để thực hiện câu lệnh nhiều lần cho đến khi điều kiện không còn đúng. Tuy nhiên, cả hai vẫn có một số điểm khác biệt như:

• Vòng lặp while: Thường kiểm tra điều kiện trước khi đoạn mã được thực thi. 
• Vòng lặp do…while: Sẽ thực thi đoạn mã một lần trước khi kiểm tra điều kiện.

Làm sao để tránh vòng lặp vô hạn (Infinite Loop)?

Vòng lặp vô hạn (Infinite Loop) xảy ra khi điều kiện kết thúc (Terminating condition) của vòng lặp không được đáp ứng, khiến cho vòng lặp chạy vô thời hạn. Để tránh tình trạng này, bạn cần đảm bảo điều kiện cuối cùng của vòng lặp là sai (False).

Sự khác nhau giữa for…in và for…of

Một số điểm khác nhau giữa for…in và for…of cụ thể như:

for…in	for…of
Được sử dụng để lặp qua các khóa (keys) của một đối tượng	Được sử dụng để lặp qua các giá trị của một iterable.
Có thể sử dụng for…in để lặp qua một iterable như mảng, chuỗi. Tuy nhiên, tránh sử dụng for…in cho các iterable.	Không thể sử dụng để lặp qua một đối tượng.

Tổng kết

Vòng lặp trong JavaScript là một cấu trúc linh hoạt giúp các lập trình viên tự động hóa các tác vụ lặp đi lặp lại. Bằng cách hiểu rõ các loại vòng lặp khác nhau như for, while hay do…while và cách sử dụng chúng một cách hiệu quả, bạn có thể viết được những đoạn code JavaScript ngắn gọn và tối ưu dễ dàng.

Đừng quên thực hành thêm về các vòng lặp trong JavaScript qua các dự án thực tế để nâng cao trình độ cũng như đạt được những cơ hội nghề nghiệp hấp dẫn bạn nhé!

Bạn có thể tham khảo chuỗi bài viết về chủ đề JavaScript trên ITviec:

• JavaScript là gì? Học JavaScript cơ bản với lộ trình dễ hiểu nhất
• Prototype trong Javascript: Định nghĩa, Phân loại và Cách sử dụng
• Những điều cần biết về jQuery – Thư viện Javascript hàng đầu
• Tự học Javascript với 20+ tài nguyên online cơ bản đến nâng cao
• Bài tập JavaScript cơ bản kèm lời giải cho người mới bắt đầu
• forEach JavaScript: Một số thao tác cơ bản và ví dụ chi tiết
• Array JavaScript: Tổng hợp 12 phương thức quan trọng của array

Xem thêm: JavaScript Developer là gì? Các hướng phát triển củaJavaScript Developer