Variáveis e tipos em JavaScript: primeiros passos

O HTML dá estrutura a uma página, o CSS controla sua aparência e o JavaScript acrescenta comportamento. O motor JavaScript de um navegador executa as instruções de um script. A menos que uma decisão altere o caminho, essas instruções são executadas de cima para baixo.

Coloque o código na página ou em um arquivo separado

Um script incorporado ao HTML contém JavaScript entre as tags de abertura e fechamento:

<script>
  console.log("Hello from the page");
</script>

Um script externo mantém o JavaScript em um arquivo .js separado. Este HTML o carrega:

<script src="js/app.js"></script>

O arquivo externo contém console.log("Hello from the page"); sem tags <script>. Separar os arquivos mantém o HTML legível, permite que várias páginas compartilhem código e permite que o navegador mantenha o script em cache. Quando src está presente, o código dentro do mesmo elemento é ignorado. Use uma abordagem por elemento e sempre escreva a tag de fechamento </script>: uma tag de fechamento automático <script ... /> não fecha o elemento em HTML.

Escolha quando o script é executado

Um script clássico sem atributo de carregamento interrompe a análise do HTML enquanto o navegador o carrega e executa. Em <head>, ele é executado antes que o conteúdo posterior de body tenha sido construído. Colocá-lo imediatamente antes de </body> deixa o conteúdo da página à frente dele.

Para um script clássico externo em <head>, defer é uma opção padrão útil:

<script src="js/app.js" defer></script>

O navegador baixa o script enquanto continua a analisar o HTML. Ele executa o script após o término da análise. Vários scripts com execução adiada são executados na ordem do HTML, portanto um segundo script pode usar valores definidos pelo primeiro.

Use async para código independente que não dependa de a página estar pronta nem de outro script. Adicionar defer a um script clássico incorporado ao HTML não tem efeito.

Carregue um módulo

<script type="module" src="js/main.js"></script>

A execução de um módulo é adiada por padrão e ele é executado em modo estrito. Ele pode compartilhar código por meio de import e export. Para carregar módulos no Chrome ou no Firefox, sirva o projeto com um servidor de desenvolvimento local, como o recurso live-server de um editor. Abrir a página em um endereço file:// causa restrições ao carregamento de módulos.

Verifique a conexão

Suponha que index.html esteja ao lado de uma pasta js que contém greet.js. Coloque console.log("Page ready"); nesse script e <script src="js/greet.js" defer></script> no head do HTML. Abra a página e depois seu console: a mensagem é “Page ready”.

O caminho relativo começa na pasta do arquivo HTML. Com essa organização, src="greet.js" aponta para o lugar errado. Uma mensagem de arquivo não encontrado significa que não há script para executar naquele endereço. Se você copiou as tags HTML para o arquivo JavaScript, o motor informa um erro de sintaxe na marcação.

O console do navegador mostra mensagens, erros e os resultados do código que você digita. Abra o console da página que você está testando. No Chrome ou no Edge, use Ctrl+Shift+J no Windows/Linux ou Cmd+Option+J no Mac. No Firefox, use Ctrl+Shift+K ou Cmd+Option+K. F12 abre as ferramentas de desenvolvimento como um todo no Chrome e no Edge.

Instruções e expressões

Uma expressão produz um valor: 4 + 5 produz 9. Uma instrução dá um comando, como armazenar esse valor ou exibi-lo:

let total = 4 + 5;
console.log("Total:", total);

A primeira linha é executada antes da segunda, que exibe “Total: 9”. Um ponto e vírgula encerra uma instrução. JavaScript pode inserir muitos pontos e vírgulas omitidos, mas quebras de linha nem sempre funcionam como separadores. Encerre as instruções com ponto e vírgula para deixar clara a estrutura pretendida.

Digite 2 + 3 no console e pressione Enter para ver 5. Use Shift+Enter para iniciar uma nova linha sem executar a entrada. Se você inserir let x = 5;, o console poderá exibir undefined como resultado dessa instrução. Isso não significa que x contém undefined: inserir x em seguida mostra 5. Da mesma forma, uma chamada a console.log() exibe sua mensagem e retorna undefined.

Nomes e comentários

JavaScript distingue maiúsculas de minúsculas. console.log("Hi"); funciona, mas Console.log("Hi"); refere-se a um nome diferente e lança ReferenceError. console.Log("Hi"); encontra console, mas falha com TypeError porque não há um método Log que possa ser chamado.

Comentários são para quem lê o código. O motor os ignora:

// Keep the starting value for the next calculation.
let total = 4;
/* A comment can also
   continue on another line. */
console.log(total);

Colocar // antes de uma instrução desativa temporariamente essa linha. Um comentário útil explica um motivo que o código sozinho não deixa claro.

Mensagens, avisos e experimentos

console.log("Total:", 9); exibe seus argumentos separados por espaços. console.warn() marca um aviso; console.error() marca uma mensagem de erro. Exibir uma mensagem com console.error() não lança uma exceção por si só. console.clear() limpa a exibição.

Entradas no console são experimentos, não edições salvas. Recarregar a página executa os scripts salvos novamente. Você pode inspecionar no console variáveis de nível superior de scripts clássicos; as variáveis de nível superior de um módulo permanecem dentro desse módulo.

Caixas de diálogo simples e modo estrito

alert("Saved!"); mostra uma mensagem. confirm("Continue?") retorna true para OK e false para Cancelar. prompt("Quantity?", "1") retorna a cadeia de caracteres digitada ou null para Cancelar. Digitar 12 produz "12", não 12. Essas caixas de diálogo pausam a interação enquanto estão abertas.

Coloque "use strict"; no início de um script clássico para que certos erros sejam sinalizados. Por exemplo, totl = 5; sem declaração lança ReferenceError no modo estrito; em um script clássico sem modo estrito, pode criar uma variável global acidental. Um módulo já usa modo estrito. Verifique a grafia e declare os nomes antes de atribuir valores a eles.

