JavaScript

Testes de Performance JavaScript

Olá Web Developers! Há momentos em que precisamos que um determinado código tenha um melhor desempenho. Certamente você já deve ter visto vários códigos diferentes fazendo a mesma coisa. Então vem a dúvida: no código que preciso criar, qual será mais rápido? E então vamos precisar fazer testes de performance.

Vamos conhecer algumas maneiras mais simples para se fazer isso.

console.time()

O console do JavaScript possui vários métodos. A fim de calcular o tempo de uma operação, temos o método time(). Precisamos passar para ele um nome que servirá de identificador único para o nosso timer. Após a execução do que queremos calcular usamos o método timeEnd(), com a finalidade de encerrar o timer criado.

Em uma mesma página você pode ter até 10.000 timers. Então pode ficar tranquilo que não vai faltar 😂

console.time('meu timer');
minhaFuncao();
console.timeEnd('meu timer');

Como resultado teremos o nome do timer impresso seguido do tempo, em milissegundos, que a operação levou para ser concluída.

JavaScript Console - Time

Já que o console do navegador fica responsável por calcular o tempo por um simples nome, é muito útil caso você queira indicar o início da contagem em um arquivo e quer finalizar em outro.

Google Chrome Developer Tools
Curso de Google Chrome Developer Tools
CONHEÇA O CURSO

performance.now()

A API performance possui o método now(), com o intuito de retornar o tempo que se passou desde que o documento foi criado. Portanto, ele também pode ser usado para fazer testes de performance.

const inicio = performance.now();
minhaFuncao();
const fim = performance.now();
console.log(`A operação levou ${fim - inicio} milissegundos`);

Conseguimos o tempo de execução da mesma forma. Porém, como o performance.now() nos retorna o tempo que se passou desde que o documento foi criado, a diferença entre início e fim fica por nossa conta.

JavaScript - Performance.now

Ferramentas Online

Também existem ferramentas online para esses testes de performance. Um exemplo é o https://jsben.ch/. Ele possui dois campos para se colocar códigos. Basta colocar os dois códigos que você quer comparar e mandar executar. Como resultado teremos uma indicação de qual foi o código mais rápido.

JavaScript Avançado
Curso de JavaScript Avançado
CONHEÇA O CURSO

Cuidado ao querer fazer testes de performance

Por mais que seja importante cuidar da sua aplicação para dar a melhor experiência possível ao usuário, evite ficar focando em micro-otimizações. Coisas como querer melhorar um looping com poucos elementos são desnecessárias.

Foque em coisas que exijam realmente muitos cálculos e que possam fazer a aplicação engasgar em dispositivos com hardwares mais simples. Isso se aplica normalmente a animações, jogos e outras coisas que possam precisar de várias execuções custosas em um período muito curto.

Se acaso sua aplicação não se encaixe nisso mas ainda apresenta alguns comportamentos que precisam ser melhorados, provavelmente utilizar a técnica de Debounce ou deixar as operações assíncronas já vai resolver.

JavaScript – Comandos do Console

Olá Web Developers! Muitos programadores JavaScript usam o comando console.log para ajudar a debugar seus códigos. Porém, há vários comandos do console que ficam de fora de suas rotinas, e que são muitas vezes mais indicados para certas ocasiões.

Comandos do Console para Logs

Os comandos do console mais comuns são os que imprimem algo. O método mais usado é o .log(), que simplesmente imprime uma mensagem.

Similarmente podemos usar outros métodos:

  • .info(): possui um comportamento parecido com o .log()
  • .warn(): imprime uma mensagem em estilo de alerta
  • .error(): apresenta uma mensagem de erro

Além disso, já mostrei aqui no blog como estilizar as mensagens do console no navegador. Também pode ser bem útil.

Exibindo dados em tabelas

Se você precisa analisar vários dados que estão dentro de um Array, pode ser mais interessante usar o comando .table(). Se você passar um Array com objetos, eles serão exibidos em uma tabela. Você pode até escolher ordenar os dados por um campo.

JavaScript Console - Table

Além disso, você também pode passar um objeto. Neste caso, cada propriedade do objeto será exibida em uma linha da tabela.

Lista interativa das propriedades do objeto

Às vezes queremos imprimir coisas como um elemento do DOM. Porém, isso faz o elemento HTML ser impresso no console. Em contrapartida, caso você queira que as propriedades do elemento sejam exibidas, você pode usar o console.dir() no lugar.

O dir() faz com que todas as propriedades de um objeto sejam exibidas. Veja a comparação em relação ao console.log ao imprimir um elemento <h2>.

JavaScript Console - Dir

JavaScript Avançado
Curso de JavaScript Avançado
CONHEÇA O CURSO

Comandos do Console para Agrupar Informações

Certamente você já teve a necessidade de imprimir vários valores juntos. Caso tenha usado o console.log(), há uma chance do log ter ficado um pouco bagunçado.

Há comandos do console que nos fornecem uma maneira simples de agrupar vários logs. Veja no código abaixo:

console.group('Cursos');

   console.log('TreinaWeb')
   console.groupCollapsed('Categorias')
      console.log('Front-End');
      console.log('Back-End');
      console.log('Mobile');
   console.groupEnd()

   console.log('AvMakers')
   console.groupCollapsed('Categorias')
      console.log('Edição de Vídeo');
      console.log('Modelagem 3D');
      console.log('Motion Design');
   console.groupEnd()

console.groupEnd()

Usamos o .group() para criar o nome de um grupo. Em seguida nós usamos o .log() normalmente. Ao final, fechamos o grupo com .groupEnd(). Os grupos criados podem ser fechados, ou seja, por padrão eles são apresentados abertos.

No entanto, você pode declarar grupos que sejam apresentados já fechados. Basta usar o .groupCollapsed() no lugar de .group(). Dessa maneira, caso haja muitos dados, seu console não ficará tão bagunçado.

JavaScript Console - Group

A identação usada nesse código não é necessária. Eu coloquei apenas para deixar o código mais legível para mostrar onde um grupo inicia e onde ele é encerrado.

Contando Ocorrências

É provável que em algum momento você precise saber quantas vezes um código foi executado. E temos os comandos do console .count() e .countReset() exatamente para isso!

Primeiramente precisamos passar um nome para o .count(), como console.count('cadastro'). Sempre que esse comando for executado, um contador vai ser incrementado e impresso no console.

Para que o contador seja reiniciado, basta indicar o nome do contador para o .countReset(), como console.countReset('cadastro').

Indicando o caminho de execução

Sabe quando você precisa se lembrar como determinada função está sendo chamada, mas não lembra o caminho? Para que você poupe tempo, experimente usar o .trace.

function cadastrar() {
  enviarDados();
}

function enviarDados(){
   console.trace();
}

cadastrar()

Como resultado, você terá o caminho, a lista de funções executadas, até chegar no console.trace().

JavaScript Console - Trace

HTML5 e CSS3 - Desenvolvimento web Avançado
Curso de HTML5 e CSS3 - Desenvolvimento web Avançado
CONHEÇA O CURSO

Contando o tempo

Também temos o comando console.time() para indicar o início e fim de uma contagem de tempo. É um comando muito bom para você verificar quanto tempo uma operação está levando. Falei melhor sobre esse comando no post das várias formas que temos para Testes de Performance em códigos JavaScript.

Limpando a bagunça

Com o fim de seus testes, você pode limpar o console com as teclas Ctrl + L. Mas isso também pode ser feito programaticamente com o comando console.clear(). Quando estou testando algo e já tenho muitos logs ou o programa está dando vários alertas que ainda estou investigando, costumo executar esse comando para limpar o console para mim logo na inicialização da aplicação. Assim meus logs não se misturam com outros.

O que é o Vue.js?

Atualmente, graças à popularização do JavaScript, existe uma grande variedade de frameworks front-end para diferentes propósitos. Neste artigo, será abordado o Vue.js, um dos frameworks JavaScript SPA da atualidade.

Afinal, o que é Vue.js?

É um framework JavaScript open source para a criação de aplicações web, criado por Evan You em 2014. O Vue.js possibilita criar aplicações de forma reativa. O Vue.js faz a utilização de um DOM virtual, o que faz com que seja extremamente performático na maioria das situações. Além disso, conta com uma arquitetura muito bem estruturada por meio da criação de componentes reusáveis.

Este framework é muito utilizado para criar aplicações SPA (Single Page Applications) e também para desenvolver vários outros tipos de interfaces, com foco na interação e experiência do usuário. Atualmente e não à toa, o Vue.js está entre os frameworks Javascript para criação de interfaces mais populares do mundo, devido à sua baixa curva de aprendizado, sua versatilidade e por oferecer uma solução bem completa – contando até mesmo com uma CLI, o Vue CLI.

Além disso, possui uma boa documentação oficial (inclusive em português) e sua comunidade é bem ativa e não para de crescer. Dessa forma, o Vue.js é um dos frameworks prediletos por parte dos desenvolvedores, como podemos ver pelo StackOverflow Insights.

gráfico Vue.js

Vantagens e desvantagens

Vantagens
  • Acessível: com um conhecimento básico em HTML, CSS e JavaScript, você já consegue construir uma aplicação básica;

  • Versátil: possui um ecossistema incremental e progressivo, oferecendo soluções prontas e padronizadas para a grande maioria das situações;

  • Excelente desempenho;

  • Progressivo: se você já tiver uma aplicação server-side por exemplo, você pode utilizar o Vue em apenas uma parte da aplicação, utilizando inclusive somente os módulos que sejam de fato necessários.

Desvantagens
  • Complexidade do paradigma reativo: este framework “leva a sério” os princípios da programação reativa, o que pode trazer um pouco de complexidade no começo;

  • Excesso de flexibilidade: o Vue.js é um framework extremamente flexível e não muito opinativo, o que pode trazer problemas de falta de padronização de código em algumas equipes e em projetos de maior escala;

  • Recursos um pouco mais limitados em relação a outros frameworks SPA: embora o Vue.js seja querido e conte com uma comunidade bem ativa, oferecendo uma série de soluções para os problemas mais comuns; o Vue.js ainda não conta com a mesma quantidade de recursos (como plugins) que seus concorrentes diretos possuem – o Angular e o React.

Vue.js - Criação de interfaces web
Curso de Vue.js - Criação de interfaces web
CONHEÇA O CURSO

Considerações finais

Por fim, podemos ver que este é um framework que vem evoluindo, proporcionando cada vez mais recursos em relação às suas primeiras versões. É uma boa escolha para um framework JavaScript SPA, sendo bem simples de se trabalhar, se destacando pela sua simplicidade, sua progressividade e sua flexibilidade.

Por último e não menos importante, vale lembrar que não existe “o melhor framework”: essa escolha certamente irá variar muito de acordo com cada projeto. Para determinados projetos, o Vue.js pode ser a melhor solução; assim como para outros projetos talvez o Angular ou o React sejam escolhas melhores. Não existe o “melhor” ou o “pior” framework, e sim aquele que melhor se adeque à necessidade de cada projeto.

O que é Bootstrap?

Os frameworks são ferramentas incríveis e que poupam muito tempo dos desenvolvedores. Neste artigo, vamos conferir o Bootstrap, um dos mais populares frameworks front-end atualmente.

Afinal, o que é o Bootstrap?

O Bootstrap é um framework front-end gratuito e de código-fonte aberto, que disponibiliza componentes prontos para você utilizar em seu projeto. Com ele, você consegue criar e personalizar sites responsivos para dispositivos móveis, desktops e notebooks, com componentes pré-construídos e com plugins JavaScript poderosos. Tudo isso porque toda a estrutura do HTML, CSS e Javascript já se encontram prontas, bastando apenas que o desenvolvedor importe suas dependências em seu projeto.

Por exemplo: se você quer colocar em seu site um botão estilizado, você pode utilizar o componente button do Bootstrap diretamente, ou mesmo fazer pequenas customizações no componente para que ele tenha a aparência desejada. Com estes componentes pré-prontos, você ganha tempo, o que consequentemente faz com que seu projeto seja finalizado mais rapidamente, com menos esforço e até mesmo com mais qualidade.

Primeiramente, o Bootstrap foi desenvolvido pelo Twitter, onde inicialmente era apenas um projeto para padronizar o desenvolvimento dentro da própria empresa. Porém, no meio do desenvolvimento do projeto, a equipe percebeu o potencial que este framework tinha para impactar e trazer benefícios para a comunidade. Dessa maneira, ele foi liberado em 2011 já como um projeto open source, ou seja, para que os outros desenvolvedores pudessem contribuir. De lá pra cá, nesse meio tempo, foram muitas mudanças até chegar sua atual versão 4, que possui inúmeras novidades tanto nos componentes CSS quanto nos componentes JavaScript.

Por que utilizar o Bootstrap?

O Bootstrap segue os princípios de usabilidade e tendências de design para interfaces. Além disso, sua padronização permite que os sites tenham um visual atraente, ou seja, uma forma de criar páginas esteticamente agradáveis aos usuários. Ele conta ainda com componentes e plugins já prontos para você utilizar em seus projetos, o que faz com que você ganhe muita produtividade na hora de desenvolver.
Você pode adaptar o modelo-base do Bootstrap para atender às necessidades do seu projeto.

framework Bootstrap

As APIs do Bootstrap são tão poderosas e flexíveis que você tem total liberdade para personalizar os componentes da maneira como desejar com um mínimo de esforço. Nas figuras abaixo, temos exemplos de componentes do Bootstrap que foram livremente personalizados.

Componentes do Bootstrap

Com o Bootstrap, você também não precisa se preocupar se seu site funcionará bem em todas as diferentes resoluções de dispositivos: o Bootstrap já contém componentes responsíveis, já diminuindo consideravelmente o esforço envolvido na criação de interfaces plenamente responsivas.

Vantagens e desvantagens

Algumas vantagens e algumas desvantagens podem ser destacadas com relação a este framework.

Vantagens:
  • Responsividade: possui um sistema de layout 100% responsivo, capaz de manter a página completamente responsiva em diferentes dispositivos e resoluções;
  • Extensa biblioteca de componentes: possui um conjunto de componentes extenso, como ícones, painéis etc.;
  • Documentação: possui uma documentação bem completa e acessível;
  • Reuso de código: Como o Bootstrap entrega uma gama muito grande de componentes pré-prontos, se torna muito mais fácil lidar com questões como reusabilidade de código.
Desvantagens
  • Excesso de padronização: como a gama dos componentes pré-prontos é extensa e atende a praticamente todos os cenários no que diz respeito ao desenvolvimento de páginas web responsivas, as diferentes aplicações podem acabar ficando “com a mesma cara”. Porém, sua customização é bastante simples.
Bootstrap 4 - Fundamentos
Curso de Bootstrap 4 - Fundamentos
CONHEÇA O CURSO

Como aprender sobre o Bootstrap?

O Bootstrap é muito simples para aprender e customizar. Além da documentação oficial, temos os nossos cursos de Bootstrap, que acabaram de ser atualizados. Então, vale a pena dar uma conferida 🙂

Se você é um desenvolvedor front-end ou deseja seguir essa carreira, é interessante colocar o Bootstrap em seu plano de estudos. Ele irá te auxiliar muito no desenvolvimento de seus sites, fazendo-o ter muita produtividade. Você também pode utilizá-lo com outras ferramentas atuais do mercado como o Angular e o React.

Quando falamos de frameworks de componentes visuais, o Bootstrap não é o único no mercado. Alguns de seus concorrentes diretos são o Materialize e o Foundation. Porém, a simplificação e a baixa curva de aprendizagem ainda fazem o Bootstrap ser um dos frameworks mais adotados pelo mercado.

O que é o Angular e para que serve?

Frameworks SPA atualmente são um padrão de mercado quando falamos sobre desenvolvimento front-end. Neste artigo, vamos abordar um dos mais populares frameworks JavaScript da atualidade: o Angular.

Afinal, o que é o Angular?

É um framework JavaScript de código aberto mantido pela Google para a construção de SPA (sigla para Single Page Applications ou Aplicações de Página Única). Resumidamente, uma SPA é basicamente uma aplicação web construída em uma só página, na qual a interação e a navegação entre as sessões de uma página ocorrem de maneira a qual não é necessário recarregar a página em cada uma dessas mudanças.

Sua finalidade é nos dar ferramentas necessárias para criação de aplicações SPA, além disso também deixa o desenvolvimento deste tipo de aplicação mais simples e otimizado. Com ele, podemos desenvolver aplicações web voltadas tanto para resoluções desktop quanto para resoluções mobile, tornando-as dinâmicas, modernas e escaláveis.

Com o Angular, temos um novo paradigma de desenvolvimento focado nos dados da aplicação. Ele não utiliza uma virtualização do DOM para manipulá-lo: ele utiliza mecanismos próprios de detecção de alterações na interface, alterações tas disparadas principalmente por uma estrutura chamada Two-Way Data Binding.

O Two-Way Data Binding mantém o model e a view sempre atualizados entre si, ou seja: sempre que algum model é atualizado, essa alteração se reflete automaticamente na view.

AngularJS ou somente Angular?

Provavelmente, você já ouviu falar de Angular e AngularJS e pode ter ficado em dúvida se é a mesma tecnologia, porque que uma tem “JS” no nome e a outra não. A resposta é: embora o Angular seja a evolução após o AngularJS, eles praticamente são frameworks diferentes.

O AngularJS começou em 2009, sendo definido pelas versões 1.x. Já o Angular (antes conhecido como “Angular 2”, publicado em 2016) é considerado a versão 2 mais as versões superiores. Muitos pensam que o Angular é uma continuação do AngularJS em termos de código, o que não é verdade.

A versão 2, chamada hoje somente de Angular, foi uma reescrita completa do código e tornou-se uma arquitetura completamente diferente, mantendo apenas o nome – porém sem o JS no final. Nesta nova ferramenta, foram seguidos padrões da web moderna, técnicas e boas práticas que foram aprendidas com os erros cometidos no desenvolvimento da ferramenta anterior.

O AngularJS tinha como linguagem padrão o JavaScript. Já o Angular ainda continua baseado no JavaScript, mas através do TypeScript. Com isso, ele passou a oferecer capacidades interessantes antes oferecidas somente pelo TypeScript.

Características

Suas principais características são:

Suporte cross-platform: esse framework fornece suporte a múltiplas plataformas de desenvolvimento. O Angular pode ser utilizado para criar aplicações web SPA, aplicações mobile (com o suporte do Ionic, por exemplo) ou até mesmo aplicações desktop (com o suporte do Electron).

Mesmo em ambientes distintos, a API do Angular permanece praticamente a mesma, o que facilita a curvatura de adoção e aprendizagem em múltiplos ambientes de desenvolvimento;

Integração e suporte à todas as fases de desenvolvimento: provê ferramental e suporte para todas as fases de desenvolvimento, desde a escrita do código em si (apoiando-se bastante na API e no sistema de tipos do TypeScript) até a criação de fluxos de teste (com o apoio principalmente do Karma – uma biblioteca para escrita de testes JavaScript), passando pelo suporte excelente à criação de animações, o provisionamento de estruturas de acessibilidade e até mesmo o scaffolding de projetos através do Angular CLI;

Produtividade aliada à performance: consegue oferecer suporte ao desenvolvimento rápido de aplicações através de uma API simples, bem estruturada e bem documentada, o que acaba trazendo bastante produtividade.

Por fim, por mais que o Angular não utilize o conceito de Virtual DOM (conceito utilizado por outros frameworks, como o React), ainda sim o Angular oferece uma performance bem interessante, principalmente com a Ivy, a engine de renderização utilizada desde o Angular 6+.

Mercado

Atualmente o Angular é um dos frameworks Javascript que dominam o mercado, sendo muito popular nos últimos anos e é utilizado em inúmeros projetos. Por esses motivos, ele vem sendo amplamente requisitado no mercado para desenvolvimento web e mobile, tendo diversas oportunidades no Brasil e no mundo.

Através de uma pesquisa feito pelo Stack Overflow neste ano (2020), ao focar em estruturas web, vemos que ele é muito popular. Apesar de o jQuery estar em primeiro, ele está lentamente perdendo espaço para o React.js e o Angular, ano após ano.

pesquisa-stackoverflow-angular

Com uma rápida pesquisa também podemos ver o número de vagas que requisitam o conhecimento em Angular. Abaixo podemos ver vagas pesquisadas no LinkedIn e InfoJobs. Vale ressaltar as vagas home office.

vagas angular LinkedIn

vagas angular InfoJobs

Desenvolvedor Angular Júnior
Formação: Desenvolvedor Angular Júnior
O Angular é utilizado por várias empresas em soluções de larga escala.Nesta formação vamos conhecer os fundamentos do Angular, como iniciar um projeto, o que são componentes e a trabalhar com o Angular CLI.
CONHEÇA A FORMAÇÃO

O que preciso saber para iniciar com essa tecnologia?

Existe muito conteúdo de suporte para o Angular, que conta com uma comunidade grande, ativa e disposta a ajudar.

Se você tem interesse de aprender ou se aperfeiçoar mais nas funcionalidades, conceitos e até mesmo desenvolver um projeto para entender como estruturar uma aplicação web moderna e rápida, temos uma formação específica para você iniciar do zero 🙂

Tw Dev Server – como ele pode te ajudar a estudar programação?

Olá Web Developers! Vamos ver o que é e como utilizar o Tw Dev Server para te ajudar na hora de estudar programação.

O que é o Tw Dev Server?

Quando estamos trabalhando com desenvolvimento web precisamos de pelo menos um servidor de arquivos estáticos para nossos arquivos HTML, CSS, JavaScript, imagens, etc. Isso porque se abrirmos nosso HTML diretamente no navegador, certas operações não poderão ser feitas pelo JavaScript por questões de segurança.

Além disso, também é comum a necessidade de uma API para fazermos requisições, onde recuperamos ou salvamos dados quando estamos estudando desenvolvimento web ou criando um aplicativo mobile.

Para que essas necessidades básicas fossem resolvidas surgiu o Tw Dev Server. Ele veio com a finalidade de iniciar um servidor estático para nossos arquivos e também servir como um servidor que recebe requisições através de uma API. Com essa API podemos simular um servidor com banco de dados que recebe requisições para recuperar, salvar, modificar e apagar dados (CRUD). E tudo isso sem precisar de nenhuma configuração ou instalação complicada!

Tw Dev Server - tela de desenvolvimento com navegadores sendo atualizados automaticamente

Instalando o Tw Dev Server

O Tw Dev Server pode ser baixado pelo NPM ou como uma extensão do VS Code.

No NPM, para instalar globalmente em sua máquina, execute:

$ npm install -g @treinaweb/tw-dev-server

Assim que você tiver instalado, seu terminal terá o comando tw-dev-server disponível.

Iniciando um servidor de arquivos estáticos

Para iniciar um servidor de arquivos estáticos basta abrir o seu terminal na pasta raiz do seu projeto e executar:

$ tw-dev-server

Com isso nós já teremos nosso servidor rodando.

Tw Dev Server - Terminal

Assim como você pode ver na imagem acima, ele irá mostrar como você pode acessar seus arquivos pelo navegador. Na mesma máquina basta acessar http://localhost:3002. Entretanto, caso queira acessar de outra máquina ou dispositivo que estejam na mesma rede, basta acessar o endereço que é mostrado logo abaixo.

Como se pode notar, ele utiliza por padrão a porta 3002, mas isso pode ser alterado. Por exemplo, caso a gente queira utilizar a porta 4200:

$ tw-dev-server --port=4200

Para encerrar basta pressionar Ctrl + C.

JavaScript Básico
Curso de JavaScript Básico
CONHEÇA O CURSO

Live Reload e Browser Sync

Quando estamos escrevendo nosso HTML, CSS e JavaScript, pode ser meio cansativo ter que ficar atualizando o navegador a todo momento para ver o resultado do nosso trabalho.

Para isso o Tw Dev Server também possui a funcionalidade conhecida como Live Reload. Com essa função ativada, seu navegador vai atualizar automaticamente assim que você alterar algum arquivo HTML ou JavaScript. Caso a alteração seja em um arquivo CSS, o CSS da página é atualizado mesmo sem precisar atualizar o navegador.

Para ativar essa função, basta adicionar --live ao comando.

$ tw-dev-server --live

Além disso, também há a possibilidade de você querer testar sua página em vários navegadores, dispositivos ou tamanhos de janelas diferentes. E para facilitar isso temos a função Browser Sync, que vai sincronizar todos os navegadores que estiverem acessando a sua página.

Com isso você pode acessar a sua página a partir de vários navegadores, até mesmo do seu celular, e tudo o que você fizer em um navegador (como escrever, clicar num botão ou rolar a página) também acontecerá nos demais navegadores! Essa função também atualiza todos os navegadores quando você altera o seu código, não precisando ativar o --live.

Para ativar o Browser Sync basta adicionar --sync ao comando:

$ tw-dev-server --sync

Fazendo Requisições

Uma das principais funcionalidades do Tw Dev Server é disponibilizar uma API para podermos fazer requisições. E isso sem precisar configurar um back end ou um banco de dados. Porém, lembre-se que essa é uma ferramenta para facilitar nos estudos, portanto não deve ser usada para um produto que será lançado, pois não é otimizada para isso.

Podemos fazer operações GET, POST, PUT e DELETE. Para que possamos fazer requisições para a API, basta adicionar /api ao final do endereço que utilizamos para acessar os arquivos estáticos.
Em resumo, se você acessa os arquivos por http://localhost:3002, as requisições devem ser feitas a http://localhost:3002/api.

Logo após o /api nós adicionamos os nomes que quisermos. Isso será para nos organizarmos.

Painel Visual do Tw Dev Server

Para testar as requisições, ver seus dados, modificá-los, etc, você pode usar a ferramenta visual do Tw Dev Server. Basta acessar https://treinaweb.github.io/tw-dev-server/. Uma vez que o seu servidor estiver rodando, a bolinha ao lado do endereço aparecerá verde.

Tw Dev Server - Painel

Criando Dados

Imagine que a gente esteja num projeto de biblioteca e que queremos fazer uma operação POST para salvar um livro. Podemos, por JavaScript, fazer uma requisição com o seguinte código:

    let livro = {
        "nome": "GraphQL: A revolucionária linguagem de consulta e manipulação de dados para APIs",
        "autor": "Akira Hanashiro"
    };
    fetch('http://localhost:3002/api/biblioteca/livros', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(livro)
    })
    .then(response => response.json());
    .then(console.log)

Teremos como resposta um objeto com um campo id para identificar o dado recém cadastrado. Ele é gerado automaticamente pelo Tw Dev Server.

Não apenas por JavaScript, como também podemos fazer essa operação pela nossa ferramenta visual:

Tw Dev Server - Post

Buscando Dados

Para fazermos uma requisição GET e recuperar todos os livros, bastaria fazer:

    fetch('http://localhost:3002/api/biblioteca/livros')
        .then(response => response.json());
        .then(console.log)

E, claro, também podemos fazer isso na nossa ferramenta visual.

Porém, caso você queira que seja retornado apenas um único dado, pode-se passar o id do elemento. Por exemplo: http://localhost:3002/api/biblioteca/livros?id=1591291655803.

Atualizando Dados

Para atualizar um dado basta fazer uma operação PUT, usar a mesma URL e indicar nela o id do dado que você quer atualizar:

    let novoLivro = {...};
    fetch('http://localhost:3002/api/biblioteca/livros?id=1591291655803', {
        method: 'PUT',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(novoLivro)
    })
    .then(response => response.json());
    .then(console.log)

