JavaScript - Entendendo as partes estranhas \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 20 Horas 04 Min 30 Seg Tempo restante da oferta: 20 04 30 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) JavaScript - Entendendo as partes estranhas [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) # JavaScript - Entendendo as partes estranhas Conheça o motivo por trás de vários comportamentos considerados estranhos que o JavaScript possui. [ Akira Hanashiro ](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) 7 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/03/13164211/JAVASCRIPT-COISAS-ESTRANHAS.png) Olá Web Developers! Não importa a sua experiência com [JavaScript](https://www.treinaweb.com.br/blog/o-que-e-e-como-comecar-com-javascript/ "JavaScript"): se já tiver estudado outra linguagem de programação, provavelmente já achou algum comportamento do JavaScript um pouco estranho. Então vamos conhecer e entender algumas partes estranhas da linguagem. Mas antes já peço que você entenda que não existe comportamento errado em linguagem de programação. Cada linguagem é uma ferramenta criada com um propósito, e o criador tem a liberdade de escolher como cada funcionalidade vai se comportar. Falar mal do comportamento de uma linguagem seria o equivalente a tirar sarro de um cachorro por sua incapacidade de voar como os pássaros, não faz sentido. Então, vamos conhecer comportamentos estranhos que muitas vezes são tratados como piada, mas que você verá que possui uma certa lógica por trás disso. [ ![React Native - Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/react-native.svg) Curso React Native - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/react-native-fundamentos) ## 0.1 + 0.2 é diferente de 0.3 Essa é uma piada clássica com JavaScript que na verdade é uma certa injustiça. Tente fazer essa soma e terá o seguinte resultado: ```javascript 0.1 + 0.2 // > 0.30000000000000004 ``` Tudo no computador são 0 e 1. Então os computadores possuem certa dificuldade em trabalhar com números que possuem casas decimais, pois eles trabalham bem apenas com números inteiros. Números decimais são aproximações, o que pode causar imprecisão em certos cálculos. Eu digo que é uma injustiça falar disso apenas em relação ao JavaScript, pois **todas** as linguagens que utilizam cálculos com pontos flutuantes possuem esse problema. É algo tão conhecido que você pode conferir o site [http://0.30000000000000004.com/](http://0.30000000000000004.com/ "http://0.30000000000000004.com/"), que lista esta conta em várias linguagens de programação. Não é à toa que existem bibliotecas nas mais variadas linguagens para quem precisa trabalhar com cálculos muito precisos ou números muito grandes (ou muito pequenos). [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/E-BOOK-GRATUITO-COMECANDO-JS.png) ](https://www.treinaweb.com.br/ebook/guia-javascript) ## Soma e Subtração entre números e strings Um bom código não misturaria outros tipos de dados em soma e subtração além de números, até porque daria erro. Mas nosso amigo `JavaScript` é super de boa, ele não liga. E então algumas pessoas podem achar estranho um exemplo bem simples: ```javascript "3" - 1 //> 2 ``` Se deu certo, será que podemos fazer isso com a adição? ```javascript "3" + 1 //> "31" ``` No primeiro exemplo tivemos um resultado esperado, o número 2. Mas no segundo tivemos a `string` “31” ao invés do número 4. Isso ocorre porque o operador `-` só serve para subtração. Então a `string` “3” é convertida automaticamente para o `number` 3, nos permitindo ter o resultado correto da subtração. Porém, o operador `+` serve tanto para adição quanto para concatenar strings. No segundo exemplo, por termos a `string` “3”, o número 1 é convertido para `string` e ocorre a concatenação entre os valores ao invés de uma adição. Se a prioridade do operador `+` fosse adição, seria impossível concatenar números a uma `string`, como em: ```javascript const dia = 2; "Hoje é dia " + dia; ``` Essas conversões automáticas são causadas pelo JavaScript ser uma linguagem de tipagem fraca. Aqui no blog temos um post que explica [qual a diferença entre a tipagem forte e fraca](https://www.treinaweb.com.br/blog/quais-as-diferencas-entre-tipagens-estatica-ou-dinamica-e-forte-ou-fraca/ "qual a diferença entre a tipagem forte e fraca"). ## A comparação de null com 0 Só faz sentido comparar se um valor é maior que outro se ambos forem valores numéricos, mas este é um outro exemplo comum e uma dúvida que já foi feita por alguns alunos aqui da TreinaWeb. Veja as seguintes comparações entre `null` e `0`. ```javascript null > 0; //> false null < 0; //> false null == 0; //> false null >= 0; //> true null true ``` Se algo não é maior, menor e nem igual que algo, como pode ser maior igual e menor igual? Acontece que cada uma das expressões são validadas de forma diferente seguindo as regras de comparação da linguagem: - [7.2.12 Abstract Relational Comparison](https://www.ecma-international.org/ecma-262/#sec-abstract-relational-comparison "7.2.12 Abstract Relational Comparison") - [7.2.13 Abstract Equality Comparison](https://www.ecma-international.org/ecma-262/#sec-abstract-equality-comparison "7.2.13 Abstract Equality Comparison") Seguindo as regras de comparação relacional, nas comparações de `>` e `` e `=` e `= 0` é true, pois se algo não é menor, só pode ser maior ou igual”. Até que faz sentido, não é mesmo? [ ![PWA - Progressive Web Apps](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/pwa.svg) Curso PWA - Progressive Web Apps Conhecer o curso ](https://www.treinaweb.com.br/curso/progressive-web-apps) ## Erro ao ordenar números com .sort() Já vi palestrantes fazerem piada e tirarem gargalhadas da plateia por conta do seguinte comportamento ao tentar ordenar um `Array` de números: ``` [10, 1, 12, 2, 3, 25].sort() //> [ 1, 10, 12, 2, 25, 3 ] ``` Acredito que se esse palestrante tivesse pelo menos estudado como o `.sort()` funciona de verdade, teria evitado tratar isso como algo errado. Que bom que a plateia dele também não trabalhava com JavaScript, ou ele teria passado vergonha no palco. O comportamento padrão do `.sort()` é ordenar `strings`. Então, todos os nossos números são convertidos para `string`, o que explica o `"10"` vir antes de `"2"`, já que 1 vem antes de 2. Acontece que a conversão é feita apenas durante a comparação, por isso que os números no resultado continuam sendo do tipo `number`. Posso te provar com um exemplo bem simples: ```javascript ['[u', {nome: 'treinaweb'}, '[a'].sort() //> [ '[a', {nome: 'treinaweb'}, '[u' ] ``` O objeto `{nome: 'treinaweb'}` é convertido em `string` pelo método `.toString()`, resultando em `"[object Object]"`. Por isso que `"[a"` ficou antes e `"[u"` ficou depois, mas note que o `Array` ordenado manteve nosso objeto ao invés de deixá-lo convertido em `string`. Se você quiser ordenar coisas que não são strings, o jeito certo é passar uma função para `.sort()` e indicar as regras para ele saber qual elemento deve vir antes e qual deve vir depois. Assim você pode ordenar números ou até mesmo objetos por um ou mais campos, como nome e idade. ```javascript [10, 1, 12, 2, 3, 25].sort((a, b) => a - b) //> [ 1, 2, 3, 10, 12, 25 ] ``` ## Mais comparações com 0 Você já deve ter visto o seguinte meme sobre JavaScript baseado no desenho Bob Esponja, com Patrick e o Homem Raio no episódio `O Homem-Sereia e o Mexilhãozinho III`: \[caption id=“attachment\_13592” align=“alignnone” width=“1452”\]![JavaScript - Comparação entre zero, zero string e array vazio](https://dkrn4sk0rn31v.cloudfront.net/2020/03/31110910/4skcofasa1p01.png) Basicamente: ```javascript 0 == "0" //> true 0 == [] //> true "0" == [] //> false ``` Aqui é mais um caso em que há comparação entre dados de tipos diferentes. Quando fazemos comparações com `===`, se os tipos forem diferentes o JavaScript já vai retornar que é falso. Comparações com `==` que utilizam dados de tipos diferentes fazem que o JavaScript converta um dos dados para poder fazer a comparação de seus valores. Por isso que é uma boa prática sempre utilizar `===`, evitando comportamentos inesperados. Mas já que é algo recorrente nas redes sociais, vamos entender os motivos: ### 0 == “0” Como mostrado nas regras da linguagem ao fazer comparações de igualdade (Abstract Equality Comparison): > 4. If Type(x) is Number and Type(y) is String, return the result of the comparison x == ! ToNumber(y). Esse `ToNumber` é uma operação com as regras descritas na seção [7.1.3 ToNumber](https://www.ecma-international.org/ecma-262/#sec-tonumber "7.1.3 ToNumber") na especificação da linguagem. Então na comparação entre 0 e “0”, por termos um número e uma string, o JavaScript vai converter o “0” em um número. Como 0 é igual a 0, o resultado é `true`. ### 0 == \[\] Na comparação entre 0 e \[\] seguimos outra regra. \[\] é considerado um objeto. > 8. If Type(x) is either String, Number, or Symbol and Type(y) is Object, return the result of the comparison x == ToPrimitive(y). Esse `ToPrimitive` é uma operação com as regras descritas na seção [7.1.1 ToPrimitive](https://www.ecma-international.org/ecma-262/#sec-toprimitive "7.1.1 ToPrimitive") na especificação da linguagem. Então na comparação entre 0 e \[\], por termos um número e um objeto, o JavaScript vai pegar o valor primitivo de \[\]. Você pode fazer isso executando `[].toString()`, que retornará uma `string` vazia. E faz sentido se pensarmos que uma `string` é um `array` de caracteres. O JavaScript possui 8 valores considerados falsos. Qualquer coisa diferente disso é considerado verdadeiro: - 0 (número zero) - -0 (zero negativo) - 0n (0 no formato BigInt, seguindo a mesma regra do Number 0) - “” (strings vazias) - null - undefined - NaN Como `0` e `""` são valores falsos, a comparação entre 0 e \[\] (que é convertido em string vazia) é `true`, pois `false` é igual a `false`. ### “0” == \[\] Aqui seguimos a mesma regra do item anterior. Temos a comparação de uma `string` e de um objeto. `"0"`, por ser uma `string`, já é um tipo primitivo, então continua intacto. E como vimos anteriormente, `[]` é convertido numa `string` vazia. Conversões feitas, então basta fazer a comparação: `"0" == ""`. Seguindo a primeira regras das comparações, quando temos dois tipos iguais, a comparação é feita do mesmo jeito que o operador `===`. > 1. If Type(x) is the same as Type(y), then a. Return the result of performing Strict Equality Comparison x === y. Portanto, é simples de entender que uma `string` “0” é diferente de uma `string` vazia, certo? Por isso que o resultado dessa comparação é `false`. E então, o que achou desta lista? Conhecia a razão de algum comportamento? Comente e diga se você gostaria de uma parte 2. [ ![Desenvolvedor Front-end Júnior](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/html5-css3.svg) Formação Desenvolvedor Front-end Júnior Conhecer a formação ](https://www.treinaweb.com.br/formacao/desenvolvedor-front-end-junior) - [ #JavaScript ](https://www.treinaweb.com.br/blog/tag/javascript) - [ #Comportamento estranho no JavaScript ](https://www.treinaweb.com.br/blog/tag/comportamento-estranho-no-javascript) - [ #Coisas que não fazem sentido no JavaScript ](https://www.treinaweb.com.br/blog/tag/coisas-que-nao-fazem-sentido-no-javascript) - [ #Problemas com JavaScript ](https://www.treinaweb.com.br/blog/tag/problemas-com-javascript) Autor ![Akira Hanashiro](//secure.gravatar.com/avatar/d107ca73135bc62770a67ebbfe4cf80d?d=mm) ## Akira Hanashiro Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2024/09/aprender-framework-400x280.png) [ Carreira ](https://www.treinaweb.com.br/blog/categoria/carreira) 2 anos atrás ## [ Qual é o momento certo para aprender um Framework? ](https://www.treinaweb.com.br/blog/qual-e-o-momento-certo-para-aprender-um-framework) Descubra quando é o momento ideal para aprender um framework e como essa decisão pode impactar sua carreira como desenvolvedor. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/03/29143419/TW-ENTREVISTAS-FELIPE-MOURA-400x280.png) [ Entrevistas ](https://www.treinaweb.com.br/blog/categoria/entrevistas) 9 anos atrás ## [ TW Entrevista 02: Felipe Moura ](https://www.treinaweb.com.br/blog/tw-entrevista-02-felipe-moura) Fizemos uma série de entrevistas com desenvolvedores chamada “TW Entrevista”. O entrevistado de hoje é o Felipe Moura, co-fundador da Nasc e da maior conferência de JavaScript do mundo, a BrazilJS. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/06/PRE-PROCESSADORES-CSS-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 3 anos atrás ## [ Os Pré-Processadores CSS ](https://www.treinaweb.com.br/blog/os-pre-processadores-css) Nesse artigo veremos o que são, pra que servem e quais os pré-processadores CSS mais utilizados. Aprenda a dar super poderes ao CSS Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/02/CONHECENDO-VÁRIAVEIS-CONSTANTES-JAVASCRIPT-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 6 anos atrás ## [ Conhecendo variáveis e constantes no JavaScript ](https://www.treinaweb.com.br/blog/conhecendo-variaveis-e-constantes-no-javascript) Neste artigo vamos aprender a declarar e a utilizar constantes e variáveis no JavaScript, entendendo quando definir var, let e const. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/01/EXECUTAR-PRIMEIRO-CÓDIGO-JAVASCRIPT-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 6 anos atrás ## [ Como executar seu primeiro código JavaScript ](https://www.treinaweb.com.br/blog/como-executar-seu-primeiro-codigo-javascript) Vamos aprender e executar nosso primeiro código em JavaScript, entendendo sobre a utilização do console do navegador e ferramentas on-line. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/01/atributos-html-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ Entendendo os atributos HTML ](https://www.treinaweb.com.br/blog/entendendo-os-atributos-html) No artigo de hoje, veremos algo que está muito presente no mundo da programação, atributos. Por que são tão importantes para o Front-End? Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/08/EJS-400x280.png) [ Node ](https://www.treinaweb.com.br/blog/categoria/node-js) 5 anos atrás ## [ Utilizando template engine EJS com Node.js ](https://www.treinaweb.com.br/blog/utilizando-template-engine-ejs-com-node-js) Neste artigo vamos aprender a utilizar a Template Engine EJS com Node.js e também alguns recursos interessantes desta ferramenta. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/08/asp-net-conhecendo-as-minimal-api-400x280.png) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 4 anos atrás ## [ ASP.NET - Conhecendo a Minimal API ](https://www.treinaweb.com.br/blog/asp-net-conhecendo-as-minimal-api) Neste artigo vamos conhecer um dos recursos que foram adicionados no .NET 6/ASP.NET 6, que é um novo template de aplicações Web, a Minimal API. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/04/NEST-JS-COM-HANDLEBARS-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 4 anos atrás ## [ NestJS com template engine handlebars ](https://www.treinaweb.com.br/blog/nestjs-com-template-engine-handlebars) Neste artigo vamos aprender a configurar o NestJS com o handlebars, uma template engine que permite criarmos views dinâmicas e robustas. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/06/NODE-SQUELIZE-MYSQL-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 5 anos atrás ## [ Usando Sequelize ORM com Node e Express ](https://www.treinaweb.com.br/blog/usando-sequelize-orm-com-node-e-express) Vamos aprender a configurar uma aplicação com banco de dados MySQL usando Sequelize ORM com Node.js e Express. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/05/NEST-JS-UPLOAD-ARQUIVOS-400x280.png) [ Node ](https://www.treinaweb.com.br/blog/categoria/node-js) 3 anos atrás ## [ Trabalhando com Prisma ORM e NestJS ](https://www.treinaweb.com.br/blog/trabalhando-com-prisma-orm-e-nestjs) Neste artigo vamos aprender os primeiros passos para trabalhar com o Prisma ORM e o NestJS. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/01/12140601/carreira-de-desenvolvedor-de-aplicativos-como-comecar-400x280.png) [ Desenvolvimento Mobile ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-mobile) 9 anos atrás ## [ Carreira de desenvolvedor de aplicativos: como começar ](https://www.treinaweb.com.br/blog/carreira-de-desenvolvedor-de-aplicativos-como-comecar) Saiba como se tornar um desenvolvedor de aplicativos reconhecido pelo mercado. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **20h 04min 30s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58