[JS Basics] Vòng lặp trong JavaScript: Hướng dẫn chi tiết cho người mới

Bạn đã bao giờ phải thực hiện một công việc lặp đi lặp lại trong đời thực chưa? Giống như việc bạn phải đóng 100 chiếc hộp, gửi 50 email giống hệt nhau, hay đơn giản là đếm từ 1 đến 1000. Thật tẻ nhạt và tốn thời gian phải không?

Trong lập trình, chúng ta cũng thường xuyên đối mặt với những tác vụ lặp lại như vậy. May mắn thay, JavaScript cung cấp một công cụ quyền năng để tự động hóa những công việc này: Vòng lặp (Loops).

Hãy tưởng tượng vòng lặp như một người trợ lý cần mẫn, không bao giờ biết mệt mỏi, sẵn sàng thực hiện một lệnh của bạn hàng trăm, hàng nghìn, thậm chí hàng triệu lần một cách chính xác tuyệt đối. Trong bài viết này, chúng ta sẽ cùng nhau khám phá và làm chủ toàn bộ vòng lặp trong JavaScript, từ những khái niệm đơn giản nhất đến các kỹ thuật nâng cao và phương pháp hiện đại. 🚀

Tại sao chúng ta cần sử dụng vòng lặp?

Trước khi đi sâu vào cú pháp, hãy xem tại sao vòng lặp lại là một khái niệm không thể thiếu.

Giả sử bạn muốn hiển thị các số từ 1 đến 5 ra màn hình console. Nếu không có vòng lặp, bạn sẽ phải viết:

console.log(1)
console.log(2)
console.log(3)
console.log(4)
console.log(5)

Dễ dàng phải không? Nhưng nếu yêu cầu là hiển thị các số từ 1 đến 1000 thì sao? Rõ ràng, việc sao chép và dán 1000 dòng code là một cơn ác mộng. Đây chính là lúc vòng lặp tỏa sáng.

Với vòng lặp for, chúng ta có thể giải quyết vấn đề trên chỉ với 3 dòng code:

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

Ngắn gọn, sạch sẽ và hiệu quả. Vòng lặp giúp chúng ta:

• Tiết kiệm thời gian và công sức viết code.
• Giảm thiểu lỗi do sao chép/dán.
• Làm cho code dễ đọc và dễ bảo trì hơn.
• Xử lý các tập dữ liệu lớn một cách linh hoạt mà không cần biết trước số lượng phần tử.

Các loại vòng lặp phổ biến trong JavaScript

JavaScript cung cấp nhiều loại vòng lặp khác nhau, mỗi loại có một thế mạnh riêng và phù hợp với các tình huống cụ thể.

1. Vòng lặp for - Người bạn đồng hành đáng tin cậy

Đây là vòng lặp phổ biến và được sử dụng nhiều nhất. Vòng lặp for lý tưởng khi bạn biết chính xác số lần muốn lặp lại một khối code.

Cú pháp:

for (khởi_tạo; điều_kiện; bước_nhảy) {
  // Khối code cần thực thi
}

• khởi_tạo: Thực thi một lần duy nhất trước khi vòng lặp bắt đầu. Thường dùng để khai báo và gán giá trị cho biến đếm (ví dụ: let i = 0).
• điều_kiện: Biểu thức được kiểm tra trước mỗi lần lặp. Nếu điều kiện là true, khối code sẽ được thực thi. Nếu là false, vòng lặp kết thúc.
• bước_nhảy: Thực thi sau mỗi lần lặp. Thường dùng để tăng hoặc giảm biến đếm (ví dụ: i++ hoặc i--).

Ví dụ: In ra các số chẵn từ 2 đến 10.

for (let i = 2; i <= 10; i += 2) {
  console.log(`Số chẵn hiện tại là: ${i}`)
}
// Kết quả:
// Số chẵn hiện tại là: 2
// Số chẵn hiện tại là: 4
// ...
// Số chẵn hiện tại là: 10

✅ Khi nào nên dùng? Khi bạn biết trước số lần lặp, ví dụ như duyệt qua một mảng có độ dài xác định.

2. Vòng lặp while - Khi chưa biết điểm dừng

Vòng lặp while sẽ thực thi một khối code chừng nào một điều kiện cụ thể vẫn còn đúng. Nó rất hữu ích khi bạn không biết trước số lần lặp mà chỉ dựa vào một điều kiện nào đó.

Cú pháp:

while (điều_kiện) {
  // Khối code cần thực thi
}

Ví dụ: Một trò chơi đơn giản yêu cầu người dùng đoán một con số.

let secretNumber = 7
let guess = 0

while (guess !== secretNumber) {
  guess = parseInt(prompt('Hãy đoán một con số từ 1 đến 10:'))
  if (guess !== secretNumber) {
    alert('Sai rồi, thử lại nào!')
  }
}

alert('Chúc mừng! Bạn đã đoán đúng số bí mật là 7!')

⚠️ Cảnh báo: Hãy cẩn thận với while. Nếu điều kiện không bao giờ trở thành false, bạn sẽ tạo ra một vòng lặp vô hạn (infinite loop), làm treo trình duyệt hoặc chương trình.

✅ Khi nào nên dùng? Khi số lần lặp không xác định và phụ thuộc vào một điều kiện (ví dụ: đọc dữ liệu từ một stream, chờ người dùng nhập liệu).

3. Vòng lặp do...while - Thực thi ít nhất một lần

Vòng lặp do...while tương tự như while, nhưng có một khác biệt quan trọng: khối code bên trong do sẽ được thực thi ít nhất một lần trước khi kiểm tra điều kiện.

Cú pháp:

do {
  // Khối code cần thực thi
} while (điều_kiện)

