JavaScript: Fundamentos de Arrays em JavaScript
Última atualização: 2026-10-13
Um array é como uma fileira de gavetas numeradas — cada gaveta tem um número (índice) e guarda algo (dados). Você pode pegar itens pelo número, trocá-los ou adicionar novos no final. Arrays são a estrutura de dados que você mais usará no desenvolvimento do dia a dia.
1. O Que É um Array
Um array é uma coleção ordenada de valores que pode armazenar qualquer tipo de dado:
<script>
let arr = [1, 'olá', true, null, undefined];
</script>
Um único array pode misturar diferentes tipos, mas na prática você geralmente armazenará o mesmo tipo para facilitar o processamento.
Duas maneiras:
<script>
// Método 1: Sintaxe literal (recomendado — limpo e direto)
let fruits = ['Maçã', 'Banana', 'Laranja'];
// Método 2: Construtor Array
let nums = new Array(1, 2, 3);
let empty = new Array(5); // Cria um array vazio de comprimento 5, NÃO [5]!
</script>
new Array(5) cria um array vazio com comprimento 5, não um array contendo o número 5! Isso engana muitas pessoas, então fique com o literal [].
3. Acessando Elementos
Índices de array começam em 0, não em 1. O primeiro elemento é [0], o segundo é [1], e assim por diante:
<script>
let fruits = ['Maçã', 'Banana', 'Laranja'];
fruits[0]; // 'Maçã'
fruits[1]; // 'Banana'
fruits[2]; // 'Laranja'
</script>
Acessar um índice inexistente não lança um erro — retorna undefined:
<script>
fruits[5]; // undefined
</script>
4. Propriedade length
length retorna o número de elementos no array:
<script>
let arr = [10, 20, 30];
arr.length; // 3
</script>
length é sempre um a mais que o maior índice (já que índices começam em 0). O último elemento está em arr.length - 1.
5. Modificando Elementos
Basta atribuir um novo valor via índice:
<script>
let fruits = ['Maçã', 'Banana', 'Laranja'];
fruits[1] = 'Uva'; // Substitui 'Banana' por 'Uva'
// ['Maçã', 'Uva', 'Laranja']
</script>
Você também pode adicionar elementos por índice (não recomendado — cria slots vazios):
<script>
fruits[5] = 'Melancia';
// ['Maçã', 'Uva', 'Laranja', empty × 2, 'Melancia']
</script>
▶ Exemplo: Operações Básicas com Arrays
▶ Experimente6. Métodos Principais
Os métodos de array mais usados para adicionar e remover elementos:
| Método | Ação | Retorna |
|---|---|---|
push() |
Adicionar no final | Novo comprimento |
pop() |
Remover do final | Elemento removido |
unshift() |
Adicionar no início | Novo comprimento |
shift() |
Remover do início | Elemento removido |
<!DOCTYPE html>
<html lang="pt-br">
<head><meta charset="UTF-8"><title>Métodos de Array</title></head>
<body>
<pre id="output"></pre>
<script>
let arr = ['a', 'b', 'c'];
arr.push('d'); // ['a','b','c','d'] retorna 4
arr.pop(); // ['a','b','c'] retorna 'd'
arr.unshift('z'); // ['z','a','b','c'] retorna 4
arr.shift(); // ['a','b','c'] retorna 'z'
document.getElementById('output').textContent = JSON.stringify(arr);
</script>
</body>
</html>
push/pop trabalham na cauda; unshift/shift trabalham na cabeça. Métodos que começam com p afetam o final; aqueles que começam com s afetam o início. Métodos com prefixo un adicionam; sem un removem.
▶ Exemplo: Gerenciador de Lista de Frutas
▶ Experimente7. Verificando Arrays: Array.isArray() vs typeof
typeof retorna "object" para arrays, o que o torna inútil para distinguir arrays de objetos simples:
<script>
let arr = [1, 2, 3];
typeof arr; // "object" ← inútil!
Array.isArray(arr); // true ← abordagem correta
</script>
typeof é não confiável para arrays — sempre use Array.isArray().
8. forEach para Iteração
forEach é a maneira mais comum de iterar sobre arrays — mais declarativo que um loop for:
<!DOCTYPE html>
<html lang="pt-br">
<head><meta charset="UTF-8"><title>forEach</title></head>
<body>
<pre id="output"></pre>
<script>
let fruits = ['Maçã', 'Banana', 'Laranja'];
let result = '';
fruits.forEach(function(fruit, index) {
result += index + ' ' + fruit + '\n';
});
document.getElementById('output').textContent = result;
</script>
</body>
</html>
Arrow functions tornam ainda mais conciso:
<script>
fruits.forEach((fruit, index) => {
console.log(index, fruit);
});
</script>
▶ Exemplo: forEach em Ação
▶ Experimentemap, filter e reduce são ainda mais poderosos — cobertos na próxima lição.
❓ Perguntas Frequentes
push e unshift retornam?let arr = [1].push(2) dá 2 (o comprimento), não [1, 2].break dentro do forEach?forEach não tem mecanismo de break. Para sair antecipadamente, use um loop for tradicional ou for...of com break.arr[100] retorna undefined quando fora dos limites — nenhuma exceção é lançada. Mas isso pode esconder bugs, então é boa prática verificar o intervalo de índices antes de acessar.📖 Resumo
- Crie arrays com o literal
[]— evitenew Array()(fácil de confundir) - Índices começam em 0; o último elemento está no índice
length - 1 push/poptrabalham na cauda;unshift/shifttrabalham na cabeça- Use
Array.isArray()para verificar se algo é um array —typeofretorna"object"e não é confiável forEaché mais declarativo quefor, mas você não pode usarbreakpara sair antecipadamente
📝 Exercícios
- Crie um array com 5 nomes de cidades e use
forEachpara exibir o número e nome de cada cidade na página - Construa uma lista de tarefas: insira tarefas para adicionar no final, clique em "Concluído" para remover a última tarefa e exiba a lista em tempo real
- Escreva um programa que recebe 5 números como entrada, armazena em um array e exibe sua soma e média
