Câu lệnh if và toán tử 3 ngôi ‘?’ trong JavaScript – Thedevmind

Câu lệnh if và toán tử 3 ngôi ‘?’ trong JavaScript

By

Thedevmind

| Feb 09, 2021

Nội dung trước: Các toán tử so sánh trong JavaScript

Nếu trời mưa thì mặc áo mưa”

Thông thường, khi mong muốn thực hiện một câu lệnh nếu đáp ứng điều kiện nào đó, tất cả chúng ta sẽ sử dụng câu lệnh điều kiện if (hay còn gọi câu lệnh rẽ nhánh).

Song song tất cả chúng ta có thể sử dụng toán tử 3 ngôi (kí hiệu: ?) để việc viết if trở nên ngăn nắp hơn.

Câu lệnh if

Nếu biểu thức điều kiện trong if trả về true, chương trình sẽ thực hiện khối câu lệnh của if, trái lại thì không làm gì.

let year = 2021;

if (year == 2021) alert( 'Ι read this bài viết in 2021' );

if (year == 2021) {
  alert( "First message" );
  alert( "Second message" );
}

Câu lệnh if trên sẽ kiểm soát: nếu year bằng 2021, hiện thông báo ‘I read…’, song song nếu bạn mong muốn thực hiện nhiều hơn một câu lệnh, hãy đặt nó trong cặp dấu ngoặc nhọn { }.

Chuyển hóa Boolean trong if

Câu lệnh if sẽ đổi các giá trị biểu thức trong nó về boolean một cách ngầm định, tất cả chúng ta sẽ nói lại về các học thức trong bài Ép kiểu trong JavaScript.

  • Giá trị số 0, chuỗi rỗng “”, null, undefined và NaN sẽ được ép về giá trị false.
  • Các giá trị sót lại được ép về true.
if (0 || "") { //if (false)
 alert('never executed'); //dòng này sẽ không được thực thi
}

if (1) { //if (true)
 alert('executed'); //dòng này được thực thi
}

Câu lệnh liền kề else

Câu lệnh if có thể có một câu lệnh else đi kèm và không bắt buộc cần có, đoạn code trong câu lệnh else sẽ được thực hiện khi biểu thức điều kiện trong if trả về false.

(*3*)
let year = 2021

if (year == 2020) {
alert( ‘2020 now’ ); // không được thực thi
} else {
alert( ‘now iz 2021’ ); // thực thi
}

Câu lênh trên có thể dịch như sau: Nếu year bằng 2020 thì nhắc nhở “2020 now” trái lại nhắc nhở “now iz 2021”.

Phối hợp “else if” thành dãy điều kiện

Đôi lúc tất cả chúng ta không mong muốn câu lệnh nhảy vào else quá sớm, bạn có thể giải quyết (handle) tiếp bằng câu lệnh else if:

(*3*)
let year = 2021;

if (year <= 2020) {
alert( ‘Lower’ );
} else if (year > 2021) {
alert( ‘Higher’ );
} else {
alert( ‘Exactly!’ );
}

Cảnh báo rằng “else if” không phải tính năng thêm của JavaScript, chỉ dễ dàng tất cả chúng ta đặt câu lệnh if ngay sau câu lệnh else.

Giải thích chẳng hạn: Nếu year <= 2020 thì nhắc nhở “Lower”, nếu như không thì nếu year > 2021 sẽ nhắc nhở “Higher”, nếu như không thì nhắc nhở “Exactly!”.

Toán tử 3 ngôi ‘?’

Toán tử 3 ngôi hay toán tử điều kiện, tất cả chúng ta sẽ xem tại sao toán tử này có thể rút ngắn if trước:

let age = 19

//câu lệnh if 5 dòng
if (age > 18) {
  accessAllowed = true;
} else {
  accessAllowed = false;
}

alert(accessAllowed); //true

Chúng được gọi là toán tử 3 ngôi vì có 3 toán hạng (Xem toán tử 1 ngôi và 2 ngôi ở bài Bản chất các toán tử toán học), được viết tổng quát như sau:

res = condition ? α : ɓ;

Nếu condition trả về true, cả biểu thức sẽ trả về α và gán cho res (res = α), trái lại gán res = ɓ.

Mình sẽ viết gọn chẳng hạn trước như sau;

let accessAllowed = (age > 18) ? true : false;

// hoặc accessAllowed = (age > 18) ? true : false;

Bạn có thể bỏ dấu ngoặc đơn ( ) bởi toán tử ? có độ ưu tiên rất thấp, nên nó sẽ luôn thực thi sau biếu thức điều kiện. Ngoài ra để code đẹp và rõ ràng và cụ thể, mình vẫn sẽ đặt dấu ngoặc đơn.

Cảnh báo ở trên chỉ là chẳng hạn để hiểu về toán tử 3 ngôi, tất cả chúng ta thậm chí còn không cần đến nó:

let accessAllowed = age > 18;

Dãy các toán tử 3 ngôi

Cũng như else if, tất cả chúng ta có thể sử dụng liên tiếp chúng theo cách sau:

let age = 19;

let message = (age < 3) ? 'Hi, baby!' :
  (age < 18) ? 'Hi buddy!' :
  (age < 100) ? 'Greetings!' :
  'That's weird!';

alert( message ); //Hi buddy!

Mình sẽ giải thích dễ dàng: Nếu age < 3, in ra “Hi, baby!”, nếu như không thì kiểm soát tiếp age < 18 thì…

Viết theo cách else if:

if (age < 3) {
  message = 'Hi, baby!';
} else if (age < 18) {
  message = 'Hi buddy!';
} else if (age < 100) {
  message = 'Greetings!';
} else {
  message = 'That's weird';
}

Có nên thay thế hẳn if?

let userHealth = 1;

(userHealth == 0) ?
   alert('Die') : alert('Idle');

Khi userHealth = 0, nhắc nhở “Die“, trái lại nhắc nhở “Idle“

Trong JavaScript, không phân biệt rõ ràng và cụ thể giữa câu lệnh và biểu thức, chính vì như thế không có lỗi xảy ra.

Ngoài ra trong từ ngữ lập trình thông thường (₵# ví dụ), biểu thức không được phép đứng riêng, chỉ có các câu lệnh như lời gọi hàm, α++, α = 1,… mới có thể.

Chính vì như thế, về căn bản cách viết này sẽ gây khó đọc lên vài lập trình viên, song song nhiều dev cũng thân thuộc với câu lệnh if:

if (userHealth == 0) {
   alert('Die');
} else { 
   alert('Idle');
}

Kết luận câu lệnh if

Như thế tất cả chúng ta đã tìm tòi về câu lệnh if, else, điều kiện nối else if, cũng như cách dùng toán tử ba ngôi (hay toán tử điều kiện) “?“.

Để sử dụng if cầu kỳ hơn, bài sau tất cả chúng ta sẽ tìm tòi về Các toán tử logic trong JavaScript.

Nếu các bạn thấy nội dung này hữu dụng hoặc có vấn đề khúc mắc về đề tài này hay cần thêm thông tin nào trong bài, vui lòng bình luận bên dưới bài cho mình biết nhé.

Xem Thêm  Xóa dữ liệu trong một bảng hoặc nhiều bảng - cách xóa dữ liệu trong bảng sql

Viết một bình luận