7

Me ocorreu na parte sobre booleanos, o seguinte problema.

Tenho esta variável:

var name = "10kg" / 10;

if (name) {
  console.log(name);
} else {
  console.log("Not exist");
}

A mesma deveria me retornar: Not Exist, no console. Porém aparece como NaN (Not a Number).

Acabei de ler a documentação no Firefox e diz que se for 0, -0, null, NaN, underfined, essa tem que me retornar false, ou seja como determinei Not Exist, porém nesse caso eles retornarão os resultados na condição do else.

Eu escrevi o código errado? A regra mudou? Ou não interpretei corretamente a documentação?

Pois na aula foi feito dessa forma e apareceu no console o resultado desejado.

2
  • 2
    O curioso é que se testar esse código no NodeJs esse código retorna Not exist e se o testar no Deno ele não compila com o erro error: TS2362 [ERROR]: The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type. let name = "10kg" / 10; com o "10kg" desatacado. Commented 30/11/2020 às 14:16
  • Isso é realmente com o colega explicou, são armadilhas, e os novatos (eu aqui tbm me incluo), caem nisso e nem fazem ideia do ocorrido. Muito estranho. Commented 30/11/2020 às 14:18

3 Respostas 3

11

Regras de linguagens de programação não podem mudar, o mundo inteiro depende delas estáveis, quebraria tudo o que as pessoas fizeram.

Bem, na verdade até mudam quando havia um erro grave na linguagem, ou estamos falando de PHP que não se importa em quebrar um monte de coisa e deixar todo mundo na mão. Mas nem sei se isso é ruim porque eles melhoram vários erros que a linguagem tinha. Claro, tem um lado bem ruim.

JavaScript é uma linguagem cheia de regras ruins. Quase todos problemas da linguagem está relacionada com as regras mal definidas.

Tipagem dinâmica contra o DOM

No caso específico há erros por causa da tipagem fraca que é algo que uma linguagem não deveria ter, isso causa vários problemas, e há erro por causa da implementação mal feita do DOM no navegador.

Vamos mudar o código para ver melhor o que está acontecendo:

var name = "10kg" / 10;
console.log(typeof name);
if (name) console.log(name);
else console.log("Not exist");

Coloquei no GitHub para referência futura.

Note que a variável name é do tipo string. Então como um número é do tipo string? Ao contrário do padrão que aprendemos que JS tem tipagem dinâmica, variáveis de objeto do DOM não são de tipagem dinâmica e se você colocar um valor de um tipo diferente do que espera aí sim a linguagem implicitamente converte o valor para o tipo da variável.

Coloquei no GitHub para referência futura.

Tipagem fraca

Então tem outro erro de tipagem fraca. Quando um texto pode ser completamente convertido para número ele é, e isso não deveria acontecer. Mas quando tem uma parte que é texto, a conversão não ocorre, e aí em vez de gerar um valor válido gera um NaN.

Depois vem outro erro da tipagem fraca. Quando usa um valor em um lugar que espera um booleano ele usa a regra de conversão automática para obter o valor esperado, e uma string com um texto qualquer é verdadeiro. A regra é bem clara quanto a isso, só uma string vazia é falsa (que é outra regra esquisita). Aí tem um texto, não é vazio. Isso deveria ser proibido em qualquer linguagem decente, mas não é em JS.

Três conversões automáticas que não deveriam ter sido feitas causaram a confusão. E em geral as pessoas não entendem ou não sabem delas. Justamente por não ser intuitivo não deveria ser permitido.

O que você tem que fazer?

  • Nunca use um valor que não seja especificamente do tipo que deseja. Não faça uma divisão com uma string e não use um valor que não seja um booleano onde se espera um valor assim, como o if por exemplo. Se você sempre lembrar disso JS será uma experiência muito melhor para você.
  • Nunca use nome de variáveis do DOM, a não ser que ela seja tratada como local. Já explico

Feito assim nem precisa do if porque ele trata de um erro de programação, e erros de programação devem ser consertados e não verificados em execução, não pode ser tratado como algo válido, ainda que a linguagem permita.

