O que são os Valores Truthy e Falsy no Javascript?

Qual a diferença entre os Truthy e Falsy? Saiba que você pode otimizar o seu código entendendo e aplicando corretamente esses conceitos.

O que são os Valores Truthy e Falsy no Javascript?

Você já passou por isso?

if(name === undefined){
   console.log("Insira um nome!")
}

Os conceitos de Truthy e Falsy explicam como o código acima pode ser refatorado, apesar de não estar incorreto.

Falsy

Falsy é a maneira como chamamos um valor que é considerado falso no Javascript.

Valores considerados falsy:

  • false
  • 0
  • ""
  • null
  • NaN
  • undefined

Com um exemplo no código:

if(false){console.log('Olá!')} // nada é exibido
if(0){console.log('Olá!')} // nada é exibido
if(""){console.log('Olá!')} // nada é exibido
if(null){console.log('Olá!')} // nada é exibido
if(NaN){console.log('Olá!')} // nada é exibido
if(undefined){console.log('Olá!')} // nada é exibido

Portanto, o primeiro exemplo poderia ser substituído dessa forma:

if(name === undefined){
   console.log("Insira um nome!")
}
// para
if(name){
   console.log("Insira um nome!")
}

Truthy

Truthy é como chamamos os valores que são considerados verdadeiros no Javacript.

Uma boa maneira de entender os valores Truthy, é enxergá-los como tudo que não seja falsy.

Mas aqui vão alguns exemplos:

if(true){console.log('Olá!')} // 'Olá!' é exibido
if(1){console.log('Olá!')} // 'Olá!' é exibido
if(new Date()){console.log('Olá!')} // 'Olá!' é exibido
if(2.2){console.log('Olá!')} // 'Olá!' é exibido
if({}){console.log('Olá!')} // 'Olá!' é exibido
if([]){console.log('Olá!')} // 'Olá!' é exibido
if("false"){console.log('Olá!')} // 'Olá!' é exibido
if(" "){console.log('Olá!')} // 'Olá!' é exibido

O ponto de atenção fica para as 4 últimas linhas, que podem ser facilmente confundidas com falsy.

Aqui vai um exemplo legal:

let numeros = [1,3,5]
if(numeros.length){
   console.log(numeros) 
}

Perceba que na linha dois, o código verifica se o array de números tem mais de zero números, excluindo a necessidade de uma comparação como: "numeros.length > 0".

Eai, o que achou?

A verdade é que não são conceitos complexos e muitas vezes o funcionamento é entendido por conta própria.

Mas também é importante saber o significado e entender as possibilidades de uso.