Laços e vetores em JavaScript

Um laço repete um bloco de código. Cada execução de seu corpo é uma iteração. Você pode alterar quantas vezes a tarefa se repete mudando o contador e a condição do laço, sem copiar o corpo.

Leia as três partes

for (let i = 1; i <= 5; i++) {
  console.log(i);
}

Os parênteses contêm uma inicialização, uma condição e uma atualização, separadas por ponto e vírgula. let i = 1 é executado uma vez. Em seguida, o JavaScript verifica i <= 5. Se for verdadeiro, o corpo imprime i, a atualização i++ soma 1 e o JavaScript verifica a condição novamente. Uma condição falsa encerra o laço antes de outra execução do corpo.

Há cinco iterações, mas seis verificações da condição. A última verificação, que falha, não executa o corpo. Um laço cuja condição é falsa no início não tem iterações.

Escolha os limites e o passo

for (let i = 0; i < 10; i++) visita de 0 a 9. Começar em 1 com i <= 10 visita de 1 a 10. Ambos executam dez vezes. Para um passo de 1 de a em direção a b, quando b é pelo menos igual a a, < b produz b - a iterações e <= b produz b - a + 1.

A atualização pode dar passos maiores: for (let i = 0; i <= 20; i += 5) visita 0, 5, 10, 15, 20. Contar de trás para frente exige uma atualização decrescente e uma condição correspondente: for (let i = 3; i >= 1; i--) visita 3, 2, 1. Anote o primeiro e o último valor desejados antes de escolher < ou <=; isso ajuda a detectar um erro de uma unidade.

Mantenha uma soma acumulada

let total = 0;
for (let i = 1; i <= 100; i++) {
  total += i;
}
console.log(total); // 5050

total é um acumulador: ele carrega o resultado de uma iteração para a seguinte. Após as três primeiras iterações, contém 1, depois 3, depois 6. Coloque sua declaração antes do laço para que seja inicializado uma vez. Declará-lo dentro do corpo o reiniciaria a cada vez e o tornaria indisponível após o laço.

Diagnostique um laço com comportamento estranho

O contador do cabeçalho usa let porque i++ reatribui seu valor. Um contador com const permite a primeira execução do corpo, mas lança um TypeError na atualização. Um let i declarado no cabeçalho pertence ao laço; lê-lo depois gera um ReferenceError, a menos que outra variável chamada i exista fora dele.

Um ponto e vírgula imediatamente após o cabeçalho dá ao laço um corpo vazio. Em for (let i = 0; i < 3; i++); { console.log("Hello"); }, o bloco executa uma vez após o laço. Mantenha a chave de abertura junto ao cabeçalho. Por fim, verifique a direção da atualização: começar em 0 com i < 5 e i-- afasta o contador do ponto de parada e nunca termina.

Algumas tarefas terminam quando um resultado alcança uma meta, não após um número conhecido de passos. Um laço while verifica essa condição de parada antes de cada repetição. Um laço do...while a verifica depois do corpo.

Verifique primeiro com while

let balance = 1000;
let years = 0;
while (balance < 1500) {
  balance = balance * 1.05;
  years++;
}
console.log(years); // 9

O saldo cresce 5% ao ano. Ambas as variáveis são inicializadas antes do laço. Após oito repetições, o saldo é cerca de 1477.46, abaixo da meta, então é necessária mais uma repetição. Após nove, é cerca de 1551.33; a próxima verificação é falsa. Mantenha o saldo completo durante o cálculo e arredonde apenas o resultado exibido.

Se uma condição while for falsa inicialmente, o corpo executa zero vezes. Para um laço simples de contagem, coloque a inicialização antes de while e a atualização no fim do corpo. Isso preserva o comportamento de um laço for quando não há continue. Com continue, a atualização exige cuidado extra porque pode ser pulada.

Execute uma vez antes de verificar

let n = 4096;
let digits = 0;
do {
  n = Math.floor(n / 10);
  digits++;
} while (n > 0);
console.log(digits); // 4

Math.floor arredonda para baixo. Aqui cada divisão remove o último algarismo: 4096 torna-se 409, depois 40, 4 e 0. Cada remoção aumenta digits. Começar com 0 ainda executa uma vez, contando corretamente seu único algarismo. Um while (n > 0) verificado antes do corpo pularia esse caso e informaria zero algarismos. Esse método de contagem de algarismos serve para números inteiros não negativos.

Com let n = 10, um corpo do...while que imprime n executa uma vez mesmo que sua condição seja n < 5. A mesma condição verificada antes do corpo não imprime nada. O ponto e vírgula vem após a condição final em do...while.

Avance em direção a uma saída

Um laço infinito continua se repetindo sem terminar. Esquecer n++ em let n = 0; while (n < 3) { console.log(n); } deixa a condição verdadeira para sempre. Código que executa por muito tempo pode congelar uma aba do navegador. Acompanhe o que altera a condição e interrompa um script preso usando os controles do navegador.

Uma condição composta como attempts < 3 && !found continua apenas enquanto ambos os testes são verdadeiros. Ela para quando três tentativas foram usadas ou um resultado é encontrado. Para um inteiro não negativo que diminui em direção a zero, while (count > 0) torna uma contagem regressiva mais clara que while (count). Números negativos também são avaliados como verdadeiros, então essa avaliação, por si só, não significa que uma contagem seja positiva.

Evite a igualdade como teste de parada com decimais. Dez adições de 0.1 produzem 0.9999999999999999 em JavaScript, então while (x !== 1) pode ultrapassar o limite desejado e continuar para sempre. Uma comparação como x < 1 permite ultrapassar o limite; um contador inteiro é melhor quando são necessários exatamente dez passos. Calcule cada valor decimal a partir desse contador.

Um laço pode ser encerrado antes que sua condição se torne falsa ou pular tarefas para apenas um item. Laços aninhados permitem repetir uma sequência dentro de outra, como ao visitar linhas e colunas.

Use break ou continue

break sai de seu laço imediatamente. Para encontrar o primeiro múltiplo de 7 acima de 50:

for (let n = 51; n <= 100; n++) {
  if (n % 7 === 0) {
    console.log(n); // 56
    break;
  }
}

Após imprimir 56, a execução continua depois do laço. Os valores de 57 a 100 nunca são verificados. while (true) pode usar o mesmo padrão quando a saída é mais fácil de testar dentro do corpo; um break alcançável deve fornecer a saída.

continue pula o restante da iteração atual. Em um laço for, ele ainda executa a atualização do cabeçalho antes de verificar a condição novamente:

for (let i = 1; i <= 9; i++) {
  if (i % 2 === 0) continue;
  console.log(i);
}

Os valores pares pulam a impressão, então a saída é 1, 3, 5, 7, 9. Substituir continue por break encerraria o laço em 2, deixando apenas 1 impresso.

Em um laço while, continue salta diretamente para a condição. Uma atualização colocada depois no corpo é pulada. Se i for 2 e o corpo começar com if (i === 2) continue;, esse valor pode ficar preso para sempre. Coloque a atualização necessária antes desse salto ou expresse a contagem com for.

Repita um laço interno para cada linha

for (let row = 1; row <= 3; row++) {
  let line = "";
  for (let col = 1; col <= 4; col++) {
    line = line + (row * col) + " ";
  }
  console.log(line.trim());
}

Para row = 1, o laço interno visita as colunas de 1 a 4 e constrói o texto “1 2 3 4”. Ele recomeça na coluna 1 para a linha 2, produzindo “2 4 6 8”. A linha 3 produz “3 6 9 12”. O corpo interno executa doze vezes: quatro colunas para cada uma das três linhas. Declare line dentro do corpo externo para que cada linha comece com uma cadeia de caracteres vazia.

Use nomes diferentes para os contadores. Um let i interno oculta um i externo, dificultando a leitura das duas posições.

Visite cada par distinto uma vez

Para quatro pessoas numeradas de 0 a 3, inicie o contador interno em i + 1:

for (let i = 0; i < 4; i++) {
  for (let j = i + 1; j < 4; j++) {
    console.log(i, j);
  }
}

Os pares são 0–1, 0–2, 0–3, 1–2, 1–3, 2–3: seis visitas. Começar j em 0 produziria dezesseis visitas, incluindo pares de cada pessoa com ela mesma e pares duplicados em ordem inversa.

Um break comum sai apenas do laço mais interno. Para encerrar uma busca aninhada inteira, rotule o laço externo, por exemplo, outer: for (...), e use break outer; na correspondência. O rótulo identifica o laço do qual sair; ele não altera a ordem em que os pares são testados.

Um vetor armazena uma lista ordenada sob um único nome. Seus valores são chamados de elementos. Um literal de vetor usa colchetes e vírgulas: const temps = [18, 21, 19, 24];. O literal [] cria um vetor vazio.

Conte as posições a partir de zero

const colors = ["red", "green", "blue"];
console.log(colors[0]); // "red"
console.log(colors[2]); // "blue"
console.log(colors.length); // 3

O índice de um elemento é sua posição contada a partir de zero. O terceiro elemento tem índice 2. length conta posições indexadas, incluindo posições vazias. Para esse vetor sem lacunas, também é a contagem de elementos. O último índice é colors.length - 1, então colors[colors.length - 1] lê “blue”.

Ler colors[colors.length] solicita o índice 3, uma posição além do fim, e produz undefined. Um índice ausente não lança um erro apenas por estar ausente. colors[5] também produz undefined.

Leia a partir do fim

colors.at(-1) lê o último elemento e colors.at(-2) lê o anterior. Índices não negativos funcionam como de costume: colors.at(0) lê “red”. Um número negativo entre colchetes tem outro significado: colors[-1] não conta a partir do fim e produz undefined para esse vetor.

Leia uma lista dentro de outra

Um elemento pode ser um vetor:

const grid = [[1, 2, 3], [4, 5, 6]];
console.log(grid[1]); // [4, 5, 6]
console.log(grid[1][0]); // 4

O primeiro índice seleciona uma linha. O segundo seleciona um valor dentro dessa linha. grid.length é 2, enquanto grid[0].length é 3. Esses tamanhos descrevem vetores diferentes. As linhas de um vetor aninhado podem ter tamanhos diferentes.

Vetores podem misturar tipos, como em [42, "km", true]. Uma lista de um tipo de dado, como temperaturas, é mais fácil de processar porque cada elemento pode ser tratado da mesma maneira.

Reconheça um vetor e evite surpresas com posições vazias

typeof [1, 2] retorna “object”, então não é um teste específico para vetores. Use Array.isArray(value): ele retorna true para [1, 2] e false para “12”.

new Array(3) cria três posições vazias; não armazena apenas o número 3. Use [3] para um elemento ou [0, 0, 0] para três zeros explícitos. Uma posição vazia é lida como undefined, mas é uma lacuna, não um valor armazenado explicitamente. Escrever literais de vetor deixa claro o conteúdo desejado.

Leia cadeias de caracteres sem tentar alterá-las no próprio valor

Cadeias de caracteres também permitem usar índices, length e at(). "hello"[1] é “e” e "hello".at(-1) é “o”. Cadeias de caracteres são imutáveis: atribuir um valor a uma posição de caractere não o substitui. Em modo estrito, incluindo módulos JavaScript, essa atribuição lança um TypeError. Construa uma nova cadeia quando o texto precisar mudar.

Alterar um vetor existente é chamado de mutação. Alguns métodos alteram o vetor; outros retornam um novo vetor. O valor de retorno de um método também pode ser um tamanho ou um elemento removido, então verifique tanto o vetor quanto o resultado da chamada.

Substitua elementos e altere as extremidades

const scores = [70, 80, 90];
scores[1] = 85;
console.log(scores); // [70, 85, 90]

const mantém scores apontando para o mesmo vetor. Ele não congela o conteúdo desse vetor. Atribuir scores = [] lançaria um TypeError, mas a atribuição por índice é permitida.

Para const queue = ["Ana", "Ben"];, queue.push("Cleo") retorna 3. O vetor torna-se ["Ana", "Ben", "Cleo"]. Depois, queue.pop() retorna “Cleo” e deixa os dois primeiros nomes. Armazenar uma chamada de push armazena seu tamanho numérico, não o vetor atualizado. pop e shift retornam undefined em um vetor vazio. Adicionar ou remover no início também desloca os outros índices, o que pode envolver mais trabalho em vetores longos.

Insira e remova no meio

splice(start, deleteCount, ...items) altera o vetor e retorna um vetor dos elementos removidos:

const days = ["Mon", "Tue", "Thu", "Fri"];
const removed = days.splice(2, 0, "Wed");
// days: ["Mon", "Tue", "Wed", "Thu", "Fri"]
// removed: []
const nextRemoved = days.splice(1, 2);
// days: ["Mon", "Thu", "Fri"]
// nextRemoved: ["Tue", "Wed"]

A primeira chamada começa no índice 2, exclui zero itens e insere “Wed” ali. A segunda começa no índice 1 e remove dois itens. Seu segundo argumento é uma quantidade, não um índice final. Elementos após uma inserção ou remoção recebem novos índices.

Copie um trecho com slice

slice(start, end) retorna um novo vetor e exclui o índice final. Para const t = [10, 20, 30, 40, 50];, t.slice(1, 3) produz [20, 30] e deixa t inalterado. t.slice(-2) copia os dois últimos elementos, [40, 50]. Sem argumentos, t.slice() copia o vetor inteiro. A letra extra em splice indica uma operação diferente: ele altera o original; slice copia um trecho.

Mantenha a lista livre de lacunas acidentais

Escrever além do fim cria posições vazias. Após const a = [1, 2]; a[4] = 5;, o tamanho é 5 e os índices 2 e 3 são lacunas. delete a[i] também deixa uma lacuna e preserva o tamanho. Use push para adicionar ao fim e splice(i, 1) para remover um elemento e fechar a lacuna.

Atribuir um length menor remove elementos do fim. a.length = 0 esvazia o vetor. Os elementos removidos não reaparecem se o tamanho for aumentado depois.

sort e reverse também alteram vetores. Os métodos de cópia incluem slice, concat, map, filter, toSorted, toReversed, toSpliced e with. Quando um método retorna um novo vetor, salve ou use esse resultado; o original ainda contém seu conteúdo anterior.

Uma busca pode precisar de um resultado sim/não ou da posição de um elemento. A conversão de texto tem outra finalidade: ela altera o formato dos dados para que uma lista possa ser lida, armazenada ou processada.

Pergunte se está presente ou onde está

includes(value) retorna um booleano. ["tea", "coffee"].includes("tea") é true; mudar a busca para “Tea” produz false. A correspondência de texto diferencia maiúsculas de minúsculas, e os tipos importam: [5].includes("5") é false.

indexOf(value) retorna o primeiro índice correspondente, ou -1 quando nenhum valor corresponde. lastIndexOf pesquisa a partir do fim. Com [3, 7, 3, 9], o primeiro 3 está no índice 0 e o último está no índice 2. Procurar 5 retorna -1.

Não escreva if (arr.indexOf(x)). O índice 0 é avaliado como falso, enquanto -1 é avaliado como verdadeiro: esse teste rejeita uma correspondência no início e aceita um valor ausente. Use arr.indexOf(x) !== -1 ou use includes quando a posição não for necessária.

Para valores comuns, ambos os métodos exigem o mesmo tipo e valor, como na igualdade estrita. O tratamento de NaN difere: [1, NaN].includes(NaN) é true, mas [1, NaN].indexOf(NaN) é -1. A regra de igualdade usada por includes pode considerar NaN igual a si mesmo.

Compare o conteúdo de propósito

Dois vetores criados separadamente são vetores diferentes mesmo quando seus elementos correspondem. [1, 2] === [1, 2] é false; == também compara a identidade dos vetores. Para verificar se têm o mesmo conteúdo ordenado, compare os tamanhos e depois os valores em cada índice correspondente. Uma simples verificação sim/não de pertinência não estabeleceria a mesma ordem ou o mesmo número de repetições.

Una elementos em uma cadeia de caracteres

const dateParts = ["2026", "03", "15"];
console.log(dateParts.join("-")); // "2026-03-15"
console.log([1, 2, 3].join()); // "1,2,3"
console.log([1, 2, 3].join("")); // "123"

join coloca seu separador entre os elementos, nunca depois do último. Seu separador padrão é uma vírgula sem espaços. Elementos null e undefined contribuem com texto vazio. Escolha o separador explicitamente para uma saída legível.

Usar + com uma cadeia de caracteres também converte um vetor em texto, mas usa vírgulas: "List: " + [1, 2] torna-se “List: 1,2”. A estrutura aninhada se perde nesse texto: String([1, [2, 3]]) produz “1,2,3”. Registre o próprio vetor para inspecionar sua estrutura.

Divida o texto em partes

"red,green,blue".split(",") retorna ["red", "green", "blue"]. O separador deve corresponder exatamente. Dividir “red, green” apenas pela vírgula mantém o espaço no início de “ green”; dividir por “, ” remove a vírgula e esse espaço.

"4,8,15".split(",") retorna cadeias de caracteres, não números. Converta cada parte antes de somar valores numéricos. Caso contrário, o operador + pode unir texto em vez de calcular uma soma.

Para texto simples baseado em letras, "stressed".split("").reverse().join("") produz “desserts”. A divisão cria um novo vetor, a inversão altera esse vetor e a junção reconstrói uma cadeia de caracteres. Um separador vazio divide unidades de código UTF-16; alguns símbolos usam mais de uma unidade, então essa não é uma maneira geral de inverter todo texto legível por humanos.

Um laço pode visitar posições de um vetor ou obter os valores diretamente. Escolha a forma que expõe as informações necessárias ao corpo. Lembre-se de que os índices do vetor mudam ao inserir ou remover elementos.

Use índices para posições e direção

const fruits = ["apple", "pear", "plum"];
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

Os índices são 0, 1, 2. O teste é < fruits.length, pois o índice 3 está além do fim. Com <=, uma iteração extra leria undefined. Laços por índices também podem percorrer de trás para frente, começando em fruits.length - 1 e continuando enquanto i >= 0, ou visitar elementos de dois em dois com i += 2.

Use for...of para valores

for (const fruit of fruits) {
  console.log(fruit.toUpperCase());
}

Isso imprime “APPLE”, “PEAR” e “PLUM”. fruit contém um valor por iteração. const funciona porque cada iteração cria uma nova vinculação; o laço não reatribui um contador compartilhado. for...of também funciona em cadeias de caracteres. Um laço sobre “banana” pode contar vogais testando "aeiou".includes(ch) para cada ch.

Alterar um número local não escreve no vetor. Após for (let n of nums) { n = n * 2; }, os elementos numéricos de nums permanecem inalterados. Para alterá-los, atribua por nums[i] ou construa um novo vetor de números duplicados.

Obtenha valores e índices juntos

entries() fornece pares que contêm um índice e um valor. Os colchetes no cabeçalho do laço extraem cada par:

for (const [i, fruit] of fruits.entries()) {
  console.log((i + 1) + ". " + fruit);
}

A saída é “1. apple”, “2. pear”, “3. plum”. Os índices do vetor ainda começam em zero; i + 1 altera apenas a numeração exibida.

for...in visita nomes de propriedades. Em vetores, seus índices são cadeias de caracteres e ele pode incluir propriedades extras. Use as formas de laço para vetores acima para processar elementos.

Evite pular elementos deslocados

const nums = [2, 4, 5, 6];
for (let i = 0; i < nums.length; i++) {
  if (nums[i] % 2 === 0) nums.splice(i, 1);
}
// nums is [4, 5]

No índice 0, remover 2 desloca 4 para o índice 0. A atualização move i para 1, então 4 é pulado. O laço então encontra 5 e remove 6. O resultado ainda contém um número par.

Ao remover por índice, percorra de trás para frente a partir do fim. Remover um elemento desloca apenas posições já visitadas. Outra abordagem é construir um novo vetor com os valores a manter. Evite adicionar elementos ao mesmo vetor enquanto o teste de parada de um laço depender de seu tamanho; o limite pode continuar mudando.

Muitas tarefas com vetores usam os mesmos pequenos padrões de laços. Decida qual resultado você precisa, escolha seu valor inicial e atualize-o uma vez para cada elemento relevante. Um rastreamento mostra o que o resultado significa após cada etapa.

Acumule uma soma e conte correspondências

const temps = [18, 21, 19, 24];
let sum = 0;
let warm = 0;
for (const t of temps) {
  sum += t;
  if (t > 20) warm++;
}

sum soma cada temperatura; warm adiciona um apenas para uma temperatura acima de 20 °C. Eles acompanham quantidades diferentes. Um rastreamento torna essa distinção visível:

A média é sum / temps.length, produzindo 20,5 °C. Verifique o tamanho antes de dividir: um vetor vazio produz 0 / 0, que é NaN, e não uma média significativa.

Acompanhe o maior ou o menor valor

Para um vetor não vazio, inicialize o máximo com seu primeiro elemento. Depois, substitua-o apenas quando encontrar um valor maior:

const values = [-3, -7, -1, -5];
let max = values[0];
for (const n of values) {
  if (n > max) max = n;
}
// max is -1

Começar em zero manteria incorretamente o zero para uma lista só de valores negativos. Começar em -Infinity também funciona para um máximo, mas uma entrada vazia manteria esse valor inicial. Para um mínimo, inverta a comparação e escolha o primeiro elemento ou Infinity como valor inicial.

Encontre a primeira correspondência ou teste uma lista inteira

Uma busca armazena uma correspondência e sai com break. Com let firstWarm;, o laço pode atribuir firstWarm = t no primeiro t > 20 e interromper a busca. Ele encontra 21, sem verificar os elementos posteriores. Se nada corresponder, a variável permanece undefined.

Para um teste de “todos”, inicie um indicador em true e defina-o como false na primeira falha. Para um teste de “algum”, comece em false e defina-o como true no primeiro sucesso. Com notas de aprovação definidas como pelo menos 50, [72, 85, 49] falha no teste de aprovação de todos em 49. Uma lista vazia deixa o indicador inicial inalterado.

