Aprenda estes conceitos básicos de JavaScript em apenas alguns minutos

JavaScript ES5 / ES6

Às vezes, você só quer aprender algo rapidamente. E a leitura de artigos abrangentes que descrevem conceitos JavaScript específicos pode causar sobrecarga cognitiva. O objetivo deste artigo é descrever alguns conceitos comuns da maneira mais simples possível:

  • Uma breve descrição
  • Por que é relevante
  • Um exemplo de código prático (ES5 / ES6 com funções de seta).

É sempre uma boa ideia ter conhecimento geral ao trabalhar com o ecossistema JS. Você estará ciente de como as coisas funcionam e interagem, e facilmente aprender e melhorar as coisas mais rapidamente.

Esses conceitos de JS são escolhidos com base na popularidade e relevância que tenho visto na comunidade. Se você quer aprender um conceito que não faz parte deste artigo, deixe um comentário e eu o adicionarei em breve.

Se você quer se tornar um desenvolvedor web melhor, começar seu próprio negócio, ensinar aos outros, ou simplesmente melhorar suas habilidades de desenvolvimento, postarei dicas e truques semanais nos últimos idiomas de desenvolvimento web.

Aumente suas habilidades de JavaScript com esses métodos úteis de JS .

Os conceitos do JS que vamos analisar:

  1. Escopo
  2. IIFE
  3. MVC
  4. Assíncrono / aguardar
  5. Fecho
  6. Ligue de volta

1. Escopo

O escopo é simplesmente uma caixa com limites. Existem dois tipos de limites em JS: local e global, também conhecidos como internos e externos.

Local significa que você tem acesso a tudo dentro dos limites (dentro da caixa), enquanto global é tudo fora dos limites (fora da caixa).

Esses termos são muito usados ??quando falamos de classes, funções e métodos. Ele fornece a capacidade de determinar o que é acessível (visível) para o contexto atual.

Por que isso é relevante?

  • Separa a lógica
  • Reduz o foco
  • Melhora a legibilidade

Exemplo

Vamos supor que você crie uma função e queira acessar uma variável definida no escopo global.

ES5

Escopo local / global de JavaScript

ES6

Escopo local / global de JavaScript (funções de seta)

Como mostrado no exemplo acima, a função showName() tem acesso a tudo que está definido dentro de seus limites (localmente) e também fora (globalmente). Lembre-se de que o escopo global não pode acessar variáveis ??definidas no escopo local, pois ele está incluído no mundo externo, exceto se você retorná-lo.

2. IIFE

IIFE (Expressão da Função Imediatamente Chamada), como o nome indica, significa que a função é “Chamada Imediatamente” quando é criada. Antes do ES6 ++ apresentar classes / métodos para suportar o paradigma de programação orientada a objetos (OOP), a maneira comum era imitar o IIFE como um nome de classe e invocar funções como métodos envolvidos em um tipo de return .

Por que isso é relevante?

  • Executa imediatamente o código
  • Evita que o escopo global seja poluído
  • Suporta estrutura assíncrona
  • Melhora a legibilidade (alguns podem argumentar o contrário)

Exemplo

A tecnologia mudou bastante nos últimos anos. Agora, por exemplo, você tem a capacidade de mudar a cor de praticamente qualquer coisa – como o seu carro. Vamos ver um exemplo de código.

ES5

JavaScript IIFE (Expressão de Função Imediatamente Invocada)

ES6

JavaScript IIFE (funções de seta)

No exemplo acima, agrupamos duas funções dentro do tipo de return ( changeColorToRed() & changeColorToBlack() ). Isso nos permite acessar várias funções e invocar o método que desejamos.

Em suma, primeiro invocamos o car (expressão de função) para acessar o que está dentro. Então nós podemos usar . notação para invocar a função que é definida dentro do tipo de return . Essa abordagem é semelhante à estrutura de ter classes / métodos em que primeiro chamamos o nome da classe antes de podermos chamar o nome do método. Dessa forma, você pode escrever código limpo, passível de manutenção e reutilizável.

3. MVC

Model-view-controller é uma estrutura de design (* não uma linguagem de programação) que nos permite separar o comportamento em uma estrutura prática do mundo real. Atualmente, quase 85% dos aplicativos baseados na Web têm esse padrão subjacente de uma forma ou de outra. Existem outros tipos de frameworks de design por aí, mas este é de longe o padrão mais fundamental e fácil de entender.

Por que isso é relevante?

  • Escalabilidade e manutenção a longo prazo
  • Fácil de melhorar, atualizar e depurar (com base na experiência pessoal)
  • Fácil de configurar
  • Fornece estrutura e visão geral