Uma variável é um nome que se refere a um valor. Você pode declarar o nome primeiro e atribuir seu valor depois ou fazer ambos em uma instrução. O operador de atribuição = armazena o valor à direita no nome à esquerda.

Escolha let ou const

let score;
console.log(score); // undefined
score = 10;
score = score + 2;
console.log(score); // 12

let score; declara a variável. Até que uma atribuição lhe dê outro valor, ela contém undefined. A próxima atribuição armazena 10. Em score = score + 2;, JavaScript lê a pontuação antiga, adiciona 2 e depois armazena 12. Essa é uma instrução de atualização, portanto não precisa fazer sentido como equação matemática. A reatribuição usa o nome existente sem escrever let novamente.

Uma declaração const deve incluir seu valor inicial:

const BOILING_POINT_C = 100;

A declaração const rate; é um erro de sintaxe porque não tem um inicializador. Tentar atribuir um novo valor a BOILING_POINT_C depois lança um TypeError.

Use const por padrão. Escolha let para um total acumulado, um contador ou um resultado ao qual instruções posteriores atribuirão um valor. Um valor calculado a partir de outros valores ainda pode usar const se o programa nunca reatribuir esse nome.

Dê ao nome um significado claro

Nomes podem conter letras, dígitos, _ e $; não podem começar com um dígito. place1 é válido, mas 1stPlace não é. Espaços são proibidos, e um hífen é lido como subtração, portanto total-price não nomeia uma única variável. Palavras reservadas como if, return e class não podem ser nomes de variáveis.

Use notação camelCase para nomes comuns: itemCount, firstName ou priceWithTax. Nomes booleanos como isLoggedIn e hasDiscount descrevem um valor de sim ou não. Inclua unidades quando evitarem confusão: distanceKm e durationMin. Valores fixos conhecidos antes da execução do programa muitas vezes usam UPPER_SNAKE_CASE, como MAX_LOGIN_ATTEMPTS. Maiúsculas e minúsculas importam: total e Total são nomes distintos.

Acompanhe um total acumulado

const TAX_RATE = 0.2;
let total = 0;
total = total + 12.5;
total = total + 7.5;
const totalWithTax = total * (1 + TAX_RATE);
console.log(totalWithTax); // 24

O total começa em 0, passa a 12.5 e depois a 20. O multiplicador 1 + TAX_RATE é 1.2, portanto o valor final é 24. Apenas total precisa receber reatribuições. A taxa de imposto e o valor final calculado usam const.

Se você escrever let total = 7.5; uma segunda vez no mesmo escopo, estará tentando declarar uma segunda variável, não atualizar a primeira. Use total = 7.5; para substituir o valor.

Reconheça declarações antigas

Código antigo muitas vezes usa var. Ele ainda funciona, mas suas variáveis pertencem a uma função ou a um script em vez de um bloco aninhado comum. Ele permite declarações repetidas, e leituras antes da declaração produzem undefined. As versões modernas let e const detectam esses erros. Lembre-se de suas regras ao ler um tutorial antigo que usa var.

Um bloco é o código entre chaves, como o corpo de um if. O escopo de uma variável é a região em que seu nome se refere a essa variável. Tanto let quanto const têm escopo de bloco, incluindo quaisquer blocos aninhados dentro do bloco em que são declarados.

Mantenha um resultado onde ele é necessário

const temperatureC = 31;
let label;
if (temperatureC > 30) {
  label = "hot";
} else {
  label = "mild";
}
console.log(label); // hot

label é declarada fora dos ramos, portanto a linha final pode lê-la. Cada ramo atribui um valor à variável existente. Se, em vez disso, você declarar const label = "hot"; dentro do primeiro ramo, essa variável não poderá ser lida após o bloco. Sem outra label no escopo, a leitura final lança ReferenceError.

Uma declaração no nível superior de um script clássico tem escopo global: o código posterior nesse script e os outros scripts clássicos da página podem usá-la. Em um módulo, variáveis de nível superior pertencem a esse módulo. Mantenha uma variável no menor escopo que precisa dela para reduzir conflitos de nomes.

Distinga sombreamento de reatribuição

let x = 1;
{
  let x = 2;
  console.log(x); // 2
}
console.log(x); // 1

A declaração interna cria uma variável separada. Isso é sombreamento: dentro do bloco interno, x refere-se à variável interna. A variável externa permanece 1. Retirar o let interno atribuiria 2 à variável externa. Nomes distintos tornam essa diferença mais fácil de perceber.

Leitura antes da inicialização

Uma vinculação com escopo de bloco abrange todo o seu bloco, mas não pode ser acessada antes que a declaração a inicialize. A região antes da inicialização é a zona morta temporal:

console.log(price);
let price = 5;

Isso lança ReferenceError: Cannot access 'price' before initialization. O nome existe no escopo, mas não está pronto. Em comparação, price is not defined significa que nenhuma vinculação com esse nome pode ser encontrada ali. Uma declaração interna também sombreia um nome externo antes da linha da declaração interna; o valor externo não pode contornar a zona morta temporal da variável interna.

Relacione cada erro a uma correção

Erros de sintaxe impedem que esse script comece. Um erro em tempo de execução interrompe a execução atual quando ela chega à instrução que falha. O Chrome permite outra declaração let em uma entrada separada do console por conveniência; isso não torna válidas declarações duplicadas em um script.

Const fixa a referência

Valores primitivos como números e cadeias de caracteres não podem ser alterados no próprio valor. O conteúdo de um objeto pode mudar mesmo quando seu nome usa const:

const settings = { theme: "dark" };
settings.theme = "light"; // allowed

O nome ainda se refere ao mesmo objeto. Atribuir settings = {}; tenta substituir essa referência e lança TypeError.

Os valores 7, "7" e true têm tipos diferentes. Eles podem aparecer em lugares semelhantes em uma página, mas JavaScript aplica regras diferentes a cada um. Um tipo descreve o valor armazenado no momento, não uma restrição permanente da variável.

Comece pelos três tipos principais

Um número representa valores numéricos inteiros e decimais: 42, -7 e 3.75 têm o mesmo tipo. A notação científica também é numérica: 1e3 significa 1000. Uma cadeia de caracteres armazena texto entre aspas, portanto "42" é texto, embora seus caracteres sejam dígitos. Um booleano é exatamente true ou false, sem aspas. Comparações produzem booleanos que um programa pode usar para tomar decisões.

Use typeof para inspecionar um valor. Ele retorna uma cadeia de caracteres com o nome do tipo:

console.log(typeof 7);         // number
console.log(typeof "7");       // string
console.log(typeof true);      // boolean
console.log(typeof undefined); // undefined

Os comentários mostram as palavras exibidas; os próprios resultados são cadeias de caracteres como "number".

Reconheça valores ausentes

let city;
let middleName = null;
console.log(city);       // undefined
console.log(middleName); // null

undefined geralmente significa que JavaScript não recebeu um valor, como ocorre com um let não inicializado. null geralmente é atribuído de propósito para significar “vazio” ou “sem valor”. Teste um valor intencionalmente vazio com middleName === null.

Não use typeof value === "object" para testar null. typeof null produz "object" por causa de um comportamento histórico da linguagem, embora null seja um valor primitivo.

Conheça a lista completa de tipos

JavaScript tem sete tipos primitivos: number, string, boolean, undefined, null, bigint e symbol. O oitavo tipo é object, usado para valores estruturados. Funções são objetos que podem ser chamados, embora typeof informe "function" para elas.

Um bigint é um número inteiro escrito com um n no final, como 9007199254740993n. Ele permite representar números inteiros grandes com exatidão. Não misture um bigint e um number em operações aritméticas: 1n + 2 lança TypeError. Um symbol é um identificador único; typeof Symbol("id") produz "symbol". typeof 42n produz "bigint".

NaN é outro resultado especial a reconhecer: apesar de seu nome, “não é um número”, typeof NaN é "number". Ele é um valor numérico que indica um resultado numérico inválido. Seu nome, por si só, não identifica um tipo separado.

Rastreie uma variável que muda

let data = 42;
console.log(typeof data); // number
data = "forty-two";
console.log(typeof data); // string

Isso é tipagem dinâmica. A reatribuição pode substituir um número por uma cadeia de caracteres. Essa flexibilidade torna útil exibir tanto o valor quanto seu tipo quando um resultado surpreende:

const input = "7";
console.log(input, typeof input); // 7 string
console.log(input + 1);           // 71
console.log(7 + 1);               // 8

A primeira adição concatena texto; a segunda soma números. Valores primitivos não podem ser alterados no próprio valor: uma operação cria um novo valor. Atualizar uma variável altera o valor ao qual ela se refere.

JavaScript usa um tipo numérico comum para valores inteiros e decimais. A divisão mantém a parte fracionária: 10 / 4 produz 2.5. Tanto o operador escolhido quanto a ordem em que ele é executado afetam o resultado.

Calcule na ordem pretendida

Potências são calculadas antes de multiplicação, divisão e resto; essas operações são calculadas antes de adição e subtração. Operadores de mesmo nível são executados da esquerda para a direita, exceto potências, que se associam da direita para a esquerda: 2 ** 3 ** 2 é 2 ** 9, ou 512. Parênteses alteram essa ordem: 2 + 3 * 4 produz 14, mas (2 + 3) * 4 produz 20.

Para calcular a média de 72, 85 e 90, some todo o grupo antes de dividir:

const average = (72 + 85 + 90) / 3;
console.log(average); // 82.33333333333333

Sem parênteses, 72 + 85 + 90 / 3 divide apenas 90 e produz 187.

Separe unidades inteiras e restos

Math.trunc(7 / 2) descarta a parte fracionária e produz 3. Para um comprimento positivo de 245 cm, Math.floor(245 / 100) produz 2 metros, e 245 % 100 produz os 45 centímetros restantes. Da mesma forma, 3725 segundos produzem 1 hora com Math.floor(3725 / 3600), 2 minutos com Math.floor((3725 % 3600) / 60) e 5 segundos com 3725 % 60. Para um inteiro, n % 2 === 0 testa se ele é par. Um resto tem o sinal do operando à esquerda: -7 % 3 produz -1.

Atualize um número

x += 5 significa x = x + 5. Os operadores -=, *=, /=, %= e **= seguem o mesmo padrão. Começando em 10, as atualizações += 5, *= 2, -= 4 e depois /= 2 produzem 15, 30, 26 e depois 13.

++ aumenta em uma unidade e -- diminui em uma unidade. Com let a = 5; let b = a++;, a passa a 6, mas b recebe 5: o incremento pós-fixado retorna o valor antigo. Com let b = ++a;, começando novamente com a = 5, ambos passam a 6. Uma atualização em sua própria linha evita depender desse resultado da expressão.

Arredonde e formate de modo intencional

Math.round(13.456 * 100) / 100 produz o número 13.46. Já (3.14159).toFixed(2) produz a cadeia de caracteres "3.14", e (19.999).toFixed(2) produz "20.00". Formate no final: adicionar um número a uma cadeia formatada concatena texto.

Reconheça limites numéricos

Números usam ponto flutuante binário de 64 bits. A maioria das frações decimais é aproximada, portanto 0.1 + 0.2 é 0.30000000000000004. Arredonde para exibição, compare com uma pequena tolerância adequada ou calcule em unidades inteiras, como centavos ou milímetros.

Algumas operações inválidas retornam um valor em vez de lançar um erro: 5 / 0 é Infinity, -5 / 0 é -Infinity, e 0 / 0 ou "abc" * 2 é NaN. A maioria das operações aritméticas com NaN continua produzindo NaN; NaN ** 0 é uma exceção e produz 1.

Todo inteiro até Number.MAX_SAFE_INTEGER, 9007199254740991, é exato. Além dele, apenas alguns inteiros podem ser representados: 9007199254740992 + 1 ainda produz 9007199254740992. Bigints permitem representar inteiros exatos maiores.

Uma cadeia de caracteres armazena texto entre aspas simples, aspas duplas ou crases correspondentes. Para texto simples, as três formas podem representar o mesmo valor. As aspas marcam onde o texto começa e termina; elas não fazem parte desse valor.

Aspas, sequências de escape e concatenação

Use o outro estilo de aspas para incluir uma aspa: "It's late". Uma sequência de escape usa uma barra invertida, como em 'It\'s late'. \n representa uma quebra de linha, \t uma tabulação e \\ uma barra invertida. A sequência \n ocupa uma posição na cadeia de caracteres, embora sejam necessários dois símbolos digitados para escrevê-la. "It's".length é 4; "Line 1\nLine 2".length é 13.

O operador + concatena cadeias de caracteres. "Hello" + " " + "world" produz "Hello world"; nenhum espaço é inserido a menos que um dos trechos o contenha. Com let msg = "Hi"; msg += " there";, o valor atualizado é "Hi there".

As posições começam em zero

const language = "JavaScript";
console.log(language.length); // 10
console.log(language[0]);     // J
console.log(language[4]);     // S
console.log(language[9]);     // t
console.log(language.at(-1)); // t
console.log(language[10]);    // undefined

O índice final é length - 1. Um argumento negativo em at() conta a partir do final. length é uma propriedade, não um método: language.length() lança TypeError. Mais precisamente, as posições e o length das cadeias de caracteres usam unidades de código UTF-16, as unidades que JavaScript usa para armazenar texto. Cada uma dessas letras comuns do inglês ocupa uma unidade; alguns símbolos e emojis ocupam mais.

Salve a nova cadeia de caracteres

Cadeias de caracteres são imutáveis: seu conteúdo não pode ser editado no próprio valor. Atribuir word[0] = "b" quando word é "cat" não cria "bat"; no modo estrito, isso lança um erro. Métodos que transformam texto retornam uma nova cadeia:

let name = "ana";
name.toUpperCase();
console.log(name); // ana
name = name.toUpperCase();
console.log(name); // ANA

Chamar o método não basta para manter seu resultado. Escrever name.toUpperCase sem parênteses sequer o chama.

Escolha a operação de texto adequada

toLowerCase() e toUpperCase() alteram as letras para minúsculas ou maiúsculas; trim() remove espaços em branco nas duas extremidades. O encadeamento aplica cada método ao resultado anterior: " Ana@Example.com ".trim().toLowerCase() produz "ana@example.com".

includes(), startsWith() e endsWith() retornam booleanos. Por exemplo, "report.pdf".endsWith(".pdf") produz true. indexOf() produz a primeira posição correspondente ou -1: "JavaScript".indexOf("S") produz 4, mas procurar "s" produz -1. As buscas distinguem maiúsculas de minúsculas. "JavaScript".includes("script") é false; converta para minúsculas antes dessa busca para obter true.

slice(start, end) retorna o texto do índice inicial até o índice final, sem incluí-lo. "JavaScript".slice(0, 4) produz "Java"; .slice(4) e .slice(-6) produzem "Script".

"a-b-c".replace("-", "+") produz "a+b-c"; replaceAll() com os mesmos argumentos produz "a+b+c". "ab".repeat(3) produz "ababab", e "5".padStart(3, "0") produz "005". Para const city = "paris";, city[0].toUpperCase() + city.slice(1) produz "Paris" ao unir uma primeira letra maiúscula ao restante inalterado.

Um literal de modelo coloca texto entre crases. Dentro dele, ${...} marca um marcador de posição cuja expressão será avaliada e inserida no texto. Isso é útil quando uma mensagem combina vários valores com pontuação, espaços ou cálculos.

Leia um marcador de posição como uma expressão

const name = "Ana";
const greeting = `Hello, ${name}!`;
console.log(greeting); // Hello, Ana!

O motor lê name, obtém "Ana" e o coloca entre a saudação e o ponto de exclamação. As crases e os símbolos do marcador de posição descrevem a cadeia de caracteres; eles não aparecem na mensagem resultante.

Com concatenação, a mesma ideia é "Hello, " + name + "!". Uma mensagem mais longa como "Hello, " + name + "! You have " + count + " new messages." exige vários trechos entre aspas separadas. Um modelo mantém a frase inteira unida: `Hello, ${name}! You have ${count} new messages.`. Os espaços ainda precisam ser digitados onde você os deseja.

Calcule e depois formate dentro do marcador

const name = "Ana";
const tickets = 3;
const price = 4.5;
const receipt = `${name} bought ${tickets} tickets for ${(tickets * price).toFixed(2)} in total.`;
console.log(receipt);

A saída é “Ana bought 3 tickets for 13.50 in total.” Primeiro, tickets * price produz 13.5. Os parênteses tornam todo esse produto o receptor de .toFixed(2), que produz "13.50". O marcador de posição insere esse texto na frase. As variáveis numéricas price e tickets permanecem inalteradas.

Sem formatação, um marcador de posição mostra a forma textual comum do número. `${0.1 + 0.2}` produz "0.30000000000000004". Formatando-o dentro do marcador, `${(0.1 + 0.2).toFixed(2)}` produz "0.30".

Expressões são permitidas; instruções não