Fiat 147 todo detonado andando pelas ruas

Ainda que este caso nem funcionou com o resultado esperado.

Funciona perfeitamente (mas ainda não é certo):

var name = 10 / 10;
if (name) console.log(name);
else console.log("Not exist");

Coloquei no GitHub para referência futura.

Melhor ainda para criar um booleano do jeito certo:

var name = 10 / 10;
if (name != 0) console.log(name);
else console.log("Not exist");

Coloquei no GitHub para referência futura.

Nome de variável inadequado

Uma variável numérica chamada name gera confusão (geraria mesmo que fosse nome porque nomes não são números). E aí vemos o problema do JavaScript (no navegador). Vamos mudar o nome:

var x = "10kg" / 10;
console.log(typeof x);
if (x) console.log(x);
else console.log("Not exist");

Coloquei no GitHub para referência futura.

Note que mudando o nome da variável o comportamento é outro. A conversão não é feita e acontece o que esperava. Na verdade até tem uma conversão, mas ela é feita depois.

name na verdade não é uma variável local, ela é a variável do DOM cujo nome completo é window.name e não pode ter seu tipo trocado.

Dá para usar o name se garantir que está usando uma variável local:

let name = "10kg" / 10;
console.log(typeof name);
if (name) console.log(name);
else console.log("Not exist");

Coloquei no GitHub para referência futura.

Por isso no Node/Deno pode acontecer diferente (veja comentário acima), o que é outra maluquice do ecossistema inteiro. Mas nada estranho porque toda tecnologia web foi mal pensada.

Conclusão

E esse é mais um motivo que eu posso afirmar que tipagem dinâmica é errada na maioria dos cenários, não é só tipagem fraca que é ruim em todos. Até mesmo em scripts que eu achava certo, está errado porque eles costumam ser usados embarcados em outras aplicações que não possuem tipagem dinâmica e cria uma impedância, e aí acontece tudo isso.

JavaScript não deveria permitir conversões automáticas que causam confusão. Mesmo no caso do DOM que não pode ter tipagem dinâmica, a solução deveria ser dar um erro de execução quando tenta mudar o tipo da variável e não fazer uma conversão sem sentido. Viola o estilo de tipagem, mas não gera um resultado falso.

1
  • Muito obrigado, achei muito boa sua explicação vou anotar isso, para não esquecer. Vlu mesmo. Commented 30/11/2020 às 14:11
9

Isso não é nenhum problema na sua lógica. Isso é uma armadilha do JavaScript.

No JavaScript do seu navegador, quando você declara uma variável no escopo global, ela se torna uma propriedade do objeto window.

Assim como outros elementos do html como head, body, div, etc, o objeto window também possui uma propriedade chamada name. Essa propriedade name porém possui um setter, e esse setter irá transformar qualquer valor que você atribuir para ele numa string, pois por padronização, a propriedade name de um elemento só pode armazenar strings.

Como você utilizou uma variável chamada name no seu escopo global, você na verdade está armazenando o valor de NaN na propriedade name de window, o que significa que NaN está sendo convertida numa string 'NaN', e como você deve saber, um string não vazia é tratada como uma condição verdadeira.

Faça o teste.

Utilizando name:

var name = "10kg" / 10;

if (typeof name === 'string') {
  console.log('name é uma string')
}

if (name) {
  console.log('e como name é uma string não vazia, ela é verdadeira')
}

Utilizando qualquer outro nome:

var result = "10kg" / 10;

if (typeof result === 'string') {
  console.log('name é uma string')
} else {
  console.log('result NÃO é uma string')
}

if (result) {
  console.log('e como result é uma string não vazia, ela é verdadeira')
} else {
  console.log('result é de fato NaN, e portanto, é uma condição falsa')
}

1
  • Muito obrigado támbem, informação muito precisa, não sabia desses detalhes, vou anotar támbem para não esquecer e utilizar em meu código. Commented 30/11/2020 às 14:14
8