Construa valores alterados e compare vizinhos

const km = [1.5, 3, 0.25];
const meters = [];
for (const d of km) {
  meters.push(d * 1000);
}
// meters is [1500, 3000, 250]

O novo vetor começa vazio e recebe uma distância convertida por iteração. Coloque uma condição antes de push quando apenas alguns valores pertencerem ao resultado.

Para variações de um dia para o outro, comece no índice 1, pois o índice 0 não tem dia anterior:

const changes = [];
for (let i = 1; i < temps.length; i++) {
  changes.push(temps[i] - temps[i - 1]);
}
// changes is [3, -2, 5]

Há uma diferença a menos que o número de medições. Subtrair na ordem oposta inverteria todos os sinais. Os mesmos formatos de resultado aparecem nos métodos de vetor: map constrói valores transformados, filter mantém correspondências, find pesquisa, some e every testam, e reduce acumula. Um laço continua útil quando uma passagem precisa produzir vários resultados, como com sum e warm.

Uma função recebe entradas, executa código e pode retornar um resultado. Uma função de retorno é uma função passada a outra para que ela a chame. Métodos de vetor usam funções de retorno para descrever o trabalho para cada elemento.

Escreva uma função de seta curta

n => n * 2 recebe um parâmetro chamado n e retorna seu valor duplicado. A seta separa as entradas do corpo. Um único parâmetro pode dispensar parênteses. Zero ou vários parâmetros precisam deles: () => 0 e (a, b) => a - b.

const double = n => n * 2;
const doubled = [1, 2, 3].map(double);
// doubled is [2, 4, 6]

double nomeia a própria função. O método a chama com cada número. Escrever map(double()) chamaria a função imediatamente e passaria o resultado em vez da função. Com um teste nomeado como function isEven(n) { return n % 2 === 0; }, use filter(isEven) para deixar o método fornecer cada elemento.

Retorne de um corpo em bloco

Uma expressão após a seta é retornada automaticamente. Chaves criam um bloco, então um resultado precisa de um return explícito:

const double = n => {
  const doubled = n * 2;
  return doubled;
};

Sem return, a função retorna undefined. Portanto, [1, 2, 3].map(n => { n * 2; }) produz [undefined, undefined, undefined]. A multiplicação é executada, mas seu valor nunca se torna o resultado da função de retorno.

Leia os argumentos da função de retorno pela posição

Métodos como map, filter e forEach passam primeiro o elemento, depois seu índice a partir de zero e, em terceiro, o vetor inteiro. Em (name, i) => ..., os nomes são sua escolha; suas posições determinam o que recebem. Omita os parâmetros não usados a partir do fim. Outros métodos têm assinaturas diferentes: reduce também recebe um acumulador, e uma função de retorno de ordenação recebe dois valores para comparar.

Use forEach para ações

const letters = ["a", "b"];
const result = letters.forEach((letter, i) => {
  console.log(i + ": " + letter);
});
// Prints "0: a" and "1: b".
// result is undefined.

Imprimir é um efeito colateral: uma ação realizada enquanto a função de retorno executa. forEach descarta os valores de retorno da função e retorna undefined. Use map quando precisar de um novo vetor de resultados. Retornar um valor de uma função de retorno de forEach não muda essa regra.

Um return nessa função de retorno encerra apenas a chamada atual; o método continua para o próximo elemento. break não pode ser usado dentro de uma função de retorno para sair de forEach. Escolha for...of com break ou um método de busca como find ou some quando o trabalho posterior deve parar em uma correspondência.

Esses métodos que recebem funções de retorno não alteram, por si só, o vetor de origem. A função de retorno ainda pode alterá-lo, por exemplo, por atribuição de índice ou push. Manter as funções de retorno focadas no valor retornado ou na ação desejada facilita entender o que o vetor de origem conterá depois.

Escolha um método de vetor pelo formato do resultado. map produz um valor para cada elemento presente. filter mantém os elementos originais que passam em um teste. Ambos retornam novos vetores.

Transforme com map

const km = [1.5, 3, 0.25];
const meters = km.map(d => d * 1000);
// meters is [1500, 3000, 250]; km is unchanged.

O retorno da função torna-se o elemento na posição correspondente. Para uma entrada sem lacunas, há uma chamada da função de retorno por elemento, e o resultado tem o mesmo tamanho. Transformar elementos que são cadeias de caracteres também funciona: ["ana", "ben"].map(s => s.toUpperCase()) produz ["ANA", "BEN"].

O segundo parâmetro da função de retorno fornece o índice. ["Ana", "Ben"].map((name, i) => (i + 1) + ". " + name) constrói ["1. Ana", "2. Ben"]. Se a função de retorno tiver um corpo em bloco, retorne explicitamente o valor a armazenar.

Selecione com filter

const temps = [18, 21, 19, 24];
const warm = temps.filter(t => t > 20);
// warm is [21, 24]

filter mantém um elemento quando a função de retorno produz um resultado avaliado como verdadeiro. Ele mantém o próprio elemento, não o booleano da função de retorno. Os valores mantidos permanecem na ordem original. O resultado pode conter todos os elementos, alguns ou nenhum; temps.filter(t => t > 30) é [].

Não retorne o próprio elemento quando zero for um dado válido. [0, 5, 0, 3].filter(n => n) descarta ambos os zeros porque são avaliados como falsos. Uma condição como n !== null remove medições ausentes representadas por null e preserva o zero. Explicite a regra para manter um elemento.

Usar map com uma condição que retorna undefined para elementos rejeitados não os remove. Esses resultados undefined ainda ocupam posições no novo vetor.

