Cấu trúc điều kiện trong JavaScript

Tạo bởi Hoàng Vũ, chỉnh sửa cuối lúc 7 tháng 3, 2025

Trong lập trình, các câu lệnh điều kiện giúp kiểm tra và xử lý logic dựa trên các điều kiện cụ thể. JavaScript cung cấp các cấu trúc điều kiện phổ biến như:

  • if, else if, else để kiểm tra nhiều điều kiện khác nhau.
  • switch-case giúp xử lý nhiều nhánh điều kiện gọn gàng hơn.
  • Giá trị truthy & falsy: Hiểu cách JavaScript đánh giá giá trị trong điều kiện.

Mục tiêu bài học:

  • Hiểu và sử dụng if-elseswitch-case.
  • Biết cách xử lý giá trị truthy & falsy.
  • Ứng dụng vào thực tế như kiểm tra dữ liệu form.

Cấu trúc điều kiện trong JavaScript

1. Câu lệnh if, else if, else

Dùng để kiểm tra một hoặc nhiều điều kiện và thực thi các khối lệnh tương ứng.

Cú pháp

if (condition) {
    // Thực thi nếu condition là true
} else if (anotherCondition) {
    // Thực thi nếu anotherCondition là true
} else {
    // Thực thi nếu tất cả điều kiện trên đều sai
}

Ví dụ minh họa

let age = 20;

if (age < 18) {
    console.log("Bạn chưa đủ tuổi!");
} else if (age < 60) {
    console.log("Bạn đang ở độ tuổi lao động.");
} else {
    console.log("Bạn đã đến tuổi nghỉ hưu.");
}

Lưu ý:

  • if kiểm tra điều kiện đầu tiên.
  • else if kiểm tra điều kiện tiếp theo nếu điều kiện trước không đúng.
  • else chạy nếu tất cả điều kiện trước đó đều sai.

2. Câu lệnh switch-case

Dùng để thay thế nhiều câu lệnh if-else khi kiểm tra một biến có nhiều giá trị cố định.

Cú pháp

switch (expression) {
    case value1:
        // Code thực thi nếu expression === value1
        break;
    case value2:
        // Code thực thi nếu expression === value2
        break;
    default:
        // Code thực thi nếu không có case nào khớp
}

Ví dụ minh họa

let day = 3;

switch (day) {
    case 1:
        console.log("Hôm nay là thứ Hai");
        break;
    case 2:
        console.log("Hôm nay là thứ Ba");
        break;
    case 3:
        console.log("Hôm nay là thứ Tư");
        break;
    default:
        console.log("Không xác định");
}

Khi nào dùng switch-case thay vì if-else?

  • Khi có nhiều điều kiện so sánh bằng (===).
  • Khi biến cần kiểm tra có giá trị cố định như số nguyên, chuỗi ("yes", "no", …).
  • Không phù hợp nếu điều kiện phức tạp (dùng <, >, !=, …).

3. Truthy & Falsy Values

JavaScript đánh giá các giá trị là true hoặc false khi đặt trong điều kiện.

Falsy Values (bị coi là false)
Chỉ 6 giá trị sau là falsy:

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

Ví dụ falsy

if (0) {
    console.log("Sẽ không chạy vì 0 là falsy");
}

if ("") {
    console.log("Sẽ không chạy vì chuỗi rỗng là falsy");
}

Truthy Values (coi là true)
Mọi giá trị không nằm trong danh sách falsy đều là truthy!

Ví dụ truthy

if (42) {
    console.log("42 là truthy"); 
}

if ("Hello") {
    console.log("Chuỗi không rỗng là truthy"); 
}

Lưu ý:

  • if (value) tương đương với if (Boolean(value)).
  • Dùng !!value để kiểm tra giá trị truthy/falsy.

4. Ví dụ thực tế: Kiểm tra form đăng ký

Giả sử ta cần kiểm tra thông tin người dùng nhập vào form đăng ký.

function validateForm(username, age) {
    if (!username) {
        console.log("Tên không được để trống!");
        return;
    }

    if (age < 18) {
        console.log("Bạn phải trên 18 tuổi để đăng ký.");
    } else {
        console.log("Đăng ký thành công!");
    }
}

// Kiểm tra thử
validateForm("", 20);  // "Tên không được để trống!"
validateForm("Alice", 16);  // "Bạn phải trên 18 tuổi để đăng ký."
validateForm("Bob", 25);  // "Đăng ký thành công!"

Kết luận

  • if-else dùng khi cần kiểm tra điều kiện linh hoạt.
  • switch-case giúp xử lý nhiều giá trị cố định gọn gàng hơn.
  • Falsy & truthy values giúp tối ưu điều kiện.
  • Ứng dụng thực tế: Kiểm tra dữ liệu form trước khi gửi.
Website Logo

Với hơn 10 năm kinh nghiệm lập trình web và từng làm việc với nhiều framework, ngôn ngữ như PHP, JavaScript, React, jQuery, CSS, HTML, CakePHP, Laravel..., tôi hy vọng những kiến thức được chia sẻ tại đây sẽ hữu ích và thiết thực cho các bạn.

Bình luận

Website Logo

Chào, tôi là Vũ. Đây là blog hướng dẫn lập trình của tôi.

Liên hệ công việc qua email dưới đây.

lhvuctu@gmail.com

Chúng Tôi Trên

Bạn đang muốn học về lập trình website?

Bạn cần nâng cao kiến thức chuyên nghiệp hơn để nâng cao cơ hội nghề nghiệp? Liên hệ