Isso não é uma armadilha do JavaScript, na verdade é uma "armadilha do JavaScript em navegadores" e não tem haver com tipagem.

Quando você usa name no escopo principal ele vai entender que se refere ao window.name, que por padrão já vem setado como uma string vazia, o valor de "10kg" / 10 será NaN, como a propriedade Window.name só aceita string ele vai fazer um "cast" automático para string, fazendo o valor em "NaN", então por isso que ocorre do name.length funcionar, se por acaso usasse qualquer outro nome de variável que não exista no escopo principal em window.{...} vai ocorrer um erro, já que não vai converter para string:

var foobar = "10kg" / 10;

console.log("variável foobar:", foobar);
console.log("typeof foobar:", typeof foobar);

var name = "10kg" / 10;

console.log("variável name:", name);
console.log("typeof name:", typeof name);

Veja que a variável foobar retornou Number (mesmo que NaN signifique não ser um numero, ainda sim é parte dessa interface e por isso o typeof retorna assim).

Qualquer outra propriedade "writable", por exemplo, se fizer var location = "10kg" / 10; no escopo principal você irá fazer a página redirecionar para um endereço como http://localhost/NaN:

Resultado no navegador

Ou seja, as propriedades do objeto Window podem ter variados comportamentos.

Note que uma situação semelhante em navegadores ocorre com IDs de elementos em páginas HTML:

Elementos com id="..." ficam disponíveis como propriedades do window.

Em Node.js

Em o código:

var name = "10kg" / 10;

console.log("variável name:", name);
console.log("typeof name:", typeof name);

o resultado será:

C:\Users\user>node index.js
variável name: NaN
typeof name: number

Ou seja, não é mesmo um problema com JavaScript e sim com certas decisões que implementações iniciais do JavaScript (NetScape/Mozilla), JScript (Internet Explorer), entre outros (época das primeiras guerra dos navegadores), essas decisões provavelmente se mantém por questões de retrocompatibilidade.

Usando let (ou const)

Como já explicado em Qual é a diferença entre declaração de variáveis usando "let" e "var"?, o comportamento do let é diferente de var, observe como não ocorre o problema:

let name = "10kg" / 10;

console.log("variável name:", name);
console.log("typeof name:", typeof name);

O mesmo irá ocorrer com const, não irão acessar a propriedades de window.

No entanto note que certas propriedades podem ser não configuráveis (non-configurable), mesmo com let não vai resolver, ocasionando o erro:

SyntaxError: redeclaration of non-configurable global property location

let location = "10kg" / 10;

console.log("variável location:", location);
console.log("typeof location:", typeof location);

Portanto uma melhor saída para evitar certos acidentes é isolar o escopo, como por exemplo com IIFE ou usar let em um block ({...}) (veja os exemplos a seguir).

Usando IIFE (Immediately Invoked Function Expression)

Antes de termos o let já existia uma "técnica" para evitar o escopo principal, que também ajuda evitar que outros scripts não relacionados conflitem no escopo principal, ficando assim:

(function () {
    var name = "10kg" / 10;
    var location = "10kg" / 10;

    console.log("variável name:", name);
    console.log("typeof name:", typeof name);

    console.log("variável location:", location);
    console.log("typeof location:", typeof location);
})();

Claro que isso não é a mesma coisa que o let, só estou citando como um meio de isolar o escopo, nessas respostas algumas falam mais sobre isso:

Respostas do site sobre o assunto:

Usando block e let

Se pretende rodar os scripts somente em navegadores modernos sem se preocupar com retrocompatibilidade, então pode combinar block ({...}) com let, poderá setar variáveis sem afetar o escopo global

{
    let name = "10kg" / 10;
    let location = "10kg" / 10;

    console.log("variável name:", name);
    console.log("typeof name:", typeof name);

    console.log("variável location:", location);
    console.log("typeof location:", typeof location);
}

Este exemplo irá funcionar no Internet Explorer 11, mas não irá funcionar em anteriores, como IE8, IE9 e IE10.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .