Especiais JavaScript

Este capítulo recapitula brevemente os recursos do JavaScript que aprendemos até agora, prestando atenção especial aos momentos sutis.

Estrutura de código

As instruções são delimitadas por ponto e vírgula:

 alerta('Olá'); alerta('Mundo');

Normalmente, uma quebra de linha também é tratada como um delimitador, então isso também funcionaria:

 alerta('Olá')
alerta('Mundo')

Isso é chamado de “inserção automática de ponto e vírgula”. Às vezes não funciona, por exemplo:

 alert("Haverá um erro após esta mensagem")

[1, 2].forEach(alerta)

A maioria dos guias de estilo de código concorda que devemos colocar ponto e vírgula após cada instrução.

Ponto e vírgula não são necessários após blocos de código {...} e construções de sintaxe com eles, como loops:

 função f() {
  //não é necessário ponto e vírgula após a declaração da função
}

para(;;) {
  //não é necessário ponto e vírgula após o loop
}

…Mas mesmo que possamos colocar um ponto e vírgula “extra” em algum lugar, isso não é um erro. Será ignorado.

Mais em: Estrutura do código.

Modo estrito

Para ativar totalmente todos os recursos do JavaScript moderno, devemos iniciar os scripts com "use strict" .

 'usar estrito';

...

A diretiva deve estar no topo de um script ou no início do corpo de uma função.

Sem "use strict" , tudo ainda funciona, mas alguns recursos se comportam de maneira antiquada e “compatível”. Geralmente preferiríamos o comportamento moderno.

Alguns recursos modernos da linguagem (como classes que estudaremos no futuro) permitem o modo estrito implicitamente.

Mais em: O modo moderno, “use strict”.

Variáveis

Pode ser declarado usando:

• let

• const (constante, não pode ser alterado)

• var (estilo antigo, veremos mais tarde)

Um nome de variável pode incluir:

• Letras e dígitos, mas o primeiro caractere não pode ser um dígito.

• Os caracteres $ e _ são normais, assim como as letras.

• Alfabetos e hieróglifos não latinos também são permitidos, mas comumente não são usados.

As variáveis ​​são digitadas dinamicamente. Eles podem armazenar qualquer valor:

 seja x = 5;
x = “João”;

Existem 8 tipos de dados:

• number para números de ponto flutuante e inteiros,

• bigint para números inteiros de comprimento arbitrário,

• string para cordas,

• boolean para valores lógicos: true/false ,

• null – um tipo com um único valor null , que significa “vazio” ou “não existe”,

• undefined – um tipo com um único valor undefined , que significa “não atribuído”,

• object e symbol – para estruturas de dados complexas e identificadores únicos, ainda não os aprendemos.

O operador typeof retorna o tipo de um valor, com duas exceções:

 typeof null == "object" // erro na linguagem
typeof function(){} == "function" // funções são tratadas especialmente

Mais em: Variáveis ​​e tipos de dados.

Interação

Estamos usando um navegador como ambiente de trabalho, então as funções básicas da UI serão:

• prompt(question, [default])

• Faça uma question e retorne o que o visitante digitou ou null se ele clicou em “cancelar”.

• confirm(question)

• Faça uma question e sugira escolher entre OK e Cancelar. A escolha é retornada como true/false .

• alert(message)

• Envie uma message .

Todas essas funções são modais , pausam a execução do código e evitam que o visitante interaja com a página até responder.

Por exemplo:

 deixe userName = prompt("Seu nome?", "Alice");
let isTeaWanted = confirm("Quer um pouco de chá?");

alert("Visitante: " + nomeUsuario); // Alice
alert("Procura-se chá: " + isTeaWanted ); // verdadeiro

Mais em: Interação: alertar, alertar, confirmar.

Operadores

JavaScript oferece suporte aos seguintes operadores:

• Aritmético

• Regular: * + - / , também % para o resto e ** para potência de um número.

  O binário mais + concatena strings. E se algum dos operandos for uma string, o outro também será convertido em string:

   alerta('1' + 2); // '12', string
  alerta( 1 + '2' ); // '12', string

• Tarefas