Assim que executar essa requisição teremos como resposta o dado atualizado.

Node.js Completo
Curso de Node.js Completo
CONHEÇA O CURSO

Apagando Dados

Por fim temos a função de apagar dados. Para isso basta fazer uma requisição DELETE passando o id do dado que se quer apagar.

    fetch('http://localhost:3002/api/biblioteca/livros?id=1591291655803', {
        method: 'DELETE',
    })
    .then(response => response.json());
    .then(console.log)

Caso você queira apagar todos os dados de uma coleção, basta passar all no lugar do id

    fetch('http://localhost:3002/api/biblioteca/livros?id=all', {
        method: 'DELETE',
    })
    .then(response => response.json());
    .then(console.log)

Em conclusão, o Tw Dev Server é uma ótima ferramenta que pode se aliar aos seus estudos em desenvolvimento web e mobile, seja servindo arquivos ou simulando um back end com api e banco de dados. Também pode ser usado para fazer testes caso você esteja desenvolvendo um front mas o back end ainda não tem uma api pronta para te retornar dados.

Deno: conheça o suposto substituto do Node.js

Olá Web Developers! Acabou de ser lançada a versão 1.0 do Deno. Vamos conhecer esse suposto substituto do Node.js.

O que é Deno?

O Deno, assim como o Node.js, é um ambiente de execução de JavaScript. Ele foi feito pelo próprio criador do Node utilizando a linguagem Rust. Assim como o Node, Deno também utiliza o V8, engine de JavaScript do Google Chrome.

Por que outro interpretador de JavaScript?

Ryan Dahl, criador do Node, deu uma palestra em junho de 2018 na JSConf intitulada 10 Coisas que eu lamento pelo Node.js (10 Things I Regret About Node.js no original). Por mais que o Node tenha várias vantagens e seja muito usado, seu criador admitiu vários problemas.

Aliás, o Node.js foi criado em 2009, época em que o JavaScript nem tinha Promises ou async/await e nosso modo de trabalho, técnicas e boas práticas eram outras. O mundo todo era diferente. Lembre-se que sites eram feitos com tabelas, não usávamos smartphones, não havia YouTubers, etc.

Não só o Node.js possui problemas, como também várias linguagens, bibliotecas e frameworks. Todos nós, conforme vamos evoluindo na carreira de programador, aprendemos coisas novas e percebemos que algo que fizemos há algum tempo pode ser feito de maneira bem melhor. Além disso, a evolução de várias ferramentas e tecnologias também nos permite criar coisas melhores.

Isto é, com os aprendizados que Ryan Dahl teve em sua carreira, os desafios enfrentados com o Node e a evolução do JavaScript, ele pensou em criar algo novo. Logo após falar dos problemas do Node, Ryan apresentou seu novo trabalho, o Deno, que na época tinha apenas 1 mês de existência.

O Deno não apenas possui melhorias em coisas que foram consideradas ruins no Node, como o node_modules, como também possui várias novidades que o Node não tem e que são importantes.

Deno é mais seguro

Qualquer código no Node tem o poder de acessar coisas como sua rede e HD. Por outro lado, no Deno o seu código é executado em uma sandbox segura por padrão.

Ou seja, se você não der permissão, um código malicioso não poderá acessar suas informações. Isso se assemelha ao JavaScript nos navegadores, que apenas consegue acessar coisas como a câmera se o usuário der permissão.

Node.js Completo
Curso de Node.js Completo
CONHEÇA O CURSO

TypeScript Integrado

O Deno não interpreta apenas JavaScript. Ele também interpreta TypeScript sem que você precise instalar nem configurar nada.

Essa decisão foi baseada no crescimento do uso do TypeScript em grandes projetos que precisam lidar com complexas lógicas de negócio. Tudo no Deno foi feito com o TypeScript em mente.

Deno não precisa de NPM ou node_modules

Projetos criados com o Node utilizam o NPM para gerenciar suas dependências. Os pacotes baixados ficam guardados na pasta node_modules, que facilmente chega a tamanhos enormes.

Assim como navegadores, o Deno sabe como buscar códigos externos. Ou seja, podemos importar o código de um arquivo passando seu endereço. Veja abaixo um exemplo da criação de um simples servidor que utiliza um arquivo TypeScript externo.

import { serve } from "https://deno.land/std@0.50.0/http/server.ts";

for await (const req of serve({ port: 8000 })) {
  req.respond({ body: "Hello World\n" });
}

Promises em todo lugar

O JavaScript é famoso por sua natureza assíncrona. Porém, o Node foi criado antes do JavaScript possuir coisas como Promises e Async/Await.

Como resultado da evolução do JavaScript em união da linguagem Rust, o Deno tem um moderno sistema baseado em Promises. Isso nos permite trabalhar mais facilmente com código assícrono, além de evitar os problemas que o Node tinha em seu sistema.

JavaScript Avançado
Curso de JavaScript Avançado
CONHEÇA O CURSO

Deno é Compatível com Node?

Ainda que Node e Deno sejam interpretadores de JavaScript, o Deno não é totalmente compatível com os pacotes do seu irmão mais velho e outras ferramentas.

No entanto, uma camada de compatibilidade está sendo criada, mas ainda está longe de ser concluída.

Já posso trocar o Node.js pelo Deno?

A princípio, sim. O lançamento da versão 1.0 do Deno indica que ele já está em uma fase estável.

Ainda assim, lembre-se que o Deno está sendo desenvolvido há pouco mais de 2 anos. Ele não é um fork do Node, foi feito totalmente do zero. Por outro lado, o Node já possui mais de uma década de vida. Ou seja, o Node é mais maduro e possui uma comunidade bem maior.

