Hướng dẫn dùng conditional JavaScript

Hôm nay bạn hãy cùng mình sẽ đi tìm hiểu khái niệm cũng như cách sử dụng toán tử điều kiện của ngôn ngữ lập trình Javascript trong trang web nhé.

Câu lệnh toán tử điều kiện if thường hay được sử dụng trong Javascript để thực hiện các hành động khác nhau dựa trên các điều kiện đã cho.

Cách Sử Dụng IF Trong Javascript

Trước khi đi vào sử dụng thì mình giới thiệu sơ qua về cú pháp của toán tử điều kiện if ở bên dưới nhé:

 if ( điều kiện ) Câu lệnh cần thực hiện;

Chúng ta sử dụng câu lệnh if để thực thi một đoạn mã Javascript mà chúng ta mong muốn nếu giá trị của điều kiện là true (đúng). Để hiểu rõ hơn bạn xem ví dụ sau đây nhé:

 let a = 20; 
if ( a > 15 ) console.log('a lớn hơn 15'); // Kết quả: a lớn hơn 15

Đầu tiên là chúng ta gán giá trị cho một biến sau đó dùng lệnh if để kiểm tra điều kiện xem nó có lớn hơn 15 không: if( a > 15). Và nếu đúng thì thực thi đoạn mã phía sau nó.

Tiếp theo mình sẽ giới thiệu cách thực thi nhiều câu lệnh bằng cách đặt nó vào trong dấu {...}. Để hiểu rõ hơn bạn xem ví dụ sau đây nhé:

 let a = 20; 
if ( a > 15 ){
console.log('a lớn hơn 15'); /* Kết quả: a lớn hơn 15*/
console.log('15 nhỏ hơn a'); /* Kết quả: 15 nhỏ hơn a*/
}

Khi sử dụng câu lệnh if trong javascript thì bạn nên bọc khối mã bằng dấu {} dù đó là nhiều câu lệnh hay chỉ một câu lệnh vì điều này sẽ giúp code của bạn dễ đọc hơn.

Khi chúng ta sử dụng câu lệnh if thì nó sẽ xem xét, đánh giá biểu thức trong ngoặc đơn () và chuyển đổi kết quả thành giá trị kiểu Boolean. Mình có một số lưu ý về các giá trị boolean cho một số kiểu dữ liệu:

  • Đối với số 0, chuỗi rỗng "", null, undefinedNaN sẽ có gí trị false.
  • Các kiểu dữ liệu còn lại sẽ là true.

Để nắm rõ hơn ta thử đi vào ví dụ nhé:

 if(0){...}/*Đoạn code sẽ không bao giờ thực hiện*/
if(1){...} /*Đoạn code sẽ luôn được thự hiện*/

Như bạn đã biết thì 0 sẽ chuyển sang giá trị Boolean false còn 1 sẽ chuyển sang giá trị boolean true.

Cách Sử Dụng If Else Javascript

Câu lệnh if chỉ thực hiện với điều kiện đúng nên Javascript cung cấp thêm câu lệnh else để chúng ta có thể thực thi đoạn mã khác khi điều kiện sai. Bây giờ chúng ta cùng đi vào tìm hiểu cú pháp của nó nhé:

 if(Điều Kiện) {
/*Đoạn mã thực thi nếu điều kiện đúng*/
} else {
/*Đoạn mã thực thi nếu điều kiện sai*/
}

Bây giờ chúng ta sẽ đi vào ví dụ cụ thể để hiểu rõ hơn nhé:

 var a = 10;
if( a < 8) {
console.log("a nhỏ hơn 8");
} else {
console.log("a lớn hơn 8");
}

Cách Sử Dụng Else If Javascript

Câu lệnh else if giúp chúng ta có thể kiểm tra thêm một số điều kiện khác. Để hiểu rõ hơn bạn xem cú pháp bên dưới nhé:

 if(điều kiện 1) { 
  /*thực hiện lệnh*/
} else if (điều kiện 2) {
   /*thực hiện lệnh*/
} else {
   /*thực hiện lệnh*/
}

Bây giờ chúng ta thử đi vào ví dụ so sánh giá trị giữa hai biến với 3 điều kiện là lớn hơn, nhỏ hơn hoặc là bằng nhau ở phía bên dưới nhé:

  let a = 10, 
     b = 20;
  if (a > b) {
      console.log('a lớn hơn b');
  } else if (a < b) {
      console.log('a nhỏ hơn b');
  } else {
      console.log('a bằng b');
  }

Như bạn thấy thì nó sẽ xét xem điều kiện thứ 1 a > b nếu không thỏa mãn thì nó tiếp tục kiểm tra điều kiện thứ hai a < b thì điều kiện này thỏa mãn và xuất ra màn hình a nhỏ hơn b. Ở đây bạn có thể thêm nhiều else if mà mình muốn và nên kết thúc điều kiện cuối cùng bằng else.

Cách Sử Dụng (Ternary) Operator Javascript

Javascript cung cấp cho chúng ta toán tử điều kiện ? (toán tử tenary) giúp chúng ta có thể viết dễ dàng ngắn gọn hơn so với lệnh if-else. Để hiểu rõ hơn bạn xem cú pháp của nó nhé:

let ketQua = điều kiện ? giá trị 1 : giá trị 2

Ở đây nếu kiểm tra điều kiện là đúng thì trả về giá trị 1 và sai thì trả về giá trị 2. Bây giờ để hiểu rõ hơn bạn xem ví dụ bên dưới nhé:

let dang_Ky_Lai_Xe = (tuoi > 18) ? true : false;

Tiếp theo chúng ta sẽ đi vào xét nhiều điều kiện cho toán tử so sánh ? ở phía bên dưới nhé:

  var a = 10;
 var b = 20;
 let soSanh = (a > b) ? 'a lớn hơn b' :
   (a < b) ? 'a nhỏ hơn b' : 'a bằng b' 
  console.log(soSanh);

Như bạn thấy thì ví dụ này hoạt động y chang như ở ví dụ điều kiện else if.

Tổng kết:

Qua đây mình mong bài viết sẽ giúp bạn hiểu được khái niệm cũng như cách sử dụng toán tử điều kiện trong ngôn ngữ Javascript và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!