Hướng dẫn sử dụng các lệnh if trong JavaScript chi tiết

Câu lệnh có điều kiện cho phép bạn thực thi đoạn mã theo nhiều điều kiện dữ liệu khác nhau. Một số cú pháp điều kiện phổ biến có thể kể đến như câu lệnh if trong JavaScript, câu lệnh else, if else hoặc else…if. Vậy làm thế nào để hiểu rõ các phương thức phổ biến của câu lệnh có điều kiện?

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

• Định nghĩa về câu lệnh có điều kiện trong JavaScript
• Các dạng câu lệnh if trong JavaScript phổ biến

Định nghĩa về câu lệnh có điều kiện trong JavaScript

Câu lệnh có điều kiện trong JavaScript cho phép bạn thực thi các khối mã cụ thể dựa trên các điều kiện. Nếu điều kiện đúng, khối mã sẽ được chạy, ngược lại nếu điều kiện sai, một khối mã khác sẽ được thực thi dựa trên điều kiện. 

Một số phương pháp phổ biến được sử dụng để thực hiện câu lệnh có điều kiện, cụ thể như sau:

Câu lệnh if trong JavaScript

Câu lệnh if là một câu lệnh có điều kiện được sử dụng để quyết định một câu lệnh hoặc khối lệnh nào đó được thực thi hay không. Nếu điều kiện đúng, đoạn mã sẽ được thực thi. 

Cú pháp của câu lệnh if như sau: 

if (condition) {
    // Nếu điều kiện đúng, 
    // đoạn mã sẽ được thực thi.
}

Câu lệnh if chấp nhận bất kỳ biểu thức điều kiện nào, không chỉ giá trị boolean. Nếu biểu thức điều kiện trả về giá trị truthy (đúng) hoặc falsy (sai) thì câu lệnh if sẽ dựa vào đó để quyết định có thực thi khối mã hay không. Chẳng hạn như điều kiện là một số khác không, một chuỗi không rỗng hoặc một đối tượng,…

Ví dụ, mã JavaScript xác định biến “num” là chẵn hay lẻ bằng cách sử dụng toán tử modulo %. Nếu “num” chia hết cho 2 mà không có dư, chúng sẽ hiển thị “Số đã cho là số chẵn”. Ngược lại, chúng sẽ hiển thị “số đã cho là số lẻ”.

let num = 20;

if (num % 2 === 0) {
    console.log("Số đã cho là số chẵn");
}

if (num % 2 !== 0) {
    console.log("Số đã cho là số lẻ");
};

Câu lệnh else trong JavaScript

Bạn sử dụng câu lệnh else để thực thi đoạn mã khi điều kiện được chỉ định trong câu lệnh if trước đó được đánh giá là sai. 

Cú pháp của câu lệnh else như sau:

if (condition) {
    // khối code
    // thực thi khi diều kiện đúng
}
else {
    // khối code
    // thực thi khi diều kiện sai
}

Trong đó:

• Nếu điều kiện đúng, đoạn mã trong if sẽ được thực thi và mã bên trong else bị bỏ qua.
• Ngược lại, nếu điều kiện là sai, mã bên trong if sẽ bị bỏ qua và mã trong else sẽ được thực thi.

Câu lệnh if…else trong JavaScript

Câu lệnh if-else sẽ thực hiện một số hành động dựa trên một điều kiện cụ thể:

• Nếu điều kiện trong if là đúng, khối lệnh trong if sẽ được thực thi;
• Nếu điều kiện sai, khối lệnh trong else sẽ được thực thi (nếu có);
• Khối else không có điều kiện riêng và chỉ chạy khi điều kiện if không đúng.

Cú pháp của if…else như sau:

if (condition) {
  // khối code sẽ được thực thi nếu điều kiện đúng
} else {
  // khối code sẽ được thực thi nếu điều kiện sai
}

Ví dụ, mã JavaScript sau kiểm tra biến “age” có lớn hơn hoặc bằng 18 không. Nếu đúng, kết quả sẽ ghi lại “Bạn đủ điều kiện được cấp giấy phép lái xe”, nếu không kết quả sẽ hiển thị ngược lại. Điều này sẽ cho biết điều kiện để được cấp phép lái xe dựa trên độ tuổi.

let age = 25;

if (age >= 18) {
    console.log("Bạn đủ điều kiện được cấp giấy phép lái xe!")
} else {
    console.log("Bạn không đủ điều kiện được cấp giấy phép lái xe!")
};

Kết quả hiển thị:

Câu lệnh else if trong JavaScript

Trong JavaScript, bạn có thể sử dụng câu lệnh else if để kiểm tra nhiều điều kiện khác nhau. Cú pháp cụ thể của câu lệnh như sau:

// kiểm tra điều kiện đầu tiên
if (condition1) {
    // if body
}

// kiểm tra điều kiện thứ hai
else if (condition2){
    // else if body
}

// if không có điều kiện tương ứng
else {
    // else body
}

Trong đó,

• Đầu tiên, điều kiện trong câu lệnh if sẽ được kiểm tra, nếu điều kiện đúng thì đoạn mã sẽ được thực thi, phần điều kiện còn lại được bỏ qua.
• Nếu không, điều kiện trong câu lệnh else if sẽ được kiểm tra. Kết quả đúng thì đoạn mã sẽ được thực thi và tự động qua bỏ qua phần điều kiện còn lại.
• Cuối cùng, nếu không có điều kiện nào khả thi, khối mã sẽ thực thi điều kiện trong else. 

Ví dụ về cách sử dụng câu lệnh else if như sau:

let rating = 4;

if (rating <= 2) {
    console.log("Rating tệ");
}
else if (rating >= 4) {
    console.log("Rating tốt");
}
else {
    console.log("Rating trung bình");
}

// Output: Rating tốt!

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

• Câu lệnh if được sử dụng để kiểm tra điều kiện rating <=2
• Tương tự, câu lệnh else if được dùng để kiểm tra điều kiện khác là rating >=4
• Vì khi điều kiện else if được thỏa mãn, nên mã bên trong nó sẽ được thực thi.

Lồng câu lệnh if trong JavaScript

Bên cạnh thực hiện câu lệnh đơn, bạn cũng có thể lồng các câu lệnh if vào với nhau, tức là đặt một câu lệnh if bên trong một câu lệnh if khác. Khi một câu lệnh if lồng vào nhau, nghĩa là câu lệnh đó sẽ là mục tiêu của một câu lệnh if hoặc else khác.

if (condition1) 
{
   // Thực thi khi condition1 đúng
   if (condition2) 
   {
      // Thực thi khi condition2 đúng
   }
}

Ví dụ về câu lệnh if lồng nhau như sau:

let i = 10;

if (i == 10) { 
    if (i < 15) {
        console.log("i nhỏ hơn 15");
        if (i < 12)
            console.log("i cũng nhỏ hơn 12");
        else
            console.log("i lớn hơn 15");
    }
}

Lồng câu lệnh if…else trong JavaScript

Khi sử dụng câu lệnh if else bên trong một câu lệnh if else khác, bạn sẽ tạo ra logic điều kiện phức tạp bằng cách kiểm tra nhiều điều kiện theo cách phân cấp. Mỗi câu lệnh if có thể có một khối else liên quan và trong mỗi câu lệnh if hoặc else, bạn có thể lồng một câu lệnh if else khác.

Việc lồng nhau này có thể tiếp tục ở nhiều cấp độ, nhưng điều quan trọng là phải duy trì được khả năng đọc của đoạn mã đơn giản và tối ưu hóa, tránh sự phức tạp quá mức. 

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

let weather = "nắng";
let temperature = 25;

if (weather === "nắng") {
    if (temperature > 30) {
        console.log("Hôm nay thời tiết nóng bức!");
    } else if (temperature > 20) {
        console.log("Một ngày thật là ấm áp!");
    } else {
        console.log("Thời tiết hôm nay có chút lạnh");
    }
} else if (weather === "mưa") {
    console.log("Nhớ mang theo ô nhé!");
} else {
    console.log("Nhớ kiểm tra thời tiết trước khi qua ngoài nhé!");
};

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

• Câu lệnh if bên ngoài sẽ kiểm tra biến “thời tiết”
• Nếu trời “nắng”, nó sẽ kiểm tra thêm biến nhiệt độ để xác định loại ngày (nóng, ấm hoặc lạnh)
• Tùy theo giá trị thời tiết và nhiệt độ mà các thông báo khác nhau sẽ được ghi vào bảng điều khiển.

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

Có thể dùng nhiều hơn 3 điều kiện trong câu lệnh if không?

Bạn có thể sử dụng nhiều điều kiện trong một câu lệnh if bằng cách kết hợp các điều kiện với toán tử logic như “and” (&&) hoặc “or” (||) hoặc cả hai.

if (cond1 AND/OR COND2) AND/OR (cond3 AND/OR cond4):
    code1
else:
    code2

Trong đó:

• “AND” được thực hiện khi cả hai điều kiện đều đúng. Nếu điều kiện đầu tiên sai, trình duyệt sẽ không kiểm tra điều kiện thứ hai. Ngược lại, nếu điều kiện câu đầu tiên đúng, hệ thống sẽ chuyển đến điều kiện thứ hai và nếu nó sai, false sẽ được trả về câu lệnh if.
• “OR” được thực hiện với bất kỳ điều kiện nào cũng cần phải đúng và nếu điều kiện đầu tiên đúng, đoạn mã sẽ được thực thi mà không cần đánh giá tiếp điều kiện thứ hai. 

Khi nào nên sử dụng phương thức câu điều kiện nào?

Tùy theo cấu trúc đoạn mã và nhu cầu sử dụng mà bạn có thể cân nhắc lựa chọn phương thức câu điều kiện thích hợp, cụ thể như:

• Câu lệnh if: Được sử dụng khi bạn chỉ cần kiểm tra một điều kiện và thực hiện một hành động nếu điều kiện đó đúng. Đồng thời, nó không yêu cầu phải có else.
• Câu lệnh else: Đây không phải là một câu lệnh độc lập mà là một phần của câu lệnh if else. Khi bạn muốn thực hiện một hành động khác nếu điều kiện của câu lệnh if không đúng, bạn có thể sử dụng else.
• Câu lệnh if else: Câu lệnh được sử dụng khi bạn cần kiểm tra một điều kiện và thực hiện một hành động nếu điều kiện đúng. Đồng thời thực hiện một hành động khác nếu điều kiện sai. 

Tổng kết về câu lệnh if trong JavaScript

Câu lệnh if trong JavaScript là một trong những câu lệnh có điều kiện quan trọng. Bằng cách hiểu rõ cách sử dụng if, bạn có thể dễ dàng ứng dụng vào công việc cũng như nâng cao kỹ năng của bản thân. Linh hoạt ứng dụng câu lệnh if vào các dự án thực tế để khám phá thêm các câu lệnh liên quan khác như loop, break hoặc continue bạn nhé!

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