#javascript

Truthy và Falsy trong Javascript

Truthy và Falsy

Javascript là một ngôn ngữ lập trình không quy định chặc chẽ về kiểu dữ liệu của biến (Weakly Typed Language). Do vậy, tùy vào trường hợp được sử dụng mà giá trị biến trong Javascript sẽ được hiểu theo kiểu dữ liệu thích hợp.

Ví dụ:

var a = 1; // kiểu int

var b = '2'; // kiểu string

console.log(a > b);
// kết quả là `false`,
// như vậy, biến `b` được hiểu với kiểu `int`

console.log(b + a);
// kết quả là "21",
// lúc này biến `a` được hiểu với kiểu `string` ("2" + "1" = "21")

Tương tự như vậy, khi chương trình mong muốn giá trị của một biến đươc trả về dưới kiểu boolean, trong khi biến đó được định nghĩa với một kiểu khác thì giá trị của biến sẽ được hiểu theo hai nhóm giá trị truthy hoặc falsy.

var a = 1; // kiểu int

console.log(a == false) // khi so sánh `a` (kiểu `int`) với `false` (kiểu `boolean`) chương trình mong muốn a được hiểu theo kiểu `boolean`, khi đó giá trị truthy hay falsy của biến sẽ được xét đến

Mỗi giá trị trong Javascript có một giá trị boolean đi kèm, được gọi chung là truthyfalsy. Tất cả các giá trị sau đây luôn là falsy:

  • false (kiểu boolean)
  • 0 (kiểu số)
  • '' hay "" (chuỗi rỗng)
  • null
  • undefined
  • NaN (chẳng hạn kết quả của 0/0)

Những giá trị sau đây là truthy:

  • "any string" (chuỗi bất kỳ bao gồm "0", "false")
  • [1, 2] (mảng bất kỳ bao gồm mảng rỗng [])
  • {a:1, b:2} (đối tượng bất kỳ bao gồm đối tượng rỗng {})
  • function () {} (hàm bất kỳ)

// câu điều kiện khi muốn kiểm tra 1 biến là truthy hay falsy.

if(a){
  // khi a có giá trị là `truthy`
}

if(!a){
  // khi a có giá trị là `falsy`
}

So sánh với toán tử logic ==

Khi so sánh sử dụng toán tử == có thể xảy ra các trường hợp không mong muốn.

js truthy falsy 1

Quy luật:

  • false, số 0 và chuỗi rỗng "" thì tương đương với nhau.
  • nullundefined thì tương đương với nhau nhưng chúng không tương đương với bất kỳ giá trị nào khác.
  • NaN không tương đương với bất kỳ giá trị nào kể cả chính nó (NaN == NaN) = false
  • Infinitytruthy nhưng khi so sánh với true hay false thì kết quả luôn trả về là false.
  • Một mảng rỗng có giá trị là truthy nhưng khi so sánh với true sẽ cho kết quả là false, so sánh với false sẽ cho kết quả là true.

So sánh với toán tử logic ===

So sánh với toán tử === rõ ràng và chặc chẽ hơn == do yêu cầu phải trùng khớp kiểu dữ liệu.

js truthy falsy 2

Ngoại trừ NaN vẫn không tương đương với bất kỳ giá trị nào, kể cả chính nó.

Vận dụng như thế nào?

Một vài chú ý khi sử dụng truthyfalsy trong Javascript để tránh những lỗi khó phát hiện.

Tránh so sánh trực tiếp giá trị

Khi cần so sánh một giá trị với boolean, ta ít khi phải so sánh trực tiếp chúng với true hay false mà chỉ cần xét đến giá trị đó là truthy hay falsy.

// thay vì dùng
if (x == false) {
  // khi x là false, 0, ‘’ hoặc []
}

// ta nên dùng
if (!x) {
  // khi x là falsy
}

Dùng === thay cho ==

Khi cần so sánh hai giá trị có giống nhau hay không ta nên dùng toán tử so sánh === (hoặc !==) thay cho == (hoặc !=) để tránh gặp vấn đề về chuyển đổi kiểu giá trị.

// thay vì dùng
if (x == y) {
  // câu điều kiện vẫn đúng nếu x = null và y = undefined
}

// nên dùng
if (x === y) {
  // chỉ xảy ra khi x và y hoàn toàn giống nhau
  // ngoại trừ trường hợp cả hai đều là NaN
}

Chuyển đổi sang giá trị boolean khi cần thiết

Bất cứ giá trị nào cũng có thể chuyển đổi sang giá trị boolean bằng cách sử dụng toán tử !!. Sử dụng toán tử này cho các giá trị false, 0, "", null, undefinedNaN chắc chắn sẽ nhận được giá trị là false. Khi muốn kiểm tra hai giá trị cùng là falsy hay truthy hay không:

// thay vì sử dụng
if (x === y) {
  // xảy ra khi x hoàn toàn bằng y, trừ khi x và y bằng NaN
}


// nên dùng
if (!!x === !!y) {
  // xảy ra khi x và y cùng là truthy hoặc falsy
  // bao gồm cả trường hợp x, y bằng NaN
}

An Tran

An Tran

A passionate web developer, self-learner and music lover.

Read More