Arrays são estruturas de dados fundamentais em JavaScript, usadas para armazenar coleções ordenadas de valores. Eles podem conter elementos de qualquer tipo, incluindo números, strings, objetos e até outros arrays. Nesta aula, vamos explorar como criar arrays, acessar elementos por índices, obter o tamanho e realizar mutações básicas.

Entender arrays é essencial para manipular listas de dados em aplicações web, desde simples listas de tarefas até coleções complexas de objetos. Vamos começar com o básico e avançar gradualmente.

Criação

Existem várias formas de criar um array em JavaScript. A mais comum é usando a notação literal com colchetes []. Também é possível usar o construtor new Array(), embora seja menos recomendado por questões de clareza e desempenho.

Exemplos de criação:

// Array literal (mais comum)
let frutas = ['maçã', 'banana', 'laranja'];

// Array vazio
let vazio = [];

// Usando o construtor (menos comum)
let numeros = new Array(1, 2, 3); // [1, 2, 3]

// Cuidado: new Array(5) cria um array com 5 posições vazias, não [5]
let cincoVazios = new Array(5); // [empty × 5]

Você pode criar arrays com elementos de tipos diferentes, pois JavaScript é dinamicamente tipado:

let misto = ['texto', 42, true, { nome: 'João' }, [1, 2]];

Índices

Cada elemento em um array possui um índice numérico, começando em 0 para o primeiro elemento. Os índices são usados para acessar ou modificar elementos específicos.

Exemplo de acesso:

let cores = ['vermelho', 'verde', 'azul'];
console.log(cores[0]); // 'vermelho'
console.log(cores[2]); // 'azul'
console.log(cores[3]); // undefined (índice inexistente)

Você pode modificar um elemento atribuindo um novo valor a um índice existente:

cores[1] = 'amarelo';
console.log(cores); // ['vermelho', 'amarelo', 'azul']

Índices negativos não são suportados nativamente; retornam undefined. Para acessar do final, use array.length - 1.

Tamanho

A propriedade length retorna o número de elementos do array. Ela é atualizada automaticamente quando adicionamos ou removemos elementos.

let letras = ['a', 'b', 'c'];
console.log(letras.length); // 3

// Adicionar um elemento aumenta o length
letras.push('d');
console.log(letras.length); // 4

// Remover um elemento diminui o length
letras.pop();
console.log(letras.length); // 3

Você também pode definir length manualmente para truncar o array:

let arr = [1, 2, 3, 4, 5];
arr.length = 3;
console.log(arr); // [1, 2, 3]

Se você definir um length maior que o número de elementos, serão criadas posições vazias (empty slots), que são diferentes de undefined.

Mutação básica

Mutação refere-se a alterar o conteúdo do array após sua criação. Os métodos mais comuns para mutação são push, pop, shift, unshift e splice.

  • push(elemento): adiciona um ou mais elementos ao final do array e retorna o novo comprimento.
  • pop(): remove o último elemento e o retorna.
  • shift(): remove o primeiro elemento e o retorna, deslocando os demais.
  • unshift(elemento): adiciona um ou mais elementos no início, deslocando os existentes.
  • splice(início, quantidade, novosElementos...): altera o conteúdo removendo, substituindo ou adicionando elementos.

Exemplos:

let numeros = [1, 2, 3];

// push
numeros.push(4); // [1, 2, 3, 4]

// pop
let ultimo = numeros.pop(); // 4, array: [1, 2, 3]

// shift
let primeiro = numeros.shift(); // 1, array: [2, 3]

// unshift
numeros.unshift(0); // [0, 2, 3]

// splice (remover 1 elemento a partir do índice 1)
numeros.splice(1, 1); // remove 2, array: [0, 3]

// splice (adicionar sem remover)
numeros.splice(1, 0, 1); // insere 1 no índice 1, array: [0, 1, 3]

É importante notar que esses métodos modificam o array original. Se você quiser evitar mutação, use métodos imutáveis como concat, slice ou operador spread.

Boas práticas

  • Prefira a notação literal [] ao invés de new Array().
  • Evite modificar o array enquanto itera sobre ele (pode causar comportamentos inesperados).
  • Use const para declarar arrays que não serão reatribuídos, mas lembre-se que o conteúdo ainda pode ser modificado.
  • Para cópias, use [...array] ou array.slice() para evitar mutações indesejadas.

Referências

Exercícios

  1. Crie um array chamado numeros com os valores 10, 20 e 30. Em seguida, acesse e exiba o segundo elemento.

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

  2. Declare um array vazio frutas e adicione 'maçã', 'banana' e 'laranja' usando push. Depois, remova o último elemento com pop e exiba o array.

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

  3. Crie um array letras com 'a', 'b', 'c', 'd', 'e'. Use shift para remover o primeiro elemento e unshift para adicionar 'z' no início. Qual o tamanho final do array?

    ✓ Resposta:
    let letras = ['a', 'b', 'c', 'd', 'e'];
letras.shift(); // remove 'a'
letras.unshift('z'); // adiciona 'z' no início
console.log(letras.length); // 5
console.log(letras); // ['z', 'b', 'c', 'd', 'e']

  4. Dado o array nums = [1, 2, 3, 4, 5], use splice para remover os números 2 e 3 (índices 1 e 2) e inserir 6 e 7 no lugar. Exiba o array resultante.

    ✓ Resposta:
    let nums = [1, 2, 3, 4, 5];
nums.splice(1, 2, 6, 7);
console.log(nums); // [1, 6, 7, 4, 5]

  5. Crie um array pares com os números 2, 4, 6, 8, 10. Altere manualmente a propriedade length para 3 e depois para 6. O que acontece? Exiba o array após cada alteração.

    ✓ Resposta:
    let pares = [2, 4, 6, 8, 10];
pares.length = 3;
console.log(pares); // [2, 4, 6]

pares.length = 6;
console.log(pares); // [2, 4, 6, empty × 3]
// As posições vazias são diferentes de undefined, mas ao acessá-las retorna undefined.