[JS Basics] Câu lệnh điều kiện trong JavaScript: Ví dụ & cách dùng hiệu quả

Hãy tưởng tượng bạn đang đứng ở một ngã tư đường. Bạn có thể đi thẳng, rẽ trái, hoặc rẽ phải. Quyết định của bạn phụ thuộc vào nơi bạn muốn đến. Trong lập trình, mã của bạn cũng liên tục phải "đưa ra quyết định" như vậy. Nó cần một cách để thực thi những hành động khác nhau dựa trên các điều kiện khác nhau. Đó chính là lúc câu lệnh điều kiện (conditional statements) tỏa sáng. 🚦

Đây là "bộ não" của chương trình, cho phép nó trở nên linh hoạt, thông minh và phản ứng lại với dữ liệu đầu vào, tương tác của người dùng, hoặc các trạng thái thay đổi. Trong bài viết này, chúng ta sẽ cùng nhau khám phá mọi ngóc ngách của câu lệnh điều kiện trong JavaScript, từ những khái niệm đơn giản nhất đến các kỹ thuật tối ưu.

Tại sao cần sử dụng câu lệnh điều kiện?

Một chương trình không có câu lệnh điều kiện giống như một câu chuyện chỉ có một đường thẳng, không có bất kỳ nút thắt hay ngã rẽ nào. Nó sẽ thực thi các lệnh một cách tuần tự từ trên xuống dưới. Nhưng thực tế thì không đơn giản như vậy.

Hãy xem xét các ví dụ thực tế:

• Đăng nhập: Nếu người dùng nhập đúng mật khẩu, thì hiển thị trang chào mừng. Ngược lại, thông báo lỗi.
• Mua sắm online: Nếu sản phẩm còn trong kho, thì cho phép người dùng thêm vào giỏ hàng. Ngược lại, hiển thị thông báo "Hết hàng".
• Chế độ Sáng/Tối: Nếu người dùng bật chế độ tối, thì đổi màu nền thành đen. Ngược lại, giữ màu nền trắng.

Những kịch bản này đều cần đến khả năng ra quyết định, và đó chính là nhiệm vụ của các câu lệnh điều kiện.

Các "ngã rẽ" phổ biến: Tìm hiểu các loại câu lệnh điều kiện

JavaScript cung cấp cho chúng ta một vài công cụ mạnh mẽ để xử lý logic điều kiện. Hãy cùng tìm hiểu từng loại một.

1. if - Ngã rẽ đơn giản nhất

Đây là dạng cơ bản nhất. Nó kiểm tra một điều kiện, và nếu điều kiện đó đúng (true), nó sẽ thực thi một khối mã.

Cú pháp:

if (dieu_kien) {
  // Mã sẽ được thực thi nếu dieu_kien là true
}

Ví dụ: Kiểm tra xem người dùng đủ tuổi để xem nội dung hay không.

let age = 20

if (age >= 18) {
  console.log('Chào mừng bạn! Bạn đã đủ tuổi để truy cập.')
}
// Kết quả: "Chào mừng bạn! Bạn đã đủ tuổi để truy cập."

let anotherAge = 15
if (anotherAge >= 18) {
  console.log('Dòng này sẽ không bao giờ được in ra.')
}
// Không có gì được in ra

2. if...else - Lựa chọn A hoặc B

Đây là một sự mở rộng của if. Nó cho phép bạn thực thi một khối mã nếu điều kiện đúng, và một khối mã khác nếu điều kiện sai (false).

Cú pháp:

if (dieu_kien) {
  // Mã thực thi nếu dieu_kien là true
} else {
  // Mã thực thi nếu dieu_kien là false
}

Ví dụ: Kiểm tra xem một số là chẵn hay lẻ.

let number = 7

if (number % 2 === 0) {
  console.log(number + ' là số chẵn.')
} else {
  console.log(number + ' là số lẻ.')
}
// Kết quả: "7 là số lẻ."

3. if...else if...else - Khi có nhiều hơn hai lựa chọn

Khi bạn có nhiều điều kiện cần kiểm tra, chuỗi if...else if...else là công cụ hoàn hảo. Nó sẽ kiểm tra các điều kiện theo thứ tự từ trên xuống dưới và sẽ thực thi khối mã của điều kiện đầu tiên mà nó thấy là đúng.

Cú pháp:

if (dieu_kien_1) {
  // Mã thực thi nếu dieu_kien_1 là true
} else if (dieu_kien_2) {
  // Mã thực thi nếu dieu_kien_2 là true
} else {
  // Mã thực thi nếu tất cả các điều kiện trên đều false
}

Ví dụ: Xếp loại học sinh dựa trên điểm số.

let score = 85