Um marcador de posição pode conter um valor, um cálculo, uma chamada de método ou uma expressão que escolhe um valor. Com birthYear = 1990, `You turn ${2026 - birthYear} this year.` produz “You turn 36 this year.”

O operador condicional pode selecionar texto no singular ou no plural:

const count = 1;
console.log(`You have ${count} ${count === 1 ? "item" : "items"}`);
// You have 1 item

A comparação escolhe uma cadeia de caracteres para inserir. Uma instrução if não pode substituir essa expressão dentro de ${...} porque um marcador de posição precisa de uma expressão que produza um valor.

Mantenha a pontuação exata

Somente crases ativam marcadores de posição. Com const n = 5;, "n + 1 = ${n + 1}" é texto comum e deixa ${n + 1} inalterado. O modelo `n + 1 = ${n + 1}` produz “n + 1 = 6”. Uma crase é um caractere diferente de uma aspa simples.

Quebras de linha digitadas entre crases tornam-se quebras de linha na cadeia de caracteres resultante. Os espaços de indentação também passam a fazer parte dela. Valores ausentes são inseridos como texto: `${undefined}` produz "undefined", enquanto `${null}` produz "null". Se uma mensagem contiver inesperadamente “undefined”, inspecione a variável inserida e o ponto em que um valor foi atribuído a ela.

Conversão explícita significa que você escreve a conversão, usando uma ferramenta como Number(), String() ou Boolean(). Ela torna o tipo pretendido visível no ponto em que um valor entra no cálculo.

Escolha uma conversão numérica

Number() lê o texto inteiro como um número, ignorando espaços em branco nas extremidades. Number("1.5") produz 1.5, e Number(" 12 ") produz 12. Number("12px") produz NaN porque a cadeia de caracteres inteira não é numérica. O código usa ponto decimal: Number("1,5") também produz NaN.

parseInt() e parseFloat() leem um início numérico e param quando o texto deixa de ser compatível. parseInt("12px", 10) produz 12; parseFloat("3.75 kg") produz 3.75. O analisador de inteiros para no ponto decimal, portanto parseInt("0.5", 10) produz 0. parseInt("abc", 10) produz NaN porque não há um início numérico. Passe uma base para parseInt(): parseInt("08", 10) produz 8, enquanto parseInt("ff", 16) lê hexadecimal e produz 255.

O operador unário de adição também converte texto numérico comum: +"42" produz 42.

Mantenha entradas ausentes separadas de zero

Um prompt retorna uma cadeia de caracteres ou null. Cancelar retorna null, e confirmar uma caixa vazia retorna "". Ambos se tornam zero com Number(), assim como texto composto apenas de espaços em branco. Verifique a ausência antes de converter:

const input = prompt("Enter a quantity:");
if (input === null || input.trim() === "") {
  console.log("No quantity entered.");
} else {
  const quantity = Number(input);
  if (Number.isNaN(quantity)) {
    console.log("Please type a number.");
  } else {
    console.log(quantity + 1);
  }
}

O || ignora a chamada de trim() quando input é null. Digitar “12” chega ao cálculo numérico e exibe 13. Digitar “12px” chega à mensagem de número inválido. Digitar “0” é uma resposta válida e exibe 1.

Use Number.isNaN(value) para testar um valor NaN real. value === NaN nunca é verdadeiro. A função global mais antiga isNaN() primeiro converte seu argumento: isNaN("hello") é true, mas Number.isNaN("hello") é false porque esse valor ainda é uma cadeia de caracteres.

Converta para texto ou booleano

String(42) produz "42", String(true) produz "true" e String(null) produz "null". (42).toString() também produz "42", mas chamar .toString() em null ou undefined lança TypeError. String() lida com ambos.

Boolean() retorna false para false, 0, -0, 0n, "", null, undefined e NaN; esses são valores avaliados como falsos. Navegadores também têm o objeto legado document.all, avaliado como falso. Outros valores são avaliados como verdadeiros. Em particular, "0", "false" e uma cadeia com um único espaço são todos avaliados como verdadeiros. !!value produz a mesma conversão booleana.

Para duas respostas de prompt "12" e "30", a + b produz "1230". Converta as duas entradas primeiro: Number(a) + Number(b) produz 42.

Coerção de tipos é a conversão automática de tipos dentro de uma operação. Suas regras dependem do operador. Um cálculo que parece funcionar ainda pode conter um valor de texto que cause uma falha em uma etapa posterior.

Acompanhe a regra da adição

Para operandos comuns dos tipos number, string, boolean, null e undefined, + concatena texto se um dos operandos for uma cadeia de caracteres. Caso contrário, ele realiza conversão numérica e adição. "5" + 2 produz "52", e 2 + "5" produz "25".

Avalie uma cadeia da esquerda para a direita:

console.log(1 + 2 + "3"); // 33
console.log("3" + 1 + 2); // 312

Na primeira expressão, dois números somam 3; adicionar "3" em seguida concatena as duas formas textuais em "33". Na segunda, a primeira operação já produz "31", portanto a operação final acrescenta outro dígito. Parênteses podem alterar qual operação ocorre primeiro: "3" + (1 + 2) produz "33".

Outras operações aritméticas esperam números

Subtração, multiplicação, divisão, resto e potências convertem cadeias de caracteres numéricas em números. "5" - 2 produz 3, "5" * "2" produz 10, e "10" / "4" produz 2.5. Uma cadeia como "abc" não pode se tornar um número válido, portanto "abc" * 2 produz NaN. Bigints têm regras aritméticas separadas; misturar um deles com um number lança TypeError.

Essa diferença pode esconder um erro:

const price = "20";
console.log(price * 3); // 60
console.log(price + 5); // 205

A multiplicação converte o preço, mas não altera a variável. A adição posterior ainda encontra uma cadeia de caracteres. Converta uma vez quando a entrada chegar e continue trabalhando com o resultado numérico.