Portanto, o mais indicado é sempre analisar as necessidades do seu projeto para poder escolher a tecnologia a ser usada.

Conheça o React, biblioteca para desenvolvimento Web

O React, lançado em 2013, é uma biblioteca JavaScript de código aberto, fundamental para criação de aplicações front-end.

Anteriormente denominado React.js ou ReactJS, foi desenvolvido pelo Facebook para criação de elementos de interface reutilizáveis de forma simples, intuitiva e com uma ótima performance.

Multiplataforma sobre a licença MIT, diversas são as empresas que o utilizam. Dentre elas podemos citar o próprio Facebook, o Instagram, que também faz parte da empresa Facebook, Twitter, Netflix, Uber, Spotify e muitas outras.

React - Introdução
Curso de React - Introdução
CONHEÇA O CURSO

Principais características do React

O React possui diversas características marcantes, o que o torna uma excelente escolha para o desenvolvimento de aplicações, como podemos ver abaixo:

  • Licença MIT: Apesar de parecer bobagem, o react, hoje, é licenciado sob a MIT, o que tranquiliza os desenvolvedores que utilizam este framework, já que eles não precisam se preocupar com patentes;
  • Utiliza Javascript: O Javascript é uma das principais linguagens de desenvolvimento do mundo. Por utilizá-lo, o React agrega a maioria das suas vantagens, além de ser grandemente utilizado por diversos desenvolvedores;
  • Utiliza componentes: O React utiliza a componentização para criação de interfaces, garantindo uma maior flexibilidade e reutilização de interfaces;
  • Desenvolvimento móvel: Em conjunto com o react native, podemos desenvolver aplicações mobile reutilizando componentes criados com o react.
  • Amplamente utilizado: O React é uma das principais tecnologias para desenvolvimento web (e mobile) do mundo.

Empresas que utilizam o React

Diversas são as empresas que utilizam o React para o desenvolvimento de suas soluções, o que a torna uma tecnologia ainda mais atrativa. Dentre essas empresas, podemos citar:

  • Twitter: O Twitter, uma das principais redes sociais do mundo, utiliza o react para criação de suas aplicações;
  • Facebook: Apesar de ter desenvolvido o React, o Facebook também o utiliza para construção de suas aplicações;
  • Medium: O Medium, uma das principais plataformas de blog do mundo utiliza o React para construção de sua aplicação web;
  • Airbnb: Uma das principais plataformas de aluguel, o Airbnb utiliza o React em sua aplicação web.

Quais conhecimentos preciso ter para iniciar com o React?

Por utilizar o Javascript como base para sua construção, para iniciar com o React, é essencial que o desenvolvedor possua conhecimento com essa linguagem.
Além disso, é de grande importância que o desenvolvedor possua conhecimentos de HTML e CSS para a construção de interfaces.

Aqui na TreinaWeb possuímos diversos cursos de JavaScript, que abordarão todos os conceitos essenciais para iniciar com esta tecnologia.

Desenvolvedor Front-end Pleno
Formação: Desenvolvedor Front-end Pleno
HTML, CSS e JavaScript são a base de toda a web. Tudo o que você está vendo aqui agora depende deste tripé.Nesta formação vamos conhecer assuntos mais avançados do HTML5, CSS3 e JavaScript, conhecer o NPM, trabalhar com o RxjS (base do framework Angular), testes com Jasmine e uma pequena introdução ao TypeScript.
CONHEÇA A FORMAÇÃO

Sintaxe do React

A sintaxe do React é bem simples. Basicamente, os componentes do React implementam um método render() que recebe os dados de entrada e retornam o que deve ser exibido.

class Treinaweb extends React.Component {
  render() {
    return (
      <div>
        Olá, {this.props.nome}!
      </div>
    );
  }
}

ReactDOM.render(
  <Treinaweb nome="Treinaweb" />,
  document.getElementById('exemplo')
);

Este exemplo usa uma sintaxe parecida com XML, chamada JSX. Os dados de entrada que são passados para o componente podem ser acessados no render() via this.props.

Podemos concluir que…

O React é uma excelente biblioteca JavaScript para o desenvolvimento de aplicações web. Muitas empresas o utilizam, o que o torna ainda mais desejada, já que a quantidade de vagas é cada dia maior.

Em conjunto com o React Native, podemos reutilizar diversos componentes desenvolvidos com o React para a construção de aplicações móveis, tornando a solução ainda mais completa.

O que é DOM, Virtual DOM e Shadow DOM?

Olá Web Developers! Vamos entender de forma simplificada o que é o DOM e qual a diferença entre ele e os tão falados Virtual DOM e Shadow DOM.

O que é o DOM?

DOM significa Document Object Model (Modelo de Objeto de Documento). Ele é uma API que nos permite acessar e manipular documentos HTML e XML válidos.

Vamos usar o seguinte código como exemplo:

<!DOCTYPE html>
<html>
    <head>
        <title>Minha Página</title>
    </head>
    <body>
        <h1>Olá Web Developers!</h1>
        <p>E mais um texto aqui</p>
    <script type="text/javascript">window.NREUM||(NREUM={});NREUM.info={"beacon":"bam.nr-data.net","licenseKey":"NRJS-e7d61b56663ee7a3078","applicationID":"463033615","transactionName":"Y1FWYRZZV0NTUhUIXlobYUcNF05AHUYRTFBQWV1bS0hWQ0YfEQlB","queueTime":0,"applicationTime":871,"atts":"TxZVF15DRE0=","errorBeacon":"bam.nr-data.net","agent":""}</script></body>