if (score >= 90) {
  console.log('Xếp loại A')
} else if (score >= 80) {
  console.log('Xếp loại B') // Điều kiện này đúng, mã sẽ dừng ở đây
} else if (score >= 70) {
  console.log('Xếp loại C')
} else {
  console.log('Xếp loại D')
}
// Kết quả: "Xếp loại B"

4. switch...case - "Bảng chỉ dẫn" cho các giá trị cụ thể

Câu lệnh switch là một giải pháp thay thế gọn gàng cho chuỗi if...else if...else dài, đặc biệt khi bạn đang so sánh một biến với nhiều giá trị cụ thể.

Cú pháp:

switch (gia_tri_can_so_sanh) {
  case gia_tri_1:
    // Mã thực thi nếu gia_tri_can_so_sanh === gia_tri_1
    break // Rất quan trọng!
  case gia_tri_2:
    // Mã thực thi nếu gia_tri_can_so_sanh === gia_tri_2
    break
  default:
  // Mã thực thi nếu không có case nào khớp
}

Lưu ý quan trọng: Đừng quên từ khóa break! Nếu không có break, mã sẽ tiếp tục chạy xuống các case tiếp theo ("fall-through") cho đến khi gặp break hoặc kết thúc khối switch. Khối default là tùy chọn, nó sẽ chạy khi không có case nào khớp.

Ví dụ: Hiển thị tên ngày trong tuần dựa vào số.

let dayOfWeek = 3
let dayName

switch (dayOfWeek) {
  case 1:
    dayName = 'Thứ Hai'
    break
  case 2:
    dayName = 'Thứ Ba'
    break
  case 3:
    dayName = 'Thứ Tư'
    break
  case 4:
    dayName = 'Thứ Năm'
    break
  case 5:
    dayName = 'Thứ Sáu'
    break
  case 6:
    dayName = 'Thứ Bảy'
    break
  case 7:
    dayName = 'Chủ Nhật'
    break
  default:
    dayName = 'Ngày không hợp lệ'
}

console.log(dayName) // Kết quả: "Thứ Tư"

5. Toán tử ba ngôi (Ternary Operator) - Con đường tắt cho if...else

Đây là một cách viết tắt cực kỳ gọn gàng cho câu lệnh if...else. Nó thường được sử dụng để gán giá trị cho một biến dựa trên một điều kiện.

Cú pháp:

let result = dieu_kien ? gia_tri_neu_true : gia_tri_neu_false

Ví dụ: Gán thông báo dựa trên trạng thái đăng nhập.

let isLoggedIn = true
let message = isLoggedIn ? 'Chào mừng trở lại!' : 'Vui lòng đăng nhập.'

console.log(message) // Kết quả: "Chào mừng trở lại!"

Khi nào dùng gì? So sánh và lựa chọn tối ưu 💡

Dưới đây là bảng so sánh nhanh các loại câu lệnh điều kiện trong JavaScript:

Falsy Values và Truthy Values - "Sự thật ngầm"

Một khái niệm cực kỳ quan trọng khi làm việc với điều kiện trong JavaScript là "truthy" và "falsy".

• Falsy: Là những giá trị mà JavaScript tự động coi là false khi được đặt trong một điều kiện. Có 6 giá trị falsy:

  • false
  • 0 (số không)
  • "" (chuỗi rỗng)
  • null
  • undefined
  • NaN (Not a Number)

• Truthy: Là bất kỳ giá trị nào không phải là falsy. Ví dụ: true, 123, "hello", [] (mảng rỗng), {} (đối tượng rỗng).

Hiểu rõ điều này cho phép bạn viết code ngắn gọn hơn.

Ví dụ: Kiểm tra xem người dùng đã nhập tên hay chưa.

let userName = '' // Một giá trị falsy

// Thay vì viết: if (userName !== "")
if (userName) {
  console.log('Chào ' + userName)
} else {
  console.log('Vui lòng cho chúng tôi biết tên của bạn.')
}
// Kết quả: "Vui lòng cho chúng tôi biết tên của bạn."

Kết luận: Câu lệnh điều kiện giúp giải các bài toán thực tế

Câu lệnh điều kiện là một trong những khối xây dựng nền tảng và mạnh mẽ nhất trong JavaScript. Việc nắm vững cách sử dụng if, else, switch, và toán tử ba ngôi không chỉ giúp bạn giải quyết các vấn đề logic phức tạp mà còn giúp mã của bạn trở nên sạch sẽ, dễ đọc và hiệu quả hơn.

Hãy bắt đầu thực hành bằng cách tạo ra các kịch bản của riêng bạn. Logic ra quyết định có ở khắp mọi nơi, và bây giờ bạn đã có đủ công cụ để biến những logic đó thành mã nguồn sống động. Chúc bạn thành công trên hành trình chinh phục JavaScript! 🚀