Rastreie pequenas conversões automáticas

Em operações aritméticas numéricas, true torna-se 1, false torna-se 0 e null torna-se 0. Assim, true + true produz 2, enquanto null + 1 produz 1. undefined torna-se NaN, portanto undefined + 1 é NaN. Os operadores unários de adição e subtração convertem cadeias numéricas: +"42" produz 42, -"5" produz -5 e +"" produz 0.

++ sempre solicita uma atualização numérica, mas += segue a regra da adição:

let count = "5";
count++;
console.log(count, typeof count); // 6 number
let label = "5";
label += 1;
console.log(label, typeof label); // 51 string

Condições aplicam uma conversão diferente

Uma condição if avalia um valor como verdadeiro ou falso. "0" é uma cadeia de caracteres não vazia e passa no teste; o número 0 é avaliado como falso e faz o bloco ser ignorado. Se zero for uma quantidade válida, uma verificação de valor verdadeiro ou falso por si só não consegue distinguir zero de uma resposta ausente. Para um valor representado por um número ou null, quantity !== null testa explicitamente a ausência.

A igualdade também oferece dois comportamentos: "7" == 7 é true após a coerção, mas "7" === 7 é false porque a igualdade estrita preserva a distinção entre tipos. Use igualdade estrita para comparações comuns.

Quando um resultado for texto concatenado ou NaN, exiba cada entrada junto de typeof input. Encontre o primeiro tipo incorreto e corrija a conversão naquele ponto. Transformar "205" em um número no final produziria 205, não a soma pretendida 25.

Uma comparação produz um booleano. 7 > 3 é true, 5 >= 5 inclui igualdade e é true, e 4 < 2 é false. Armazene um resultado como const isAdult = age >= 18; ou use-o diretamente em uma condição.

Prefira igualdade estrita

=== compara sem converter tipos. Dois valores primitivos comuns devem ter o mesmo tipo e valores correspondentes: 7 === 7 é true, enquanto "7" === 7 é false. !== inverte a igualdade estrita, portanto "7" !== 7 é true.

A igualdade não estrita, ==, pode converter operandos. "7" == 7, 0 == "" e "0" == false são todos true. Sua regra especial para valores ausentes faz null == undefined ser verdadeiro, mas null == 0 ser falso. != inverte a igualdade não estrita. Prefira === e !==; um uso deliberado de value == null pode testar tanto null quanto undefined.

Distinga a ordenação textual da numérica

Duas cadeias de caracteres são comparadas da esquerda para a direita usando seus valores de código UTF-16. Para palavras comuns em inglês com as mesmas maiúsculas ou minúsculas, "apple" < "banana" é true. Um prefixo correspondente mais curto vem primeiro: "apple" < "apples" é true. Entre as letras inglesas sem acento, as maiúsculas vêm antes das minúsculas, portanto "Zebra" < "apple" é true. Converter as duas cadeias com toLowerCase() elimina essa diferença em comparações simples de letras inglesas.

Cadeias de dígitos também seguem a ordem textual:

console.log("10" < "9"); // true
console.log("10" < 9);   // false

Na primeira comparação, o caractere “1” vem antes de “9”. Na segunda, um operando é numérico, portanto o texto torna-se o número 10. Converta entradas numéricas deliberadamente antes de comparar seus valores. "abc" < 5 e "abc" > 5 produzem ambos false porque a conversão numérica produz NaN.

Trate primeiro números ausentes e inválidos

NaN não é igual a si mesmo: tanto NaN === NaN quanto NaN == NaN são false. Use Number.isNaN() para reconhecê-lo.

Comparações relacionais convertem null em zero, portanto null >= 0 é true, mas null > 0 é false. A igualdade tem uma regra diferente, portanto null == 0 permanece false. undefined torna-se NaN em comparações relacionais, então undefined > 0 e undefined < 0 são falsos; undefined == 0 também é falso. Verifique se há um valor ausente antes de tratá-lo como uma medida.

Compare decimais e intervalos

O arredondamento binário faz com que 0.1 + 0.2 === 0.3 seja falso. Para esses valores pequenos, um teste de tolerância funciona:

const closeEnough = Math.abs((0.1 + 0.2) - 0.3) < 0.000001;
console.log(closeEnough); // true

Math.abs() remove o sinal da diferença. Escolha uma tolerância adequada à magnitude e à precisão dos valores ou calcule em unidades inteiras, como milímetros.

Não encadeie testes de intervalo como na matemática. Com x = 50, 0 < x < 10 primeiro produz true e depois compara esse booleano como 1 < 10, resultando em true. Da mesma forma, 3 > 2 > 1 torna-se true > 1, ou 1 > 1, que é falso. Escreva as duas comparações por completo: x > 0 && x < 10.

Operadores lógicos permitem que uma condição expresse vários requisitos. Com operandos booleanos, && significa E, || significa OU e ! significa NÃO. Sua ordem de avaliação também permite proteger uma operação que falharia com um valor ausente.

Expresse cada requisito

const temperatureC = 25;
const inRange = temperatureC >= 18 && temperatureC <= 30;
const outside = temperatureC < 18 || temperatureC > 30;

inRange é verdadeiro porque ambos os limites são satisfeitos. outside é falso porque nenhum dos testes de estar fora é satisfeito. OU inclui o caso em que ambos os lados são verdadeiros; não significa “um, mas nunca ambos”.

Escreva cada comparação por completo. color === "red" || "green" não testa se uma das duas cores corresponde. Com color = "blue", a primeira comparação é falsa, mas a cadeia de caracteres não vazia "green" é avaliada como verdadeira. O teste pretendido é color === "red" || color === "green".

Agrupe a condição pretendida