• Existe uma atribuição simples: a = b e combinações como a *= 2 .

• Bit a bit

• Os operadores bit a bit trabalham com números inteiros de 32 bits no nível de bits mais baixo: consulte a documentação quando necessário.

• Condicional

• O único operador com três parâmetros: cond ? resultA : resultB . Se cond for verdadeiro, retorna resultA , caso contrário resultB .

• Operadores lógicos

• E && e OR lógicos || realizar avaliação de curto-circuito e depois retornar o valor onde parou (não é necessário true / false ). Lógico NÃO ! converte o operando para o tipo booleano e retorna o valor inverso.

• Operador de coalescência nulo

• ?? O operador fornece uma maneira de escolher um valor definido em uma lista de variáveis. O resultado de a ?? b é a menos que seja null/undefined , então b .

• Comparações

• Verificação de igualdade == para valores de tipos diferentes converte-os em um número (exceto null e undefined que são iguais entre si e nada mais), então estes são iguais:

   alerta(0 == falso); // verdadeiro
  alerta(0 == ''); // verdadeiro

  Outras comparações também são convertidas em um número.

  O operador de igualdade estrita === não faz a conversão: tipos diferentes sempre significam valores diferentes para ele.

  Os valores null e undefined são especiais: eles são iguais == entre si e não são iguais a mais nada.

  Comparações maior/menos comparam strings caractere por caractere, outros tipos são convertidos em um número.

• Outras operadoras

• Existem poucos outros, como um operador de vírgula.

Mais em: Operadores básicos, matemática, comparações, operadores lógicos, operador coalescente nulo '??'.

Laços

• Cobrimos 3 tipos de loops:

   //1
  enquanto (condição) {
    ...
  }
  
  //2
  fazer {
    ...
  } while (condição);
  
  //3
  for(seja i = 0; i < 10; i++) {
    ...
  }

• A variável declarada no loop for(let...) é visível apenas dentro do loop. Mas também podemos omitir let e reutilizar uma variável existente.

• As diretivas break/continue permitem sair de todo o loop/iteração atual. Use rótulos para quebrar loops aninhados.

Detalhes em: Loops: while e for.

Posteriormente estudaremos mais tipos de loops para lidar com objetos.

A construção do “switch”

A construção “switch” pode substituir múltiplas verificações if . Ele usa === (igualdade estrita) para comparações.

Por exemplo:

 deixe idade = prompt('Sua idade?', 18);

mudar (idade) {
  caso 18:
    alert("Não funciona"); // o resultado do prompt é uma string, não um número
    quebrar;

  caso "18":
    alerta("Isso funciona!");
    quebrar;

  padrão:
    alert("Qualquer valor diferente do acima");
}

Detalhes em: A instrução "switch".

Funções

Abordamos três maneiras de criar uma função em JavaScript:

1. Declaração de função: a função no fluxo de código principal

    função soma(a, b) {
     deixe resultado = a + b;
   
     resultado de retorno;
   }

2. Expressão de Função: a função no contexto de uma expressão

    deixe soma = função (a, b) {
     deixe resultado = a + b;
   
     resultado de retorno;
   };

3. Funções de seta:

    //expressão do lado direito
   seja soma = (a, b) => a + b;
   
   // ou sintaxe multilinha com { ... }, precisa retornar aqui:
   deixe soma = (a, b) => {
     // ...
     retornar a + b;
   }
   
   // sem argumentos
   deixe dizerOi = () => alert("Olá");
   
   // com um único argumento
   seja duplo = n => n * 2;

• As funções podem ter variáveis ​​locais: aquelas declaradas dentro do seu corpo ou da sua lista de parâmetros. Tais variáveis ​​só são visíveis dentro da função.

• Os parâmetros podem ter valores padrão: function sum(a = 1, b = 2) {...} .

• Funções sempre retornam algo. Se não houver instrução return , o resultado será undefined .

Detalhes: consulte Funções, Funções de seta, noções básicas.

Mais por vir

Essa foi uma breve lista de recursos JavaScript. Até agora estudamos apenas o básico. Mais adiante no tutorial você encontrará mais recursos especiais e avançados de JavaScript.