O guia básico sobre Arrays no Javascript

O que são arrays no JavaScript

Um array é uma estrutura que armazena uma lista de valores em uma única variável. Em outras palavras, em vez de criar uma variável para cada cor de um formulário, você guarda todas as cores em um só lugar.

Segundo a documentação da MDN sobre Array, o Array é um objeto global usado na construção de arrays, que são objetos de alto nível semelhantes a listas. Por isso, os arrays no JavaScript já vêm com propriedades e métodos prontos para uso.

Um array pode guardar um único valor ou vários. Além disso, ele aceita números, textos, booleanos e até tipos complexos, como objetos e outros arrays.

Diferentemente de linguagens como C#, o JavaScript não fixa o tamanho nem o tipo dos elementos. Assim, a lista cresce conforme você adiciona itens e pode misturar tipos diferentes.

Se você está começando agora, vale ler antes o artigo sobre o que é JavaScript, que apresenta a linguagem desde o início.

Como declarar arrays no JavaScript

A forma mais comum de declarar arrays no JavaScript é a sintaxe literal, com colchetes. Veja um array de cores:

// Array literal com três textos
let colors = ["red", "green", "yellow"];

Nesse exemplo, colors é uma lista de cores. Repare que os colchetes marcam onde a lista começa e onde termina, enquanto as vírgulas separam cada elemento.

O que muda de um array para outro é o tipo de dado armazenado. Por exemplo, você pode criar listas de números, de booleanos ou de objetos com a mesma sintaxe:

// Arrays com tipos diferentes de dados
let numbers = [10, 20, 30];
let flags = [true, false, true];
let users = [
  { name: "Ana", age: 28 },
  { name: "Bruno", age: 35 }
];

// Array vazio, pronto para receber itens
let emptyList = [];

Também existe o construtor Array, mas ele tem um comportamento que confunde iniciantes. Quando você passa um único número, o construtor cria um array vazio com aquele tamanho, e não um array com aquele número:

// Cria um array com três posições vazias
let slots = new Array(3);
console.log(slots.length); // 3

// Cria um array com os valores informados
let values = new Array(3, 5, 7);
console.log(values); // [3, 5, 7]

Por isso, a sintaxe literal com colchetes é a escolha mais segura e legível na maioria dos casos.

Índices e o conceito zero-indexed

Cada item de um array tem um índice, também chamado de index. Esse índice nada mais é do que a posição do elemento dentro da lista.

Como o array é uma lista ordenada, cada item precisa ter uma posição bem definida. Além disso, os arrays no JavaScript seguem o conceito zero-indexed, ou seja, a contagem começa em zero.

Na prática, o primeiro elemento fica na posição 0, o segundo na posição 1, e assim por diante. Consequentemente, o último elemento fica sempre na posição igual ao length menos um.

Esse detalhe causa muitos erros no começo, porque a intuição manda contar a partir de um. Portanto, sempre que acessar uma posição, lembre que o índice do primeiro item é zero.

Como acessar elementos de arrays no JavaScript

Para acessar um elemento, você usa o nome do array seguido de colchetes com o índice desejado. Assim, o código abaixo busca exatamente a cor verde:

let colors = ["red", "green", "yellow"];

// Acessa a posição 1, que guarda "green"
let green = colors[1];
console.log(green); // "green"

Sempre que precisar de um valor, informe o número do índice entre colchetes. Por exemplo, colors[0] devolve "red" e colors[2] devolve "yellow".

Quando você tenta acessar uma posição que não existe, os arrays no JavaScript não lançam erro. Em vez disso, o resultado é undefined, o que pode esconder bugs se você não prestar atenção:

// Não existe posição 10 nesse array
console.log(colors[10]); // undefined

Para pegar o último elemento, combine o índice com a propriedade length. Outra opção é o método at(), padronizado no ES2022, que aceita índices negativos e conta a partir do fim:

// Duas formas de obter o último elemento
console.log(colors[colors.length - 1]); // "yellow"
console.log(colors.at(-1)); // "yellow"

Como modificar elementos de um array

Para modificar uma informação, você continua usando o índice da posição que deseja alterar. Então, basta atribuir um novo valor àquela posição:

