Arrays são estruturas de dados fundamentais em JavaScript, permitindo armazenar coleções ordenadas de valores. Diferente de variáveis comuns, que guardam um único valor, um array pode conter múltiplos elementos, de qualquer tipo (números, strings, objetos, até outros arrays). Nesta aula, você aprenderá como criar arrays, acessar seus elementos via índices, obter o tamanho e realizar operações básicas de mutação.

Entender arrays é essencial para manipular listas de dados, como itens de um carrinho de compras, resultados de uma API ou qualquer conjunto de informações que precise ser percorrido ou modificado. Vamos começar!

Criação

Em JavaScript, existem duas formas principais de criar um array: usando a sintaxe literal (colchetes) ou o construtor Array. A forma literal é a mais comum e recomendada por ser mais concisa e legível.

Exemplo de criação literal:

let frutas = ['maçã', 'banana', 'laranja'];

Usando o construtor:

let numeros = new Array(1, 2, 3); // [1, 2, 3]

Uma diferença importante: se você passar um único número inteiro ao construtor, ele cria um array com esse número de posições vazias (não elementos undefined):

let arr = new Array(5); // array com 5 slots vazios, não [5]

Portanto, prefira sempre a notação literal para evitar ambiguidades.

Índices

Os elementos de um array são acessados por índices numéricos, que começam em 0. O primeiro elemento está no índice 0, o segundo no índice 1, e assim por diante. Para acessar um elemento, use colchetes após o nome do array com o índice desejado.

Exemplo:

let frutas = ['maçã', 'banana', 'laranja'];
console.log(frutas[0]); // 'maçã'
console.log(frutas[1]); // 'banana'
console.log(frutas[2]); // 'laranja'

Se você tentar acessar um índice que não existe, o retorno será undefined:

console.log(frutas[10]); // undefined

Índices também podem ser usados para modificar elementos:

frutas[1] = 'uva';
console.log(frutas); // ['maçã', 'uva', 'laranja']

Tamanho

A propriedade length retorna o número de elementos do array. Ela é automaticamente atualizada quando você adiciona ou remove elementos.

Exemplo:

let frutas = ['maçã', 'banana', 'laranja'];
console.log(frutas.length); // 3

Você também pode usar length para truncar um array (atribuindo um valor menor) ou para criar um array vazio (atribuindo 0):

frutas.length = 2;
console.log(frutas); // ['maçã', 'banana']

frutas.length = 0;
console.log(frutas); // []

Curiosidade: length não é apenas o número de elementos atuais; o último índice válido é length - 1. Se você atribuir um elemento em um índice maior que o length atual, o array será expandido e os índices intermediários ficarão vazios:

let arr = ['a', 'b'];
arr[5] = 'c';
console.log(arr.length); // 6
console.log(arr); // ['a', 'b', empty x3, 'c']

Mutação básica

Mutação significa modificar o array original. Os métodos mais comuns para adicionar ou remover elementos são push, pop, shift e unshift.

  • push(elemento): adiciona um ou mais elementos ao final do array e retorna o novo length.
  • pop(): remove o último elemento do array e retorna o elemento removido.
  • unshift(elemento): adiciona um ou mais elementos ao início do array e retorna o novo length.
  • shift(): remove o primeiro elemento do array e retorna o elemento removido.

Exemplos:

let numeros = [1, 2, 3];

// Adicionar ao final
numeros.push(4);
console.log(numeros); // [1, 2, 3, 4]

// Remover do final
let ultimo = numeros.pop();
console.log(ultimo); // 4
console.log(numeros); // [1, 2, 3]

// Adicionar ao início
numeros.unshift(0);
console.log(numeros); // [0, 1, 2, 3]

// Remover do início
let primeiro = numeros.shift();
console.log(primeiro); // 0
console.log(numeros); // [1, 2, 3]

Esses métodos alteram o array original. Existem também métodos que não mutam, como concat e slice, que veremos em aulas futuras.

Boas práticas

  • Prefira a notação literal [] ao invés de new Array().
  • Evite acessar índices fora do intervalo; sempre verifique o length antes.
  • Lembre-se de que arrays são objetos; a mutação afeta todas as referências ao mesmo array.
  • Use const para declarar arrays que não serão reatribuídos (a mutação ainda é permitida).

Referências

Exercícios

  1. Crie um array chamado cores com as cores 'vermelho', 'azul' e 'verde'. Em seguida, exiba no console o segundo elemento do array.

    ✓ Resposta:
    let cores = ['vermelho', 'azul', 'verde'];
console.log(cores[1]); // 'azul'

  2. Dado o array let numeros = [10, 20, 30, 40];, use a propriedade length para exibir o último elemento sem saber o índice exato.

    ✓ Resposta:
    let numeros = [10, 20, 30, 40];
console.log(numeros[numeros.length - 1]); // 40

  3. Adicione o número 5 ao final do array let lista = [1, 2, 3]; usando o método apropriado e exiba o array.

    ✓ Resposta:
    let lista = [1, 2, 3];
lista.push(5);
console.log(lista); // [1, 2, 3, 5]

  4. Remova o primeiro elemento do array let frutas = ['maçã', 'banana', 'laranja']; e exiba o elemento removido e o array resultante.

    ✓ Resposta:
    let frutas = ['maçã', 'banana', 'laranja'];
let removido = frutas.shift();
console.log(removido); // 'maçã'
console.log(frutas); // ['banana', 'laranja']

  5. Utilizando unshift, adicione o valor 0 no início do array let valores = [2, 3, 4]; e depois exiba o array e seu tamanho.

    ✓ Resposta:
    let valores = [2, 3, 4];
valores.unshift(0);
console.log(valores); // [0, 2, 3, 4]
console.log(valores.length); // 4