Video học lập trình mỗi ngày

Trong phần này chúng ta sẽ nói tới Ternary operator javascript một trong những conditions javascript mà bất cứ developer js nào cũng cần phải biết và nắm rõ nó giống như javascript if else. Và bài này sẽ giúp các bạn hiểu thêm và sâu hơn về conditions này.

1 - Ternary operator là gì?

Javascript ternary cũng giống như điều kiện javascript if else. Ternary operator giúp lập trình viên có thể nhanh chóng check một điều kiện trong javascript.

Ngoài khái niệm này nên học thì bạn cần phải hiểu thêm để Giải thích về Destructuring, Rest Parameters, và Spread Syntax trong javascript

# Syntax ternary operator javascript

expression ? if true : if not true 

Javascript ternary được sử dụng để rút ngắn câu lệnh khi check một điều kiện. Điều này có ích để trả về một giá trị nhanh chóng (nghĩa là để gán nó đến một biến khác). Giờ ta đi xem xét một số ví dụ

2 - Ternary operators javascript example

# sử dụng Ternary operators javascript

var nameBlog = 'anonystick';
var result = (nameBlog === 'anonystick') ? 'javascript' : 'kenhxachtay.com'

Trong trường hợp này nếu nameBlog có giá trị "anonystick" thì sẽ return về giá trị là "javascript". Nếu nameBlog có giá trị khác thì

sẽ return về "kenhxachtay.com". Cũng giống như javascript if else

# sử dụng javascript if else

var nameBlog = 'anonystick';
var result = '';
if (nameBlog === 'anonystick') {
 result = 'javascript';
} else {
 result = 'kenhxachtay.com';
}

Tips: 25 ví dụ hiểu về reduce javascript
Như chúng ta biết, thì cả hai phương pháp đều cho ta một kết quả nhưng nói về nhanh chóng và code ngắn gọn thì condition ternary là hiệu quả nhất. Nhưng đó chỉ là một ví dụ đơn giản cho chúng ta dễ hình dung. Tiếp theo chúng ta đi những ví dụ phức tạp hơn.

Ví dụ: ternary operators javascript example

var a = 0;
var str = 'only me';
var b = '';
b = a === 0 ? (a = 1, str += ' test') : (a = 2)

Theo các bạn thì ra kết quả gì? và vì sao? Nếu các bạn đọc thêm mà vẫn chưa hiểu thì câu trả lời sẽ có ở cuối bài viết này.

Chúng ta cũng có thể sử dụng conditional ternary operator lồng nhau.

Tôi lấy một ví dụ

var myName = true;
var myAge = true;
var message = myName? (myAge ? "I'll like to know your age and name" : "I'll stick with just your name") : "Oh, I'll call you JavaScript then, cus you fine and mysterious"
console.log(message) // I'll like to know your age and name

và đoạn code trên tương đương với code sử dụng if else

var myName = true;
var myAge = true;
var message = '';
if (myName){
  if(myAge){
    message = "I'll like to know your age and name"
  }else{
    message = "I'll stick with just your name then"
  }
} else {
  "Oh, I'll call you JavaScript then, cus you fine and mysterious"
}
console.log(message) //I'll like to know your age and name

Các bạn thấy rất rõ đúng không? Nên sử dụng ternary operator hay không thì tùy các bạn.

3 - Những trường hợp nào nên tránh sử dụng ternary operator javascript

Mặc dù trông có vẻ rất hữu ích trong việc check conditions javascript, nhưng conditions ternary lại không hợp lệ trong những trường hợp sau:

# không thể break khi dùng ternary operator

var animal = 'kitty';
for (var i = 0; i < 5; ++i) {
 (animal === 'kitty') ? break: console.log(i);
} 

# không thể return khi dùng ternary operator

var animal = 'kitty';
(animal === 'kitty') ? return 'meow' : return 'woof';

mà phải như thế này:

var animal = 'kitty';
return (animal === 'kitty') ? 'meow' : 'woof';

Như vậy thì tôi và các bạn đã lướt qua một bài viết mà các devjs mới cũng có thể chưa biết. Đọc để khi đọc code các anh lớn hơn để hiểu chứ không hiểu tưởng là code bị lỗi thì chết.

Và tôi sẽ trả lời cho câu hỏi trên mà tôi đã hỏi:

var a = 0;
var str = 'only me';
var b = '';
b = a === 0 ? (a = 1, str += ' test') : (a = 2)

/*
Output: b = only me test
*/

Bởi vì khi sử dụng conditions ternary thì sẽ lấy giá trị cuối cùng của điều kiện đúng.

Điều kiện đúng ở đây là b = a === 0. b = a === 0 is true.

b sẽ lấy giá trị cuối cùng đó là str += ' test' trong (a = 1, str += ' test')

Vậy trong trường hợp này b = ? và vì sao. Các bạn hãy để comment lại bên dưới bài viết trên FB và giải thích vì sao?

var a = 0;
var str = 'not a';
var c = 1;
var b = '';
b = a === 0 ? (a = 1, str += ' test', c = 3) : (a = 2)
/*
Output: b ?
*/

Nếu bài này giúp ích cho các bạn thì tôi mong các bạn cũng share ra cộng đồng nhiều hơn.

Thanks for reading!