let colors = ["red", "green", "yellow"];

// Substitui o valor da posição 1
colors[1] = "pink";
console.log(colors); // ["red", "pink", "yellow"]

Dessa forma, você altera diretamente a posição 1 do array. O mesmo raciocínio vale para qualquer posição, da primeira até a última.

Um cuidado importante: se você atribuir um valor a um índice maior que o tamanho atual, o array cresce automaticamente. No entanto, as posições intermediárias ficam vazias, o que costuma gerar resultados inesperados:

let colors = ["red", "green", "yellow"];

// Pula as posições 3 e 4
colors[5] = "blue";
console.log(colors.length); // 6
console.log(colors[4]); // undefined

Por isso, para adicionar itens ao fim da lista, prefira o método push(), que você verá adiante.

A propriedade length

A propriedade length informa quantos elementos o array tem. Além disso, o próprio motor do JavaScript atualiza esse valor sempre que a lista cresce.

let colors = ["red", "green", "yellow"];
console.log(colors.length); // 3

O length também aceita atribuição. Assim, se você definir um valor menor que o atual, o array perde os elementos excedentes:

// Mantém apenas os dois primeiros itens
colors.length = 2;
console.log(colors); // ["red", "green"]

Esse recurso funciona, mas reduz a clareza do código. Portanto, use-o com moderação e prefira métodos com nomes explícitos sempre que possível.

Arrays no JavaScript com let e const

Uma prática comum é guardar arrays no JavaScript em variáveis declaradas com let ou const. Veja o exemplo com const:

const capitals = ["Brasilia", "Paris", "London", "Bogota"];

// Altera o conteúdo da posição 1
capitals[1] = "Lisbon";
console.log(capitals); // ["Brasilia", "Lisbon", "London", "Bogota"]

Repare que o código altera um elemento mesmo com const. Isso acontece porque o const cria uma referência somente leitura, e não um valor imutável, como explica a documentação da MDN sobre const.

Em outras palavras, você pode mudar o conteúdo do array, mas não pode apontar a variável para outro array. A tentativa de reatribuição gera um TypeError:

const capitals = ["Brasilia", "Paris"];

// Funciona: altera o conteúdo
capitals.push("London");

// Falha: tenta trocar a referência
capitals = ["Tokyo"]; // TypeError: Assignment to constant variable.

O mesmo exemplo funciona com let, que também declara variáveis com escopo de bloco. A diferença é que let permite reatribuir a variável a um novo array:

let capitals = ["Brasilia", "Paris", "London", "Bogota"];
capitals[1] = "Lisbon";

// Com let, a reatribuição é permitida
capitals = ["Tokyo", "Seoul"];
console.log(capitals); // ["Tokyo", "Seoul"]

Como regra geral, comece com const e troque para let apenas quando precisar reatribuir a variável. Para entender melhor escopo e declaração, consulte o artigo sobre variáveis no JavaScript.

Se você precisa de um array que não aceite alterações, o método Object.freeze() bloqueia mudanças no conteúdo. Ainda assim, esse congelamento é raso e não alcança objetos aninhados.

Adicionar e remover elementos

Os arrays no JavaScript oferecem quatro métodos básicos para adicionar e remover itens nas pontas da lista. Todos eles alteram o array original:

• push() adiciona um ou mais elementos no fim;
• pop() remove e devolve o último elemento;
• unshift() adiciona um ou mais elementos no início;
• shift() remove e devolve o primeiro elemento.

const colors = ["red", "green"];

colors.push("yellow"); // ["red", "green", "yellow"]
colors.unshift("black"); // ["black", "red", "green", "yellow"]

const last = colors.pop(); // "yellow"
const first = colors.shift(); // "black"

console.log(colors); // ["red", "green"]

Para inserir ou remover itens no meio da lista, existe o método splice(). Por exemplo, colors.splice(1, 1) remove um elemento a partir da posição 1.

Buscar elementos em uma lista

Muitas vezes você precisa saber se um valor existe ou em qual posição ele está. Para isso, os métodos indexOf() e includes() resolvem os casos mais simples:

const colors = ["red", "green", "yellow"];