Acompanhe uma cadeia da esquerda para a direita

[12, 7, 30, 4].filter(n => n >= 10).map(n => n / 2) cria primeiro [12, 30], depois [6, 15]. A segunda função de retorno recebe apenas os elementos mantidos. Filtrar antes de transformar é adequado quando o teste se refere aos valores originais. Alterar a ordem pode mudar o que o teste recebe.

Converta texto numérico de propósito

const numbers = "4,8,15".split(",").map(Number);
// numbers is [4, 8, 15]

Number recebe cada parte do texto e produz um número. Passar parseInt diretamente é uma armadilha: seu segundo argumento é uma base numérica, enquanto map fornece o índice nessa posição. ["10", "10", "10"].map(parseInt) produz [10, NaN, 2]. Use map(s => parseInt(s, 10)) para fixar a base ou map(Number) para essas cadeias numéricas inteiras.

Nem map nem filter substitui a origem. temps.map(t => t + 1); sozinho descarta o vetor recém-calculado. Salve-o, retorne-o de uma função ou use-o em uma cadeia.

Algumas perguntas precisam de um valor, outras de uma posição ou de uma resposta sim/não. Métodos de busca podem parar assim que essa resposta for conhecida. Escolher o tipo de retorno adequado facilita escrever corretamente as condições posteriores.

Escolha um valor ou um índice

const temps = [18, 21, 19, 24];
console.log(temps.find(t => t > 20)); // 21
console.log(temps.findIndex(t => t > 20)); // 1
console.log(temps.findLast(t => t > 20)); // 24
console.log(temps.findLastIndex(t => t > 20)); // 3

find pesquisa a partir do início e retorna o primeiro elemento correspondente. findIndex retorna seu índice. As formas com Last pesquisam de trás para frente. Os quatro param quando encontram a correspondência solicitada.

temps.find(t => t > 30) retorna undefined; temps.findIndex(t => t > 30) retorna -1. Antes de passar um índice encontrado para splice, verifique i !== -1. Caso contrário, splice(-1, 1) remove o último elemento mesmo que nenhuma correspondência tenha sido encontrada.

Preserve correspondências avaliadas como falsas

[3, 0, 5].find(n => n < 1) retorna 0, uma correspondência bem-sucedida. if (result) trata esse resultado incorretamente como falha porque zero é avaliado como falso. Para dados numéricos, result !== undefined distingue zero de ausência de correspondência. Se um vetor puder conter undefined como valor correspondente, use findIndex e compare o resultado com -1; o valor sozinho não distingue esses casos.

filter é adequado quando todas as correspondências são necessárias. [5, 12, 8, 130].filter(n => n > 10) produz [12, 130]; find retorna apenas 12. Usar filter(...)[0] calcula todo o vetor de correspondências antes de ler seu primeiro valor.

Teste algum ou todos

const scores = [72, 85, 49];
const anyFailed = scores.some(s => s < 50); // true
const allPassed = scores.every(s => s >= 50); // false

some para no primeiro sucesso. every para na primeira falha. Suas respostas são booleanos, não elementos. Nessas chamadas, o 49 faz some ter sucesso e every falhar.

Para um vetor vazio, some retorna false porque nada passa. every retorna true porque nada falha. Se um conjunto completo de resultados precisar conter pelo menos uma nota, combine os testes: scores.length > 0 && scores.every(s => s >= 50). A condição de tamanho trata o caso vazio; every verifica os elementos.

Escolha entre pertinência exata e teste personalizado

includes("ana") procura exatamente esse valor. Uma busca que não diferencia maiúsculas de minúsculas precisa de uma função de retorno: names.some(n => n.toLowerCase() === "ana"). Isso pode aceitar tanto “Ana” quanto “ANA”. Use includes para um valor conhecido e uma busca com função de retorno quando cada elemento precisar ser testado por uma regra.

reduce carrega um acumulador de um elemento para o seguinte. Sua função de retorno retorna o acumulador para a próxima etapa. Após o último elemento, o método retorna esse valor final.

Acompanhe uma soma

const temps = [18, 21, 19, 24];
const total = temps.reduce((sum, t) => sum + t, 0);
// total is 82

O 0 é o acumulador inicial. A função de retorno recebe sum primeiro e a temperatura atual t em segundo. A soma retornada torna-se o primeiro argumento da próxima chamada.

Essa é a mesma soma acumulada de um laço com let sum = 0. Uma função de retorno também tem argumentos opcionais de índice e vetor após o acumulador e o elemento. Os nomes dos parâmetros são flexíveis, mas sua ordem é fixa.

Forneça um valor inicial útil

Com um valor inicial, a redução começa no primeiro elemento. Sem ele, o primeiro elemento presente torna-se o acumulador e as chamadas da função de retorno começam no próximo elemento presente. Em um vetor vazio, omitir o valor inicial lança um TypeError. [].reduce((sum, n) => sum + n, 0) retorna 0 com segurança porque nenhuma chamada da função de retorno é necessária.

O valor inicial também estabelece o tipo de resultado. Use 0 para somas ou contagens e "" para texto. ["a", "b", "c"].reduce((text, s) => text + s.toUpperCase(), "") constrói “ABC”. Uma soma numérica que começa com uma cadeia de caracteres pode concatenar texto acidentalmente por meio de +.

Conte e encontre um extremo

const scores = [72, 85, 49];
const passed = scores.reduce(
  (count, s) => s >= 50 ? count + 1 : count,
  0
);
// passed is 2

