Arrays

Uma variável que guarda uma lista inteira de valores, em ordem. É o primeiro passo para lidar com muitos dados de uma vez, de notas de prova a carrinhos de compra.

Estudar esta lição interativa →

Até aqui, cada variável nossa guardava um valor: um nome, um preço, uma idade. Mas os programas de verdade quase nunca lidam com um dado só. Um carrinho tem vários produtos, uma turma tem dezenas de notas, uma playlist tem centenas de músicas. Tentar resolver isso com uma variável para cada item (nota1, nota2, nota3...) desmorona rápido: você não sabe quantos itens virão, não consegue percorrê-los com um loop e adicionar um item novo significa mexer no código. A solução é o array: uma única variável que guarda uma lista de valores em ordem.

Você já espiou um array na lição do for...of; agora ele ganha o tratamento completo. Para criar um, usamos os colchetes, [ ], com os itens separados por vírgula: const frutas = ["maçã", "banana", "uva"]. A ordem em que você escreve é a ordem em que eles ficam, e cada item ganha automaticamente uma posição numérica, chamada de índice. E aqui entra o detalhe mais famoso (e traiçoeiro) dos arrays: a contagem começa no zero, não no um.

O array é uma fila de valores, e cada um tem a sua posição (o índice), contada a partir do zero. Para pegar um item, escreva o nome do array e o índice entre colchetes: frutas[1] devolve "banana".

Além de pegar itens pela posição, um array vem com um kit de ferramentas embutido. As quatro que você vai usar o tempo todo:

Quantos itens?

.length

Diz o tamanho da lista. Não é pergunta, é propriedade: sem parênteses.

Adicionar no fim

.push(x)

Acrescenta um item novo no final da lista. É como o carrinho ganhando mais um produto.

Tirar do fim

.pop()

Remove o último item da lista (e o devolve, caso você queira guardá-lo).

Está na lista?

.includes(x)

Responde com true ou false se o valor existe em algum lugar da lista.

Veja tudo isso funcionando junto. Rode e acompanhe a lista crescendo e encolhendo:

// Arrays são listas ordenadas de valores.
const cores = ["vermelho", "verde", "azul"];

console.log(cores[0]);        // primeiro item (começa no 0!)
console.log(cores[2]);        // "azul"
console.log(cores.length);    // quantos itens tem -> 3

cores.push("amarelo");        // adiciona no fim
console.log(cores);

cores.pop();                  // remove o último
console.log(cores);

const e arrays: o conteúdo pode mudar

Repare que o exemplo usa const e mesmo assim faz push e pop. Isso é permitido: o const trava a variável (ela sempre aponta para esta mesma lista), não o conteúdo da lista. Já escrever lista = [1, 2] de novo daria erro.

A pegadinha do zero

Como a contagem começa no zero, o primeiro item é lista[0] e, numa lista de 3 itens, o último é lista[2], ou seja, o índice do último é sempre length - 1, nunca length. Errar essa conta por um é tão comum em programação que o tropeço tem até nome ("off-by-one"). Quando um item vier undefined do nada, desconfie: você provavelmente pediu uma posição que não existe.

E o melhor par do array você já conhece: os loops do módulo passado. Array guarda a lista, loop visita cada item; juntos, eles resolvem o padrão mais comum da programação, "faça algo com cada um destes". É o for...of somando o carrinho inteiro, seja ele de 3 ou de 3 mil produtos, sem mudar uma linha do código.

// Sua vez! Monte seu top 3 (filmes, músicas, jogos...).
const top3 = ["favorito 1", "favorito 2", "favorito 3"];

// 1) Troque os itens pelos seus favoritos de verdade.
// 2) Mostre o PRIMEIRO da lista (lembre: a posição começa no 0).
// 3) Adicione um 4º item com push e mostre o novo tamanho (length).

Complete o top 3 e clique em Rodar.

← Voltar ao índice do curso