Exemplo

Vamos dar uma olhada em um pequeno exemplo da estrutura de design do MVC.

ES5

Padrão de design de modelo de exibição de controle

ES6

Padrão de design de modelo de exibição de controle (funções de seta)

Como mostrado no exemplo acima, normalmente dividiríamos a view , o model e o controller em pastas / arquivos separados em termos de práticas recomendadas, mas apenas para ilustrar o conceito, colocamos tudo em um arquivo. Os objetivos da estrutura de projeto são simplificar o processo de desenvolvimento e apoiar um ambiente colaborativo sustentável.

4. Async / aguardar

Pare e espere até que algo seja resolvido. Ele fornece uma maneira de manter o processamento assíncrono de maneira mais síncrona. Por exemplo, você precisa verificar se a senha de um usuário está correta (compare com a existente no servidor) antes de permitir que o usuário entre no sistema. Ou talvez você tenha realizado uma solicitação da API REST e deseja que os dados sejam totalmente carregados antes de enviá-los para a exibição.

Por que isso é relevante?

  • Capacidades síncronas
  • Controla o comportamento
  • Reduz o “callback hell”

Exemplo

Vamos supor que você queira obter todos os usuários de uma API de descanso e mostrar os resultados no formato JSON.

ES5

Promessas Assíncronas e Aguardentes

ES6

Promessas Async e Await (funções de seta)

Para usar o await , devemos envolvê-lo em uma função async para notificar o JS de que estamos trabalhando com promessas. Como mostrado no exemplo, nós (a) esperamos duas coisas: response e users . Antes de podermos converter a response para o formato JSON, precisamos ter certeza de que a response obtida, caso contrário, podemos acabar convertendo uma response que ainda não está lá, o que provavelmente causará um erro.

5. Encerramento

Um encerramento é simplesmente uma função dentro de outra função. Ele é usado quando você deseja estender o comportamento, como passar variáveis, métodos ou matrizes de uma função externa para uma função interna. Também podemos acessar o contexto definido na função externa a partir da função interna, mas não o contrário (lembre-se dos princípios de escopo acima mencionados).

Por que isso é relevante?

  • Estende o comportamento
  • Útil ao trabalhar com eventos

Exemplo

Vamos supor que você trabalhe como engenheiro de desenvolvimento para a Volvo, e eles precisam de uma função que simplesmente imprima o nome do carro.

ES5

Fechamento de JavaScript

ES6

Fechamento de JavaScript (funções de seta)

A função showName() é um Closure, porque estende o comportamento da função showInfo() e também tem acesso à variável carType .

6. retorno de chamada

Um retorno de chamada é uma função que é executada depois que outra função é executada. Também é referido como uma chamada após. No mundo do JavaScript, uma função que aguarda que outra função execute ou retorne um valor (matriz ou objeto) é chamada de retorno de chamada. Um retorno de chamada é uma maneira de tornar as operações assíncronas mais síncronas (ordem seqüencial).

Por que isso é relevante?

  • Espera por um evento para executar
  • Fornece recursos síncronos
  • Forma prática de encadear funcionalidades (se A estiver completo, então execute B e assim por diante)
  • Fornece estrutura e controle de código
  • Esteja ciente, você pode ter ouvido falar sobre callback inferno. Isso basicamente significa que você tem uma estrutura recursiva de retornos de chamada (retornos de chamada dentro de callbacks dentro de callbacks e assim por diante). Isso não é prático .

Exemplo

Digamos que Elon Musk na SpaceX precise de uma funcionalidade que acione os 27 motores Merlin da Falcon Heavy (o foguete mais poderoso do mundo por um fator de dois) quando um botão é pressionado.

ES5

Chamada de retorno de JavaScript

ES6

Callback JavaScript (funções de seta)

Observe que ele aguarda a ocorrência de um evento (um clique no botão) antes de executar uma ação (acionar os mecanismos). Em resumo, passamos a função fireUpEngines() como um argumento (callback) para a função pressButton() . Quando o usuário pressiona o botão, ele aciona os motores.

Então você tem isso! Alguns dos conceitos JavaScript mais populares são explicados simplesmente com exemplos. Espero que este post tenha ajudado você a entender um pouco melhor o JavaScript.

Você pode me encontrar no Medium, onde eu publico semanalmente. Ou você pode me seguir no Twitter , onde postarei dicas e truques de desenvolvimento da Web relevantes junto com histórias pessoais.

PS Se você gostou deste artigo e quer mais como estes, por favor aplaudir ? e compartilhar com os amigos, é bom karma