Ví dụ: Xây dựng một menu yêu cầu người dùng nhập lựa chọn cho đến khi họ chọn "Thoát".

let choice
do {
  choice = prompt(
    "Menu:\n1. Xem sản phẩm\n2. Thêm vào giỏ hàng\nNhập 'q' để thoát.",
  )
  // Xử lý lựa chọn ở đây...
  console.log(`Bạn đã chọn: ${choice}`)
} while (choice !== 'q')

console.log('Cảm ơn đã sử dụng chương trình!')

✅ Khi nào nên dùng? Khi bạn cần đảm bảo khối code chạy ít nhất một lần, bất kể điều kiện ban đầu là đúng hay sai.

4. Vòng lặp for...of - Cách hiện đại để duyệt qua Collection

Được giới thiệu trong ES6, for...of cung cấp một cách cực kỳ đơn giản và sạch sẽ để lặp qua các phần tử của các đối tượng có thể lặp (iterables) như Array, String, Map, Set,...

Cú pháp:

for (const element of iterable) {
  // Khối code cần thực thi với mỗi 'element'
}

Ví dụ: Duyệt qua một mảng các loại trái cây.

const fruits = ['Táo', 'Chuối', 'Cam']

for (const fruitName of fruits) {
  console.log(`Tôi thích ăn ${fruitName}`)
}
// Kết quả:
// Tôi thích ăn Táo
// Tôi thích ăn Chuối
// Tôi thích ăn Cam

💡 Đây là cách được khuyên dùng để duyệt mảng thay vì vòng lặp for truyền thống vì nó ngắn gọn và ít gây lỗi hơn.

5. Vòng lặp for...in - Dành riêng cho đối tượng (Object)

Vòng lặp for...in được sử dụng để lặp qua các thuộc tính (properties) của một đối tượng.

Cú pháp:

for (const key in object) {
  // Khối code cần thực thi với mỗi 'key'
}

Ví dụ: Liệt kê thông tin của một người dùng.

const user = {
  name: 'An',
  age: 25,
  job: 'Lập trình viên',
}

for (const property in user) {
  console.log(`${property}: ${user[property]}`)
}
// Kết quả:
// name: An
// age: 25
// job: Lập trình viên

⚠️ Lưu ý quan trọng: Không bao giờ sử dụng for...in để duyệt mảng (Array). Nó có thể lặp qua cả các thuộc tính không mong muốn (ví dụ các thuộc tính được thêm vào Array.prototype) và thứ tự lặp không được đảm bảo. Hãy dùng for...of cho mảng.

Kiểm soát luồng vòng lặp: break và continue

Đôi khi, bạn không muốn chạy hết toàn bộ vòng lặp. JavaScript cung cấp hai câu lệnh để kiểm soát luồng thực thi:

• break: Thoát khỏi vòng lặp ngay lập tức.
• continue: Bỏ qua lần lặp hiện tại và chuyển sang lần lặp tiếp theo.

Ví dụ: Tìm số đầu tiên lớn hơn 5 trong một mảng và bỏ qua các số lẻ.

const numbers = [1, 2, 3, 4, 6, 7, 8]

for (const num of numbers) {
  if (num % 2 !== 0) {
    continue // Bỏ qua nếu là số lẻ
  }

  if (num > 5) {
    console.log(`Tìm thấy số chẵn đầu tiên lớn hơn 5 là: ${num}`)
    break // Thoát khỏi vòng lặp
  }

  console.log(`Kiểm tra số chẵn: ${num}`)
}
// Kết quả:
// Kiểm tra số chẵn: 2
// Kiểm tra số chẵn: 4
// Tìm thấy số chẵn đầu tiên lớn hơn 5 là: 6

Các phương thức lặp mảng hiện đại

Trong JavaScript hiện đại, đặc biệt khi làm việc với mảng, chúng ta thường ưu tiên sử dụng các phương thức có sẵn của mảng hơn là các vòng lặp truyền thống. Các phương thức này giúp code trở nên biểu cảm, dễ đọc và ngắn gọn hơn.

• forEach(): Thực thi một hàm cho mỗi phần tử trong mảng. Tương tự như vòng lặp for...of nhưng không thể dùng break hoặc continue.

  const fruits = ['Táo', 'Chuối']
  fruits.forEach((fruit) => console.log(fruit))
  

• map(): Tạo ra một mảng mới bằng cách biến đổi từng phần tử của mảng ban đầu.

  const numbers = [1, 2, 3]
  const squared = numbers.map((number) => number * number) // squared là [1, 4, 9]
  

• filter(): Tạo ra một mảng mới chứa các phần tử thỏa mãn một điều kiện.

  const numbers = [1, 2, 3, 4, 5]
  const evens = numbers.filter((number) => number % 2 === 0) // evens là [2, 4]
  

• reduce(): "Giảm" mảng về một giá trị duy nhất (ví dụ: tính tổng, tìm giá trị lớn nhất).

  const numbers = [1, 2, 3, 4]
  const sum = numbers.reduce((total, current) => total + current, 0) // sum là 10
  

Kết luận: Lựa chọn vòng lặp phù hợp

Vòng lặp là một trong những khái niệm trụ cột của lập trình. Việc hiểu rõ và sử dụng thành thạo chúng sẽ giúp bạn giải quyết vô số vấn đề một cách hiệu quả.

Tóm tắt nhanh khi nào dùng gì:

Hy vọng qua bài viết này, bạn đã có một cái nhìn toàn diện và sâu sắc về các loại vòng lặp trong JavaScript. Đừng chỉ đọc, hãy mở trình soạn thảo code của bạn lên và thực hành ngay hôm nay. Chúc bạn thành công trên con đường chinh phục JavaScript!