NÃO tem precedência sobre E, e E tem precedência sobre OU. Assim, true || false && false é verdadeiro, mas (true || false) && false é falso.

Suponha que o acesso exija uma conexão e o papel de administrador ou de proprietário. Escreva loggedIn && (isAdmin || isOwner). Sem parênteses, loggedIn && isAdmin || isOwner permite que isOwner torne toda a expressão verdadeira mesmo com loggedIn = false. Os parênteses mantêm o requisito de conexão associado aos dois papéis.

Inverter uma condição composta também altera o conectivo. !(a && b) tem o mesmo valor lógico que !a || !b; !(a || b) equivale a !a && !b. Para uma temperatura fora do intervalo inclusivo, inverter os dois testes internos altera >= para <, <= para > e E para OU.

Pare quando o resultado for conhecido

E para no primeiro operando avaliado como falso; OU para no primeiro operando avaliado como verdadeiro. Isso é avaliação de curto-circuito. O operando ignorado não é avaliado:

const input = null;
const hasText = input !== null && input.trim() !== "";
console.log(hasText); // false

O primeiro teste é falso, portanto trim() nunca é chamado em null. Inverter esses dois testes tentaria a operação insegura primeiro.

Esses operadores retornam um operando, não necessariamente um booleano. "" || "Guest" retorna "Guest"; "Sam" || "Guest" retorna "Sam". "Ana" && "ok" retorna "ok", e null && "x" retorna null. Um if que envolva a expressão então avalia o valor retornado como verdadeiro ou falso.

Preserve valores significativos avaliados como falsos

Com quantity = 0, quantity || 1 produz 1, mas quantity ?? 1 preserva 0. Com nickname = "", nickname || "Anonymous" produz o valor alternativo, enquanto nickname ?? "Anonymous" preserva a cadeia de caracteres vazia. Use ?? quando esses valores forem significativos.

Use parênteses ao misturar ?? com E ou OU: a || b ?? c é um erro de sintaxe, enquanto (a || b) ?? c tem um agrupamento explícito. NÃO primeiro converte para um booleano e depois o inverte: !0 é verdadeiro e !"0" é falso. O duplo NÃO, !!value, produz um booleano propriamente dito.

Uma instrução if executa um bloco quando sua condição é avaliada como verdadeira. Um else é executado quando essa condição é avaliada como falsa. Use chaves para mostrar exatamente quais instruções pertencem a cada ramo.

Ordene uma cadeia de decisões

Uma cadeia de else if verifica as condições de cima para baixo. A primeira condição satisfeita determina o bloco executado, e todos os ramos posteriores são ignorados:

const score = 85;
let grade;
if (score >= 90) {
  grade = "A";
} else if (score >= 80) {
  grade = "B";
} else if (score >= 70) {
  grade = "C";
} else {
  grade = "F";
}

A primeira comparação falha; a segunda é satisfeita, portanto grade torna-se "B". Testar score >= 70 primeiro incluiria até uma pontuação de 95 e atribuiria "C". Para limites mínimos sobrepostos, coloque o mais alto primeiro. A variável compartilhada grade é declarada fora dos ramos para que o código posterior possa lê-la.

Uma condição composta pode manter uma decisão curta legível. O frete é grátis para um total de pedido de pelo menos 50 ou para um membro; caso contrário, custa 4,95:

const orderTotal = 45;
const isMember = false;
let shipping;
if (orderTotal >= 50 || isMember) {
  shipping = 0;
} else {
  shipping = 4.95;
}
console.log(`To pay: ${orderTotal + shipping}`);
// To pay: 49.95

Duas condições aninhadas sem ramos else muitas vezes podem ser unidas com E: if (isLoggedIn) { if (isAdmin) { ... } } executa seu código mais interno sob as mesmas condições booleanas que if (isLoggedIn && isAdmin) { ... }.

Evite pontuação que altere o caminho

Sem chaves, apenas a próxima instrução pertence a um if; a indentação não pode adicionar outra instrução a ele. Um ponto e vírgula imediatamente após a condição cria uma instrução vazia: if (x > 5); { ... } faz o bloco seguinte ser executado independentemente da condição.

if (x = 5) atribui 5 e depois avalia o valor como verdadeiro ou falso. Ele altera x e passa no teste porque 5 é avaliado como verdadeiro. Para comparar, use if (x === 5).

Escolha um valor com uma expressão condicional

O operador condicional, ou ternário, retorna um de dois valores:

const age = 17;
const status = age >= 18 ? "adult" : "minor";
console.log(status); // minor

A forma é condition ? valueIfTrue : valueIfFalse. Use-a para uma escolha curta dentro de uma atribuição ou de um literal de modelo. Use if/else para ramos de instruções. Expressões condicionais com muitos níveis de aninhamento tornam as escolhas difíceis de acompanhar.

Compare opções fixas com switch

const day = "Sat";
let kind;
switch (day) {
  case "Sat":
  case "Sun":
    kind = "weekend";
    break;
  default:
    kind = "weekday";
}

switch compara o valor estritamente com seus rótulos de caso. Ambos os rótulos de fim de semana chegam à mesma atribuição. break sai do switch; default trata um valor sem caso correspondente. switch ("2") não corresponde a case 2: porque os tipos são diferentes.

Após uma correspondência, a execução continua pelos casos posteriores até um break ou o final. Essa continuação entre casos pode ser deliberada, como em rótulos em sequência, ou acidental. Se o caso 2 adiciona uma palavra e não tem um break antes de o caso 3 adicionar outra, ambas as adições são executadas. Um rótulo de caso é um ponto de entrada, não uma nova condição testada após cada instrução.

Um programa pode falhar antes de começar, parar durante a execução ou terminar com o resultado errado. Identifique o que aconteceu antes de alterar o código. O console fornece evidências sobre erros, enquanto mensagens com rótulos revelam valores no código executado.

