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

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

  • Uma breve descrição
  • Por que é relevante
  • Um exemplo prático de código (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 aprenderá facilmente e melhorará as coisas mais rapidamente.

Esses conceitos de JS são escolhidos com base na popularidade e relevância que vi na comunidade. Se você quiser aprender um conceito que não faz parte deste artigo, deixe um comentário e eu o adicionarei em um futuro próximo.

Se você deseja se tornar um desenvolvedor web melhor, começar seu próprio negócio, ensinar outras pessoas ou simplesmente melhorar suas habilidades de desenvolvimento, postarei dicas e truques semanais nas linguagens de desenvolvimento web mais recentes.

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

Os conceitos de JS que veremos:

  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 conhecido como interno e externo.

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 sobre 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?

  • Lógica separada
  • Limita 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

ES6

Conforme mostrado no exemplo acima, a função showName()tem acesso a tudo o que é 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 porque ele está fechado do mundo externo, exceto se você retorná-lo.

2. IIFE

IIFE (Expressão de Função Imediatamente Invocada), como o nome indica, significa que a função é “Imediatamente Invocada” 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 IIFE como um nome de classe e chamar funções como métodos agrupados em um returntipo.

Por que isso é relevante?

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

Exemplo

A tecnologia mudou muito nos últimos anos. Agora, por exemplo, você pode mudar a cor de quase tudo - como o seu carro. Vamos ver um exemplo de código.

ES5

ES6

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

Resumindo, primeiro invocamos a car(expressão de função) para acessar o que está dentro. Em seguida, podemos usar a .notação para invocar a função definida no returntipo. Essa abordagem é semelhante à estrutura de classes / métodos em que chamamos primeiro o nome da classe antes de podermos chamar o nome do método. Dessa forma, você pode escrever um código limpo, sustentável 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. Quase 85% dos aplicativos baseados na web hoje têm esse padrão subjacente de uma forma ou de outra. Existem outros tipos de estruturas 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 de 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

Vejamos um pequeno exemplo da estrutura de design MVC.

ES5

ES6

Como mostrado no exemplo acima, que normalmente seria dividir o view, modele controllerem pastas / arquivos separados em termos de melhores práticas, mas apenas para ilustrar o conceito, nós colocamos tudo em um arquivo. Os objetivos do design-framework são simplificar o processo de desenvolvimento e apoiar um ambiente colaborativo sustentável.

4. Assíncrono / aguardar

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

Por que isso é relevante?

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

Exemplo

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

ES5

ES6

Para usar await, devemos envolvê-lo em uma asyncfunção para notificar JS de que estamos trabalhando com promessas. Conforme mostrado no exemplo, nós (a) esperamos por duas coisas: responsee users. Antes de convertermos o responsepara o formato JSON, precisamos ter certeza de que o buscamos response, caso contrário, podemos acabar convertendo um responseque ainda não existe, o que provavelmente causará um erro.

5. Encerramento

Um encerramento é simplesmente uma função dentro de outra função. É 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 sobre os quais falamos acima).

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 precisem de uma função que simplesmente imprima o nome do carro.

ES5

ES6

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

6. Callback

Um retorno de chamada é uma função executada após a execução de outra função. Também é conhecido como call-after. No mundo do JavaScript, uma função que espera que outra função execute ou retorne um valor (matriz ou objeto) é chamada de retorno de chamada. Um retorno de chamada é uma forma de tornar as operações assíncronas mais síncronas (ordem sequencial).

Por que isso é relevante?

  • Aguarda a execução de um evento
  • Fornece recursos síncronos
  • Maneira prática de encadear funcionalidades (se A for concluído, execute B e assim por diante)
  • Fornece estrutura de código e controle
  • Esteja ciente, você pode ter ouvido falar sobre o inferno de callback. Basicamente, significa que você tem uma estrutura recursiva de callbacks (callbacks dentro de callbacks dentro de callbacks e assim por diante). Isso não é prático.

Exemplo

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

ES5

ES6

Observe que ele aguarda a ocorrência de um evento (um clique de botão) antes de executar uma ação (ligar os motores). Em resumo, passamos a fireUpEngines()função como um argumento (retorno de chamada) para a pressButton()função. Quando o usuário pressiona o botão, os motores são acionados.

Então aí está! Alguns dos conceitos JS mais populares são explicados simplesmente com exemplos. Espero que esses conceitos tenham ajudado você a entender um pouco mais o JS e como ele funciona.

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

PS Se você gostou deste artigo e quer mais como estes, por favor, bata palmas ❤ e compartilhe com os amigos, é um bom carma