// Retorna a posição do elemento ou -1 se não existir
console.log(colors.indexOf("green")); // 1
console.log(colors.indexOf("blue")); // -1

// Retorna true ou false
console.log(colors.includes("yellow")); // true

O includes() deixa a intenção mais clara quando você só quer uma resposta de sim ou não. Já o indexOf() ajuda quando você precisa da posição para modificar ou remover o elemento.

Esses dois métodos comparam valores de forma estrita, então funcionam bem com textos, números e booleanos. No entanto, eles não servem para encontrar um objeto pelo valor de uma propriedade, como um usuário com determinado nome.

Para esse cenário, use o método find(), que recebe uma função de teste e devolve o primeiro elemento que atende à condição:

const users = [
  { name: "Ana", age: 28 },
  { name: "Bruno", age: 35 }
];

// Retorna o primeiro usuário com mais de 30 anos
const user = users.find((item) => item.age > 30);
console.log(user.name); // "Bruno"

Quando nenhum elemento passa no teste, o find() retorna undefined. Da mesma forma, o método findIndex() devolve a posição do elemento encontrado ou -1 quando não há correspondência.

Como percorrer arrays no JavaScript

Percorrer arrays no JavaScript significa visitar cada elemento para ler ou processar seu valor. A forma clássica usa o laço for com o índice:

const colors = ["red", "green", "yellow"];

// Laço clássico com índice
for (let i = 0; i < colors.length; i++) {
  console.log(i, colors[i]);
}

Quando você não precisa do índice, o laço for...of deixa o código mais limpo. Da mesma forma, o método forEach() executa uma função para cada elemento:

// Percorre apenas os valores
for (const color of colors) {
  console.log(color);
}

// Executa uma função para cada elemento
colors.forEach((color, index) => {
  console.log(index, color);
});

Depois de dominar o básico, vale estudar map(), filter() e reduce(), que transformam listas sem alterar o array original. Como esses métodos recebem funções, o artigo sobre funções no JavaScript ajuda bastante nessa etapa.

Como verificar se uma variável é um array

O operador typeof não diferencia arrays de objetos comuns, porque ambos retornam "object". Por isso, a forma correta de verificar é usar Array.isArray():

const colors = ["red", "green"];
const user = { name: "Ana" };

console.log(typeof colors); // "object"
console.log(Array.isArray(colors)); // true
console.log(Array.isArray(user)); // false

Essa verificação evita erros quando uma função pode receber tanto um valor único quanto uma lista. Assim, você trata cada caso de forma explícita.

Arrays no JavaScript não são tipados

Como o JavaScript é uma linguagem de tipagem dinâmica, os arrays no JavaScript não exigem que todos os elementos tenham o mesmo tipo. Portanto, a lista abaixo é válida:

// Mistura de tipos em um único array
const mixed = [42, "text", true, { id: 1 }, [1, 2]];

Embora seja possível, misturar tipos dificulta a leitura e a manutenção do código. Na prática, mantenha cada array com um único tipo de dado, como uma lista de nomes ou uma lista de produtos.

Se você precisa de garantia de tipo, o TypeScript permite declarar arrays tipados, como string[]. Por outro lado, para dados binários de alto desempenho, o JavaScript oferece os typed arrays, como Int32Array.

Arrays de objetos no JavaScript

No dia a dia, os arrays no JavaScript raramente guardam apenas textos soltos. Na maioria das aplicações, cada item da lista é um objeto com várias propriedades, como um usuário com nome e idade.

const users = [
  { name: "Ana", age: 28 },
  { name: "Bruno", age: 35 }
];

// Acessa o objeto da posição 0 e depois a propriedade name
console.log(users[0].name); // "Ana"

// Altera uma propriedade do segundo usuário
users[1].age = 36;

Repare que o acesso acontece em duas etapas. Primeiro, o índice escolhe o objeto dentro da lista e, em seguida, o ponto acessa a propriedade desejada.

Esse formato aparece o tempo todo quando uma aplicação recebe dados de uma API. Afinal, respostas em JSON costumam trazer listas de objetos, e o JavaScript converte essas listas em arrays.

Um array também pode guardar outros arrays, formando uma matriz. Nesse caso, você usa dois pares de colchetes, como grid[0][1], para acessar a linha e depois a coluna.