Uma aprovação adiciona um; uma reprovação retorna a contagem inalterada. Cada ramo fornece um próximo acumulador. Para um máximo, retorne o maior valor: [-3, -7, -1, -5].reduce((max, n) => n > max ? n : max, -Infinity) produz -1. Começar em zero estaria errado para essa lista só de valores negativos. Uma entrada vazia deixa -Infinity, então trate esse resultado quando um máximo real for necessário.

Retorne em todos os caminhos

Uma função de retorno em bloco precisa de return. (sum, n) => { sum + n; } retorna undefined, então o resultado final da redução é undefined. Um retorno ausente em parte dos caminhos também é perigoso. Em uma contagem sobre [72, 49, 85], retornar apenas para uma aprovação produz primeiro 1, depois undefined em 49 e, em seguida, NaN ao adicionar um em 85. Retorne o acumulador inalterado quando um elemento não contribuir.

Combine operações sem ocultar a tarefa

A soma das notas de aprovação é scores.filter(s => s >= 50).reduce((sum, s) => sum + s, 0), que produz 157. Uma média precisa de uma contagem separada: temps.reduce((sum, t) => sum + t, 0) / temps.length produz 20,5 °C. Verifique o tamanho primeiro, pois uma entrada vazia produz NaN após a divisão. Se uma função de retorno começar a fazer várias tarefas não relacionadas, um laço for...of pode mostrar os resultados que mudam com mais clareza.

Ordenar escolhe uma ordem comparando elementos. Inverter simplesmente inverte a ordem existente. Ambas as operações têm métodos que alteram um vetor e métodos que criam uma cópia.

Entenda a ordem padrão

[10, 9, 1, 100].sort() produz [1, 10, 100, 9]. Sem uma função de comparação, sort compara os elementos como cadeias de caracteres, caractere por caractere, usando unidades de código UTF-16. “100” começa com “1”, que vem antes de “9”. Os elementos armazenados continuam sendo números; apenas a comparação usa sua forma de texto.

Para cadeias de caracteres, esse padrão também pode surpreender os leitores. ["banana", "Cherry", "apple"].sort() produz ["Cherry", "apple", "banana"], pois as letras ASCII maiúsculas vêm antes das minúsculas. Letras acentuadas podem ficar separadas das letras com as quais os leitores as agrupam. Use uma comparação que considere o idioma para a ordem alfabética usada pelas pessoas.

Retorne o sinal correto

Uma função de comparação recebe dois elementos, a e b. Um retorno negativo coloca a antes de b; um retorno positivo o coloca depois de b; zero os trata como iguais para a ordenação.

const nums = [10, 9, 1, 100];
nums.sort((a, b) => a - b);
// nums is [1, 9, 10, 100]

Comparar 10 com 9 produz o valor positivo 1, então 9 vem antes de 10. Para ordem numérica decrescente, use (a, b) => b - a. Retorne um número com um sinal significativo. (a, b) => a > b retorna apenas true ou false, que se tornam 1 ou 0; ele nunca indica que a deve vir antes de b. Esse comparador produz uma ordenação não confiável.

A ordenação é estável: elementos comparados como iguais mantêm sua ordem relativa original. ["kiwi", "fig", "pear", "plum"].sort((a, b) => a.length - b.length) produz ["fig", "kiwi", "pear", "plum"]. As três palavras de quatro letras mantêm sua ordem.

Escolha entre mutação e cópia

const sorted = scores.sort((a, b) => a - b); fornece um segundo nome para o mesmo vetor, agora ordenado. Ele não preserva a ordem anterior. Para um novo vetor ordenado, use scores.toSorted((a, b) => a - b) ou faça uma cópia por espalhamento antes de sort.

[3, 1, 2].toReversed() produz [2, 1, 3]. Essa é uma sequência invertida, não uma ordem numérica decrescente. Para colocar os maiores valores primeiro, use um comparador decrescente ou ordene em ordem crescente antes de inverter.

Verifique os tipos antes de ordenar texto numérico

Valores de split são cadeias de caracteres. ["10", "9", "100"].sort() produz ["10", "100", "9"]. A subtração em um comparador converte cadeias numéricas durante a comparação, mas deixa os elementos como cadeias. Converta primeiro com map(Number) quando os valores forem dados numéricos e depois use um comparador numérico. Isso também prepara os dados para adição posterior sem concatenação acidental de texto.

As pessoas esperam que a ordem do texto e a formatação dos números sigam as convenções de um idioma. Mantenha os valores em formatos fáceis de processar, escolha uma configuração regional explícita para comparar texto e formate a saída final para o leitor.

Compare texto com regras de configuração regional

a.localeCompare(b, locale) retorna um número negativo quando a vem antes de b, um número positivo quando vem depois e zero quando são comparados como iguais. Apenas o sinal é garantido, não um -1 ou 1 exato.

const names = ["Zoe", "Émile", "adam"];
const sorted = names.toSorted((a, b) => a.localeCompare(b, "en"));
// sorted is ["adam", "Émile", "Zoe"]

Uma configuração regional é uma etiqueta de idioma como “en”, “de” ou “sv”. O alemão coloca “ä” antes de “z”, enquanto o sueco o coloca depois de “z”. Passe o idioma pretendido da página para tornar essa escolha explícita. Sem uma configuração regional, as configurações padrão do ambiente de execução decidem a ordem.

Comparações simples com < ainda comparam códigos de caracteres. Subtrair palavras produz NaN, que age como uma comparação de igualdade na ordenação; isso não cria ordem alfabética.

Defina opções úteis de comparação

