Listas: guardar várias coisas com uma etiqueta só
Uma variável guarda um valor só. Mas um carrinho de compras tem vários produtos, uma turma tem vários alunos. Para isso existe a lista: uma coleção de valores guardada sob um único nome.
Estudar esta lição interativa →Imagine um carrinho de compras com cinco produtos diferentes. Criar cinco variáveis separadas, produto1, produto2, produto3... funciona para cinco itens, mas vira um pesadelo de manter com cinquenta, e é praticamente impossível de percorrer com um laço, já que cada nome é diferente. O que você realmente precisa é de uma coleção: um único nome que guarda vários valores ao mesmo tempo, em ordem. Essa coleção se chama lista (em JavaScript, o nome técnico é array).
let frutas = ["maçã", "banana", "uva"];
console.log(frutas[0]);
console.log(frutas.length);
for (let i = 0; i < frutas.length; i++) {
console.log(frutas[i]);
}Rode e observe cada item sendo acessado.
Uma lista é criada com colchetes [ ], com os itens separados por vírgula. Para acessar um item específico, usa-se colchetes com um número, o índice daquele item: frutas[0] é o primeiro item, não o segundo. Essa é uma das convenções mais importantes (e mais confusas no começo) de quase toda linguagem de programação: a contagem de índices começa em 0, não em 1. frutas.length devolve quantos itens a lista tem no total.
Pense numa lista como uma fileira de caixas numeradas, coladas uma ao lado da outra, começando do número 0, não do 1. "A primeira caixa" e "a caixa número 0" são a mesma caixa, só nomeadas de jeitos diferentes. Uma vez que você se acostuma a contar a partir do zero, esse índice vira natural, mas vale prestar atenção especial nas primeiras semanas.
Para fazer algo com cada item de uma lista, sem escrever frutas[0], frutas[1], frutas[2] um por um, combinamos a lista com o laço for do Módulo 4: um laço que vai de 0 até o último índice válido, usando frutas.length como limite.
Uma lista com 3 itens tem índices válidos 0, 1 e 2: o total de itens (length, que é 3) é sempre um a mais que o último índice válido. É por isso que um laço que percorre uma lista inteira usa a condição i < frutas.length (menor que, sem o igual), não i <= frutas.length.
Diferente de outras linguagens, o JavaScript não gera um erro ao acessar um índice fora da lista: frutas[10] numa lista de 3 itens simplesmente devolve undefined, silenciosamente. É um comportamento traiçoeiro justamente por não avisar nada; sempre que um item da lista aparecer como undefined sem explicação, a primeira suspeita deve ser o índice usado.
let frutas = ["maçã", "banana", "uva"];
for (let i = 0; i <= frutas.length; i++) {
console.log(frutas[i]);
}Troque <= por < na condição do laço.