Loading ...

O Blog de Tecnologia da Geofusion

Javacript: o lado obscuro

Javacript: o lado obscuro

Javascript é uma linguagem que todos programadores modernos precisam saber. É um pouco diferente de outras linguagens que acaba confundindo em alguns momentos. Tem como característica conceitos de função de primeira classe, tipos dinâmicos, herança de protótipo, callbacks e closure. Chegou a um nível que antes era  limitado somente aos navegadores, para plataformas completas server-side fáceis de construir, rápidas e escaláveis. Atualmente é fácil encontrarmos varias ferramentas de build systems, mini frameworks para criação de aplicação e ferramentas de desenvolvimento que sincronizam código que você esta trabalhando com o navegador. Tudo isso rodando server-side com javascript. Esse universo cresce a cada dia que passa. Vemos na parte de client-side novos frameworks eficientes focando em desempenho, flexibilidade, modernas arquiteturas e teste unitários. Técnicas como VirtualDOM que esta sendo muito falado atualmente e web components que todo dia sai um framework novo usando esse conceito de componentização, encapsulamento e reutilização.

Tudo isso é muito bom. É legal ver toda essa evolução que o javascript esta caminhando, mas temos alguns comportamentos esquisitos e problemas na linguagem e é sobre isso que se trata esse artigo. Um lado obscuro que é pouco falado, as vezes até inexplicável em algumas situações. Então hoje, vamos mergulhar bem a fundo nessas características e entender um pouco o que acontece. Se você é um desenvolvedor web, simplesmente não pode deixar de conhecer essas “coisas estranhas” que em algum momento você pode se deparar com um caso, e quando acontecer, você vai saber o que esta acontecendo com sua aplicação.

 

O que são esses comportamentos estranhos

Não existe um motivo apenas para explicar esses comportamentos estranhos. Muitos desses comportamentos  tem uma explicação devido a forma como o javascript trata os literais. O javascript permite converter tipos literais usando no inicio de um tipo “!” para boolean e “+” ou “-” para inteiro. Cada literal (array, string, object etc) se comporta de uma forma. Entendendo esse comportamento, conseguimos explicar algumas dessas coisas estranhas. Outro motivo é a conversão de tipos de dados. O Javascript é uma linguagem dinamicamente tipada. Isso significa que você não precisa especificar o tipo de dado de uma variável quando declará-la. São convertidas no momento de execução do script. Já outros comportamentos eu diria que não tem explicação. Defino como bugs que há muito tempo permanecem na linguagem. Operações que retornam resultados que não faz sentido algum.

Teoricamente é mais ou menos isso. Esse são alguns motivos, mas na realidade tem muito outros detalhes para explicar todo esse comportamento esquisito.  Vou apresentar alguns exemplos e comentar um pouco sobre o que acontece em cada caso. Vamos ver na prática o quanto isso é estranho, e eu diria que alguns casos até bizarros pelo resultado.

 

Comparações esquisitas

Vamos começar com comparações entre tipos e valores. Todo mundo sabe que javascript permite comparar tipos diferentes. O operador == ( igual a ) permite comparar apenas o valor e  === ( igual tipo e valor ) compara primeiro o tipo e depois o valor, sendo assim:

"50" == 50
// true
"50" === 50
// false

Ok, até ai tudo bem. Javascript é cross-type, então consigo comparar valores com tipos diferentes sem muito trabalho. Agora de fato vamos começar com as coisas estranhas:

[] == []
// false

Comparando array igual a não array, retorna verdadeiro.

[] == ![]
// true

Comparando objeto array igual a String com 3 virgulas, retorna verdadeiro.

Array(4) == “,,,”
// true

Comparando inteiro com boolean, retorna verdadeiro.

0 == false
// true

Agora complicou. Olhando o resultado de todas as comparações não faz sentido algum. Comparando um array com array, são tipos iguais com valores iguais e o retorno é falso.  Um array com um não array, tipos iguais mas explicitamente falando que um é não array e o retorno é verdadeiro. Zero é igual a falso. Enfim, bem esquisito.
2
Tipos de dados

Analisando um pouco do tipo de dado, um dos esquisitos é o null. O   null é ausente de valor significativo e também é um objeto em javascript. Porém, null não é considerado uma instância de um objeto, isso é muito fácil de confundir se apenas verificar o tipo. Veremos agora um exemplo:

typeof null
// object

Porém, null não é uma instância de objeto, o retorno é false.

null instanceof Object
// false

Isso acontece também com string.

“Uma string qualquer” instanceof String
// false

Outro tipo é o NaN que significa not a number. Se verificarmos qual o tipo de um NaN, ele retorna que é um number. Um not a number é um number, bem estranho de entender. E se compararmos um NaN igual a NaN retorna false. Nem eles se entendem.

typeof NaN
// number

NaN == NaN
// false

3
Cálculos mágicos

Agora vamos ver que javascript não sabe calcula. Nessa etapa veremos um comportamento muito estranho, que na minha opinião, é um bug. Isso pode causar grandes problemas principalmente quando a precisão dos cálculos é importante na sua aplicação.

Digitando 16 dígitos de 9, mágicamente aumenta o valor.

9999999999999999
// 10000000000000000

Mesmo subtraindo com -1, retorna o mesmo valor.

9999999999999999 – 1
// 10000000000000000

Soma de  0.1 + 0.2 é diferente de 0.3. Quando vemos o resultado apenas de 0.1 + 0.2 o retorno é 0.30000000000000004. Realmente não sabe somar.

0.1 + 0.2 == 0.3
// false

0.1 + 0.2
// 0.30000000000000004

Somar uma string com valor 2 mais 1 inteiro, o retorno é uma string com valor 21. O javascript entende que o operador “+” esta concatenando com o 1 inteiro. Usando o operador “-” consigo subtrair com o valor da string.

"2" + 1
// 21

“2” - 1
// 1

Mas como faço para somar um valor de uma string já que o javascript permite subtrair? Muito simples e complexo ao mesmo tempo:

"2" - - 1
// 3

Por favor, não façam isso em casa e nem no trabalho.
4
Javascript tem suas peculiaridades e é uma linguagem que tem características boas sim. Não é à toa que sua popularidade está em alta ultimamente. Esse artigo é para entender um pouco mais a fundo o seu funcionamento e suas particularidades. É pelo conhecimento de como se comporta e saber quais os resultados disso.

Então, essa é a informação que quero passar para todos os desenvolvedores front-end que gosta de javascript. E obrigado por ler até aqui.