Truque simples para deixar sua aplicação JS mais robusta
"Não confie no JavaScript." –Todo programador que se preze.
Que o JavaScript é cheio de problemas, todos sabemos. Mas acredito que um dos maiores problemas são os valores e expressões truthy e falsy (ou boolean-ish).
O JavaScript tenta "booleanizar" as expressões dentro de um if (ou while). E essa é a causa de muitos bugs.
Por exemplo: if (0) é avaliado como if (false). Mas e se um valor numérico zero for válido para sua aplicação?
E if ([]) é avaliado como if (true). Mas e se um array vazio não for válido?
| Valor/expressão | Valor boolean-ish |
|---|---|
NaN |
false |
null |
false |
undefined |
false |
0 |
false |
"" (string vazia) |
false |
[] (array vazio) |
true |
{} (objeto vazio) |
true |
"true" (string) |
true |
"false" (string) |
true |
A solução
Para evitar esses problemas, garanta que as expressões avaliadas dentro de um if sejam verdadeiramente booleanas. Convertam valores em expressões ou funções que retornam um valor booleano.
Se x puder assumir o valor: |
Em vez de if (x), use: |
|---|---|
NaN |
if (Number.isNaN(x)) |
null |
if (x === null) ou if (null === x) |
undefined |
if (x === undefined) ou if (undefined === x) |
0 |
if (x === 0) ou if (0 === x) |
"" (string vazia) |
if (x === "") ou if ("" === x) ou if (x.length === 0) |
[] (array vazio) |
if (x.length === 0) ou if (0 === x.length) |
{} (objeto vazio) |
if (Object.keys(x).length === 0) ou if (0 === Object.keys(x).length) |
"true" |
if (x === "true") ou if ("true" === x) |
"false" |
if (x === "false") ou if ("false" === x) |
Mais exemplos
Se você quiser tratar strings "true" como true e "false" como false:
function getBooleanValueOf(str) {
return str.toLowerCase() === "true"; // Tudo o que não for "true" será tratado como false (inclusive "false")
}
if (getBooleanValueOf(x)) {
// ...
}
Se você espera um valor numérico qualquer, sendo zero um valor válido, mas ele pode ser undefined, use if (x !== undefined).
Quem mais pode contribuir?