Se você também programa em C#, o artigo sobre arrays monodimensionais e multidimensionais no C# mostra como a mesma ideia funciona em uma linguagem de tipagem estática.

Cópia e referência em arrays

Um ponto que surpreende muitos iniciantes é que atribuir um array a outra variável não cria uma cópia. Na verdade, as duas variáveis passam a apontar para a mesma lista na memória.

const original = ["red", "green"];
const sameList = original;

// Altera a lista pelas duas variáveis
sameList.push("yellow");
console.log(original); // ["red", "green", "yellow"]

Por isso, quando você precisa de uma lista independente, use o spread operator ou o método slice(). Ambos criam um novo array com os mesmos elementos:

const original = ["red", "green"];

// Duas formas de criar uma cópia
const copyWithSpread = [...original];
const copyWithSlice = original.slice();

copyWithSpread.push("blue");
console.log(original); // ["red", "green"]

No entanto, essas cópias são rasas. Se o array guardar objetos, a cópia continua apontando para os mesmos objetos, então alterar uma propriedade afeta as duas listas.

Erros comuns com arrays no JavaScript

Alguns erros aparecem com frequência em quem está aprendendo arrays no JavaScript. Conhecer cada um deles ajuda a economizar horas de depuração.

O primeiro é esquecer que o índice começa em zero e tentar acessar colors[3] em uma lista de três itens. Nesse caso, o resultado é undefined, e o erro só aparece mais adiante no código.

O segundo é usar <= no laço for, como i <= colors.length. Com isso, o laço executa uma volta a mais e lê uma posição que não existe.

O terceiro é achar que const torna o array imutável. Como você viu, o const só protege a referência, e o conteúdo continua alterável.

Por fim, muitos iniciantes comparam arrays com === esperando comparar o conteúdo. Porém, essa comparação verifica se as duas variáveis apontam para a mesma lista, então [1, 2] === [1, 2] resulta em false.

Boas práticas para trabalhar com arrays

Alguns hábitos simples evitam a maior parte dos problemas com listas no dia a dia. Primeiro, prefira a sintaxe literal [] ao construtor new Array().

Em seguida, declare seus arrays com const e use let apenas quando houver reatribuição. Além disso, use push() em vez de atribuir valores a índices fora do tamanho atual.

Também vale escolher nomes no plural, como colors ou users, porque eles deixam claro que a variável guarda uma lista. Por fim, use Array.isArray() sempre que precisar confirmar que um valor é um array.

Conclusão sobre arrays no JavaScript

Arrays no JavaScript aparecem em praticamente todo projeto, de um formulário simples a uma aplicação completa. Com eles, você cria listas de dados e acessa qualquer item a qualquer momento pelo índice.

Neste guia, você viu como declarar, acessar e modificar elementos, além de entender o comportamento de let e const. Também conheceu os métodos essenciais para adicionar, remover, buscar e percorrer itens.

Este foi um guia básico para quem nunca trabalhou com arrays. Agora, o próximo passo é praticar com listas reais e explorar os métodos de transformação, como map() e filter().

Além disso, lembre que a documentação da MDN traz a referência completa de cada método, com exemplos e notas de compatibilidade entre navegadores.

Se quiser continuar estudando a linguagem, o curso gratuito de JavaScript é um bom ponto de partida.

FAQ

Qual é o índice do primeiro elemento de um array?

O índice do primeiro elemento é zero. Por isso, em um array com três itens, as posições válidas são 0, 1 e 2.

Posso alterar um array declarado com const?

Sim. O const impede apenas a reatribuição da variável, então você pode alterar, adicionar ou remover elementos normalmente.

O que acontece ao acessar um índice que não existe?

O JavaScript retorna undefined e não lança erro. Por isso, vale validar o índice ou usar o length antes de acessar a posição.

Como saber quantos itens um array tem?

Use a propriedade length, que o próprio JavaScript atualiza sempre que a lista cresce ou diminui.

Um array pode guardar tipos diferentes?

Pode, porque o JavaScript tem tipagem dinâmica. Ainda assim, manter um único tipo por array deixa o código mais claro.