Entendendo Falsy e Truthy no JavaScript

JavaScript 11 de Ago de 2020

Entender esses dois conceitos é essencial para devs JavaScript. São bastante utilizados no Back-end e Front-end da Aplicação.

Vamos ver na prática com alguns códigos a importância de entender e aplicar esses conceitos.

🟠 Falsy

Um valor Falsy é algo que foi avaliado como false, no processo de coerção (conversão de tipos).

Existem sete valores falsy:

falsy_values.js:

console.log("Listar os 7 valores falsy")
0 ? console.log("truthy") : console.log("falsy") // zero é falsy
0n ? console.log("truthy") : console.log("falsy") // zero BigInt é falsy
null ? console.log("truthy") : console.log("falsy") // nulo é falsy
undefined ? console.log("truthy") : console.log("falsy") // indefinido é falsy
false ? console.log("truthy") : console.log("falsy") // false é falsy
NaN ? console.log("truthy") : console.log("falsy") // Not a Number é falsy
"" ? console.log("truthy") : console.log("falsy")  // string vazia é falsy

Talvez você esteja se perguntando o que é aquele 0n : é a notação BigInt.

Executando esse código vamos ter falsy para todos!

🟣 Truthy

Ao contrário do Falsy, um valor Truthy é algo que foi avaliado como true, no processo de coerção (conversão de tipos).

Todos os valores são truthy, exceto os avaliados como falsy, obviamente.

Para título de exemplos os mais clássicos são:

truthy_values.js:

console.log("Alguns valores truthy")
true ? console.log("truthy") : console.log("falsy")  // true é truthy
({}) ? console.log("truthy") : console.log("falsy") // objeto vazio é truthy
([]) ? console.log("truthy") : console.log("falsy") // array vazio é truthy
1n ? console.log("truthy") : console.log("falsy") // 1n é truthy
17 ? console.log("truthy") : console.log("falsy") // número !== de 0 é truthy
new Date() ? console.log("truthy") : console.log("falsy") // objeto é truthy
3.4 ? console.log("truthy") : console.log("falsy") // número decimal é truthy
-99 ? console.log("truthy") : console.log("falsy") // número negativo é truthy
Infinity ? console.log("truthy") : console.log("falsy") // infinito positivo é truthy
-Infinity ? console.log("truthy") : console.log("falsy") // infinito negativo é truthy
"Rocketseat" ? console.log("truthy") : console.log("falsy") // String com valor é truthy
"🚀 💺" ? console.log("truthy") : console.log("falsy") // Mesmo exemplo de cima!
" " ? console.log("truthy") : console.log("falsy") // String com espaço em branco é truthy (cuidado)!

Embora eles são valores truthy, não quer dizer que são iguais:

console.log({} == []); // false
console.log({} === []); // + false ainda pq compara o valor e o tipo

Um objeto {} não é um array [].

💻 Obtendo um valor falsy/truthy

Para forçar a coerção de tipos e verificar se um valor é falsy ou truthy podemos usar !!.

Exemplo:

console.log(!!" "); // string com espaço em branco é truthy

console.log(!!""); // string vazia é falsy

Cuidado nessa parte! Se o usuário digitar um espaço em branco no seu formulário pode quebrar a sua validação.

console.log(!!" ".trim()); // agora é false!!!

🌎 Exemplos práticos no mundo real:

Se o array está vazio renderiza o <p>

{todoList.length === 0 && (
   <p>Nada para fazer! 🏖️ </p>
)}

O número 0 é falsy.

Outro exemplo:

Renderize a div com o título, mas só renderiza a descrição se a String for truthy:

<div>
   <strong>{message.title}</strong>
     {!!message.description && <p>{message.description}</p>}
</div>

Aqui vemos a coerção de tipos na prática.

message.descrição é uma String, com o operador !!message.description estou obtendo o valor falsy ou truthy.

Se a String description for false, a condição para por ali mesmo. Se estiver true, continua a operação e exibe o <p>{message.description}</p>.

Vamos ver um exemplo no Back-end Node.js com a funcionalidade de alteração de senhas do usuário.

Não muda nada, pois é tudo JavaScript:

if (password && !old_password) {
  throw new Error(
     'Precisa informar a senha antiga para para criar uma nova.',
   );
}

Veja que password e old_password são Strings, se password estiver preenchida (true) e !old_password não estiver, então entra na condição e lança um erro para o usuário.

"" // falsy
"1234Passwd" // truthy

Último exemplo:

if (token[1] && user[1]) {
   setData({ token: token[1], user: JSON.parse(user[1]) });
 }

Verifico se na posição 1 do array de token e de user possuem valores, se sim passa na condição e atribui no objeto que a função setData está invocando. Interessante que se o valor que estiver presente nessas posições for falsy, não passam na condição.

🏁 Conclusão

Esses conceitos abordados, juntos com lógica de programação serão utilizados diariamente por devs em suas carreiras! Entender falsy/truthy vai ajudar no processo de construção de Apps com React ou com toda a tecnologia do ecossistema JavaScript!

🗽 Curiosidade sobre true vs truthy no inglês

Do you know the difference between these two words: True vs Truth? The word TRUE is your perspective of something. The word TRUTH is universal and cannot be changed.