</html>

Ele pode ser representado pela seguinte estrutura em árvores de nós (Node Tree):

Mesmo que se pareça muito com nosso código, o DOM não é exatamente igual a ele. Quando o HTML não é válido, os navegadores tentam arrumá-lo, gerando um DOM um pouco diferente. O DOM também não é exatamente o que vemos nas DevTools. Um exemplo são os pseudo-elementos criados com CSS. Não podemos acessá-los com JavaScript porque não fazem parte do DOM.

React - Tópicos Avançados
Curso de React - Tópicos Avançados
CONHEÇA O CURSO

O que é Shadow DOM?

O Shadow DOM é uma tecnologia do navegador projetada para podermos criar componentes que contém uma aparência e comportamento sem influenciar os demais elementos a sua volta, escondendo sua estrutura.

Um exemplo bem simples: se você trabalha com HTML, provavelmente já viu a tag <video>, certo? Criei um arquivo apenas com esta tag. Mas ao mandar o navegador exibir o Shadow DOM, veja o que aparece:

Esta é toda a estrutura escondida dentro da tag <video>. Note que há várias <div>. Deixei selecionado no código um elemento, que é a barra de progresso do vídeo. Veja que ela é feita por um <input> do tipo range. E há vários outros elementos responsáveis pela estrutura e funcionamento da tag <vídeo>.

E não precisamos saber do que o elemento de reproduzir os vídeos é feito, como ele funciona ou como é estilizado. O Shadow DOM nos permite criar elementos assim, que possuem estrutura, estilo e comportamento encapsulados. Então o JavaScript e CSS de um componente não corre o risco de afetar outro componente. Basicamente essa é a diferença com o DOM comum: encapsulamento.

O que é Virtual DOM?

Quando estamos desenvolvendo aplicações com HTML, é por meio do DOM que podemos manipular os elementos presentes nele. Porém, cada acesso ao DOM leva um pequeno tempo, e cada alteração obriga o navegador a renderizar novamente a parte da tela afetada. Então se tivermos muitas coisas para atualizar, nossa aplicação terá problemas de perfomance.

É aí que entra o Virtual DOM (VDOM). Ele é uma representação do DOM mantida em memória. Assim, quando precisamos fazer alguma alteração, ela é feita no Virtual DOM, que é bem mais rápido que o DOM. Com isso ele analisa todos os lugares que serão afetados e sincroniza com o DOM em um processo chamado Reconciliação. A vantagem disso é que essa análise permite que haja o menor número possível de acessos ao DOM, melhorando muito a performance das aplicações.

Lembrando que o Virtual DOM não é algo do navegador, e sim, um conceito implementado por bibliotecas como o React.

Por ser algo feito em memória, e não algo preso ao DOM criado pelo navegador, o Virtual DOM também permite que a gente crie páginas no servidor. Hoje em dia é comum que algumas aplicações renderizem a tela inicial no servidor para enviar um HTML pronto com os dados ao usuário, passando a impressão de que tudo já foi carregado, para só então carregar o resto da aplicação. Isso pode ser feito utilizando bibliotecas e frameworks como Angular, React e Vue. Um caso bem famoso que utiliza esta técnica é a Netflix.

Desenvolvedor React Sênior
Formação: Desenvolvedor React Sênior
Nesta formação conheceremos a Arquitetura Flux, muito utilizada nas aplicações modernas e que nos trás muitos benefícios em relação às arquiteturas clássicas como o MVC. Aprenderemos a sua principal implementação, o Redux. Também veremos a trabalhar com código assíncrono com Redux Thunk e conceito de programação funcional com Redux-Saga.
CONHEÇA A FORMAÇÃO

JavaScript – Entendendo as partes estranhas

Olá Web Developers! Não importa a sua experiência com 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.

JavaScript Básico
Curso de JavaScript Básico
CONHEÇA O CURSO

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:

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/, 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).

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:

"3" - 1
//> 2

Se deu certo, será que podemos fazer isso com a adição?

"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:

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.

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.

null > 0; //> false
null < 0; //> false
null == 0; //> false
null >= 0; //> true
null <= 0; //> 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:

Seguindo as regras de comparação relacional, nas comparações de > e < o null é convertido para +0 e 0 continua sendo 0. Como +0 é igual a 0, as comparações > e < serão falsas.

Já na comparação com ==, seguindo o algoritmo de comparação de igualdade descrito em 7.2.13 Abstract Equality Comparison, como nenhuma das condições é atendida, o valor padrão retornado é false.

Já as comparações >= e <= acabam funcionando da seguinte maneira: “Se null < 0 anteriormente resultou em false, então null >= 0 é true, pois se algo não é menor, só pode ser maior ou igual”. Até que faz sentido, não é mesmo?

JavaScript Avançado
Curso de JavaScript Avançado
CONHEÇA O CURSO

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:

['[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.

[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:

JavaScript - Comparação entre zero, zero string e array vazio

Basicamente:

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):

  1. 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 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.

  1. 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 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
Formação: Desenvolvedor Front-end Júnior
HTML, CSS e JavaScript são a base de toda a web. Tudo o que você está vendo aqui agora depende deste tripé.Nesta formação vamos iniciar aprendendo lógica. Teremos uma introdução ao HTML e CSS e conheceremos a linguagem JavaScript.
CONHEÇA A FORMAÇÃO

© 2004 - 2019 TreinaWeb Tecnologia LTDA - CNPJ: 06.156.637/0001-58 Av. Paulista, 1765, Conj 71 e 72 - Bela Vista - São Paulo - SP - 01311-200