Separe três tipos de problema

Um erro de sintaxe em um script não desfaz outro script que já foi executado. Uma exceção não tratada em tempo de execução interrompe a execução atual na instrução que falhou.

Leia a mensagem completa

Uma entrada do console como Uncaught ReferenceError: totl is not defined fornece o tipo de erro e o nome que causou a falha. “Uncaught” significa que a exceção não foi tratada. Uma localização como app.js:2 aponta para o arquivo e a linha; clicar nela abre esse código.

let total = 0;
total = totl + 5;
console.log(total);

A linha 1 é executada. Na linha 2, JavaScript não consegue ler totl, portanto nunca conclui essa atribuição nem chega à exibição final. Corrigir o erro de digitação para total faz o script exibir 5.

Mensagens de sintaxe comuns mencionam um ) ausente, um token inesperado ou um token inválido. Em console.log("hi";, falta o parêntese de fechamento. Em if (x > 3 {, falta o parêntese de fechamento da condição. A linha indicada é onde o motor percebeu o problema; inspecione também logo acima dela para encontrar uma aspa ou um delimitador não fechado.

Use o tipo para restringir a causa

Um ReferenceError aponta para um nome que não pode ser acessado: um erro de digitação, um problema de escopo ou uma leitura antes da inicialização. Um TypeError significa que a operação não é adequada ao valor, como "abc".length(), null.trim() ou uma reatribuição a uma const. Um RangeError pode resultar de um argumento não aceito, como (1.5).toFixed(101).

A formulação do erro pode variar conforme o navegador. O tipo e o valor envolvido são mais úteis do que memorizar a frase inteira. Corrija o primeiro erro relevante e execute novamente, pois mensagens posteriores podem resultar da mesma causa.

Rastreie um erro de lógica

Para uma média incorreta, exiba a soma e o resultado separadamente:

const sum = 72 + 85 + 90;
const average = 72 + 85 + 90 / 3;
console.log("sum:", sum);         // 247
console.log("average:", average); // 187

A soma correta restringe a falha à etapa de divisão. Altere o cálculo para sum / 3, que produz 82.33333333333333. Quando uma adição concatenar dígitos inesperadamente, exiba também os tipos: console.log("price:", price, typeof price);. Encontre o primeiro valor que difere do esperado.

Use console.warn() ou console.error() para destacar suas próprias mensagens de diagnóstico. Verifique os filtros de nível do console se uma mensagem parecer ausente. Um 404 significa que um recurso não foi encontrado, portanto verifique o caminho do script; outras falhas de carregamento exigem a leitura da mensagem completa. Uma mensagem de inicialização ausente também pode indicar um filtro ou um erro de sintaxe.

Reproduza o problema, leia o primeiro erro, teste uma causa provável com uma pequena alteração ou uma mensagem, execute novamente e verifique o resultado esperado. Remova as mensagens temporárias quando o erro for corrigido.

Um depurador permite pausar um script em execução e inspecionar os valores naquele exato momento. Use o painel Sources no Chrome ou no Edge, ou o painel Debugger no Firefox. Isso é especialmente útil quando um resultado errado depende de várias operações anteriores.

Pause antes da execução da linha

Abra o script em Sources e clique no número de uma linha para definir um ponto de interrupção. A execução pausa antes de essa linha ser executada. Se o código for executado durante o carregamento da página, recarregue a página após definir o ponto de interrupção. Apenas defini-lo não executa novamente um código que já terminou.

Você também pode escrever debugger; no script. Com um depurador ativo, a instrução pausa a execução; sem um depurador, ela não tem efeito. Remova essa instrução antes de publicar o código.

Escolha a próxima ação

Algumas chamadas nativas não têm código-fonte JavaScript no qual você possa entrar. Avançar sem entrar é útil quando você quer o resultado da chamada sem acompanhar seu funcionamento interno.

Durante a pausa, passe o cursor sobre um nome para inspecioná-lo, leia os valores locais em Scope ou adicione uma expressão a Watch. Entradas de Watch como typeof price e total > 100 são reavaliadas conforme você avança. O console também pode avaliar expressões usando o escopo da execução pausada.

Inspecione um total enganoso

O frete grátis deveria começar em 50, mas este código o concede para um subtotal de 45 mais 4 de frete:

const subtotal = "45";
const shipping = 4;
const total = subtotal + shipping;
if (total >= 50) {
  console.log("Free shipping");
}

Defina um ponto de interrupção na linha do if e recarregue. A atribuição já foi executada. Scope mostra subtotal como a cadeia de caracteres "45" e total como "454". Uma entrada de Watch typeof total informa "string". A comparação converte "454" em número, portanto total >= 50 é satisfeita.

A falha está na adição, antes da comparação. Altere o cálculo salvo para const total = Number(subtotal) + shipping;. Recarregue novamente. O total agora é o número 49, e a condição é falsa. Se você pausar na atribuição, ela ainda não terá sido executada: avance sem entrar antes de inspecionar total inicializado.

Pause apenas onde for útil

Um ponto de interrupção condicional pausa somente quando sua expressão é verdadeira, como total > 100. Clique com o botão direito no número da linha para adicionar um. Um ponto de registro exibe uma mensagem cada vez que sua linha é executada, sem pausar ou editar o script. Pontos de interrupção em exceções pausam onde uma exceção é lançada, para que você possa inspecionar os valores no momento da falha.

Executar uma cadeia de else if passo a passo revela a qual ramo a execução chega e qual condição anterior impede verificações posteriores. Use mensagens para alguns valores conhecidos e o depurador quando a ordem ou vários valores durante a execução forem importantes. Faça a correção final no código salvo do projeto: uma alteração experimental no navegador não é uma edição duradoura do projeto. Execute novamente o caso que falhava e verifique o resultado corrigido.