Com { numeric: true }, sequências de algarismos são comparadas numericamente. Ordenar ["file10", "file2", "file1"] com (a, b) => a.localeCompare(b, "en", { numeric: true }) produz ["file1", "file2", "file10"]. Uma ordenação simples de texto coloca “file10” antes de “file2”.

Em inglês, { sensitivity: "base" } trata variantes de maiúsculas, minúsculas e acentos como “a”, “A” e “á” como iguais. Essas regras dependem do idioma: o sueco trata “a” e “ä” como letras de base diferentes. Use a configuração regional pretendida tanto para comparar correspondências quanto para ordenar.

Para muitas comparações, reutilize um comparador de texto:

const collator = new Intl.Collator("en", { numeric: true });
const sorted = files.toSorted(collator.compare);

collator.compare já é uma função de comparação. Criá-la uma vez evita configurar repetidamente as mesmas opções regionais durante uma ordenação grande.

Ordene datas antes de formatá-las

Cadeias YYYY-MM-DD de largura fixa colocam o ano antes do mês e do dia. A ordenação de texto segue então a ordem das datas: ["2026-03-15", "2025-11-02", "2026-01-20"].sort() produz ["2025-11-02", "2026-01-20", "2026-03-15"].

Textos com o dia primeiro, como “15/03/2026” e “20/01/2025”, comparam o dia primeiro, então podem colocar o ano posterior primeiro. Armazene e ordene essas datas no formato ISO e produza o texto de exibição ao final.

Construa listas e números legíveis

join(", ") usa o mesmo separador em todas as posições. Intl.ListFormat adiciona o conector final do idioma:

const list = new Intl.ListFormat("en-US", {
  style: "long", type: "conjunction"
});
list.format(["Ana", "Ben", "Cleo"]);
// "Ana, Ben, and Cleo"

“en-GB” produz “Ana, Ben and Cleo”; “nl” produz “Ana, Ben en Cleo”. Uma disjunção usa “or” em inglês. Dois nomes produzem “Ana and Ben” sem vírgula.

(1234.5).toLocaleString("en-US") produz “1,234.5”, enquanto “de-DE” produz “1.234,5”. Esses resultados são cadeias de caracteres. Ordene os dados numéricos antes de aplicar toLocaleString com map; formatar primeiro substitui valores numéricos por texto cuja pontuação afeta a ordenação textual.

Uma variável de vetor contém uma referência a um vetor. Atribuir essa variável a outro nome compartilha o vetor. A sintaxe de espalhamento pode criar um novo vetor externo, combinar listas ou passar elementos como argumentos separados para uma função.

Distinga atribuição de cópia

const a = [1, 2, 3];
const b = a;
b.push(4);
// a and b both refer to [1, 2, 3, 4].
console.log(a === b); // true

Há um vetor com dois nomes. const não impede que qualquer um dos nomes seja usado para alterá-lo. Um novo vetor externo exige uma operação de cópia:

const c = [...a];
c.push(5);
// c is [1, 2, 3, 4, 5]; a stays [1, 2, 3, 4].
console.log(c === a); // false

Os três pontos distribuem os elementos de a dentro de um novo literal de vetor. Omiti-los tem um efeito diferente: [a] cria um vetor de um elemento cujo elemento é o vetor a inteiro. [...a] contém os elementos de a individualmente.

Combine e insira

[...[1, 2], ...[3, 4]] produz [1, 2, 3, 4], assim como [1, 2].concat([3, 4]). [...first, 99, ...second] coloca um elemento extra entre duas listas. [...list, "new"] cria um vetor ampliado, enquanto list.push("new") altera o existente. O espalhamento preserva a ordem dos elementos de cada entrada.

Reconheça uma cópia superficial

const grid = [[1, 2], [3, 4]];
const copy = [...grid];
copy[0].push(9);
// grid[0] and copy[0] are both [1, 2, 9].

Os vetores externos são diferentes, mas seus elementos de linha ainda apontam para os mesmos vetores internos. Isso é uma cópia superficial. Substituir copy[0] por uma nova linha alteraria apenas o vetor externo copiado; alterar a linha existente modifica a linha compartilhada. structuredClone(grid) cria uma cópia profunda independente desses vetores aninhados.

Espalhe valores em uma chamada

Math.max(...[3, 9, 4]) fornece três argumentos separados e retorna 9. Passar o vetor diretamente, Math.max([3, 9, 4]), fornece um vetor e produz NaN. Um espalhamento vazio produz Math.max(...[]) === -Infinity e Math.min(...[]) === Infinity.

Vetores muito grandes podem exceder o limite de argumentos de um motor quando espalhados em uma chamada. Não há uma quantidade segura universal de elementos. Use um laço ou reduce para encontrar um extremo em uma entrada grande. O espalhamento em um literal de vetor não cria uma lista de argumentos de função.

Espalhe cadeias de caracteres e atualize cópias

[..."hello"] produz cinco cadeias de letras. O espalhamento de cadeias de caracteres visita pontos de código Unicode: [..."a😀"] tem dois elementos, enquanto "a😀".split("") tem três unidades de código UTF-16. Alguns símbolos visíveis combinam vários pontos de código, então o espalhamento não é uma contagem geral de caracteres visíveis. Um número não é iterável; [...5] lança um TypeError.

Em uma lista de parâmetros, function total(...nums) usa rest para reunir argumentos em um vetor. O espalhamento em uma chamada faz o oposto: fornece argumentos separados.

Para atualizações baseadas em cópias, [10, 20, 30].with(1, 25) produz [10, 25, 30] e .toSpliced(1, 1) produz [10, 30]. toSorted e toReversed também preservam a origem. Essas são cópias superficiais, então a mesma regra de compartilhamento dos vetores internos se aplica.