Javascript

Arrays: criando e manipulando listas Já leu

• • 7 min de leitura

Arrays: criando e manipulando listas
Até agora trabalhamos com variáveis que guardam um único valor em javascript. Mas e quando precisamos guardar uma lista de produtos, uma co

Até agora trabalhamos com variáveis que guardam um único valor em javascript. Mas e quando precisamos guardar uma lista de produtos, uma coleção de usuários, ou uma série de notas de um aluno? Para isso existem os arrays.

Arrays são listas ordenadas que podem guardar qualquer tipo de dado. São uma das estruturas mais usadas no JavaScript — e dominá-los, especialmente seus métodos modernos, é o que separa um iniciante de um desenvolvedor produtivo.

Criando arrays

// Array de strings
const frutas = ["maçã", "banana", "laranja"];

// Array de números
const notas = [8.5, 7.0, 9.5, 6.0];

// Array misto (possível, mas evite na prática)
const misturado = ["João", 25, true, null];

// Array vazio
const lista = [];

Arrays usam colchetes [] e os itens são separados por vírgula.

Acessando elementos

Cada elemento tem um índice que começa em zero:

const frutas = ["maçã", "banana", "laranja", "uva"];

console.log(frutas[0]); // maçã
console.log(frutas[1]); // banana
console.log(frutas[3]); // uva
console.log(frutas[4]); // undefined — não existe

// Último elemento — independente do tamanho:
console.log(frutas[frutas.length - 1]); // uva

Modificando elementos

const frutas = ["maçã", "banana", "laranja"];

frutas[1] = "manga"; // substituindo banana por manga
console.log(frutas); // ["maçã", "manga", "laranja"]

Propriedade length

const notas = [8.5, 7.0, 9.5, 6.0];
console.log(notas.length); // 4

Métodos essenciais — adicionando e removendo

const times = ["Flamengo", "Palmeiras"];

// Adiciona no final
times.push("Grêmio");
console.log(times); // ["Flamengo", "Palmeiras", "Grêmio"]

// Remove do final e retorna o elemento removido
const removido = times.pop();
console.log(removido); // "Grêmio"
console.log(times);    // ["Flamengo", "Palmeiras"]

// Adiciona no início
times.unshift("Santos");
console.log(times); // ["Santos", "Flamengo", "Palmeiras"]

// Remove do início e retorna o elemento removido
const primeiro = times.shift();
console.log(primeiro); // "Santos"
console.log(times);    // ["Flamengo", "Palmeiras"]

Encontrando elementos

const numeros = [10, 20, 30, 40, 50];

// indexOf — retorna o índice ou -1 se não encontrar
console.log(numeros.indexOf(30));  // 2
console.log(numeros.indexOf(99));  // -1

// includes — retorna true ou false
console.log(numeros.includes(40)); // true
console.log(numeros.includes(99)); // false

// find — retorna o primeiro elemento que satisfaz a condição
const encontrado = numeros.find(n => n > 25);
console.log(encontrado); // 30

// findIndex — retorna o índice do primeiro elemento que satisfaz
const indice = numeros.findIndex(n => n > 25);
console.log(indice); // 2

Os três métodos mais importantes — map, filter e reduce

Estes três métodos transformam a forma como você trabalha com listas. São funcionais, elegantes e amplamente usados em React, Node e em qualquer código moderno.

map — transformar cada elemento

map percorre o array e retorna um novo array com cada elemento transformado pela função que você passa:

const precos = [100, 250, 80, 400];

// Aplicar 10% de desconto em todos os preços
const comDesconto = precos.map(preco => preco * 0.9);
console.log(comDesconto); // [90, 225, 72, 360]

// O array original não é alterado
console.log(precos); // [100, 250, 80, 400]

Outro exemplo — transformar objetos:

const usuarios = [
  { nome: "Ana", idade: 25 },
  { nome: "Carlos", idade: 30 },
  { nome: "Bia", idade: 22 },
];

const nomes = usuarios.map(usuario => usuario.nome);
console.log(nomes); // ["Ana", "Carlos", "Bia"]

filter — filtrar elementos

filter percorre o array e retorna um novo array apenas com os elementos que passam na condição:

const notas = [4.5, 7.0, 8.5, 3.0, 9.5, 5.5];

const aprovados = notas.filter(nota => nota >= 6);
console.log(aprovados); // [7.0, 8.5, 9.5]

const reprovados = notas.filter(nota => nota < 6);
console.log(reprovados); // [4.5, 3.0, 5.5]

Com objetos:

const produtos = [
  { nome: "Notebook", preco: 3500, disponivel: true },
  { nome: "Mouse", preco: 80, disponivel: false },
  { nome: "Teclado", preco: 200, disponivel: true },
  { nome: "Monitor", preco: 1200, disponivel: false },
];

const disponiveis = produtos.filter(p => p.disponivel);
console.log(disponiveis);
// [{ nome: "Notebook", ... }, { nome: "Teclado", ... }]

const baratos = produtos.filter(p => p.preco < 500);
console.log(baratos);
// [{ nome: "Mouse", ... }, { nome: "Teclado", ... }]

reduce — reduzir a um único valor

reduce é o mais poderoso e o mais temido pelos iniciantes. Ele percorre o array acumulando um resultado — pode ser uma soma, um objeto, outro array, qualquer coisa.

// Sintaxe: array.reduce((acumulador, elementoAtual) => ..., valorInicial)

const numeros = [1, 2, 3, 4, 5];

const soma = numeros.reduce((acc, num) => acc + num, 0);
console.log(soma); // 15

Passo a passo do que acontece:

  • Começa com acc = 0
  • Rodada 1: acc = 0 + 1 = 1
  • Rodada 2: acc = 1 + 2 = 3
  • Rodada 3: acc = 3 + 3 = 6
  • Rodada 4: acc = 6 + 4 = 10
  • Rodada 5: acc = 10 + 5 = 15

Exemplo prático — total de um carrinho de compras:

const carrinho = [
  { produto: "Notebook", preco: 3500 },
  { produto: "Mouse", preco: 80 },
  { produto: "Teclado", preco: 200 },
];

const total = carrinho.reduce((acc, item) => acc + item.preco, 0);
console.log(`Total: R$ ${total}`); // Total: R$ 3780

Encadeando métodos

O verdadeiro poder aparece quando você combina map, filter e reduce em sequência:

const funcionarios = [
  { nome: "Ana", salario: 3000, ativo: true },
  { nome: "Carlos", salario: 5000, ativo: false },
  { nome: "Bia", salario: 4000, ativo: true },
  { nome: "Diego", salario: 2500, ativo: true },
];

// Total da folha apenas dos funcionários ativos com salário acima de 2800
const totalFolha = funcionarios
  .filter(f => f.ativo)
  .filter(f => f.salario > 2800)
  .reduce((acc, f) => acc + f.salario, 0);

console.log(`Total da folha: R$ ${totalFolha}`); // R$ 7000

Leia de cima para baixo como uma frase: pegue os funcionários, filtre os ativos, filtre os com salário acima de 2800, some os salários.

Outros métodos úteis

const letras = ["c", "a", "b", "e", "d"];

// sort — ordena (modifica o array original!)
letras.sort();
console.log(letras); // ["a", "b", "c", "d", "e"]

// reverse — inverte
letras.reverse();
console.log(letras); // ["e", "d", "c", "b", "a"]

// slice — retorna uma parte do array (não modifica o original)
const frutas = ["maçã", "banana", "laranja", "uva", "kiwi"];
const algumas = frutas.slice(1, 3);
console.log(algumas); // ["banana", "laranja"]

// join — transforma o array em string
const palavras = ["JavaScript", "é", "incrível"];
console.log(palavras.join(" ")); // "JavaScript é incrível"

// flat — achata arrays aninhados
const aninhado = [1, [2, 3], [4, [5, 6]]];
console.log(aninhado.flat());    // [1, 2, 3, 4, [5, 6]]
console.log(aninhado.flat(2));   // [1, 2, 3, 4, 5, 6]

Cuidado com a mutação

Alguns métodos modificam o array original (push, pop, shift, unshift, sort, reverse, splice). Outros retornam um novo array sem tocar no original (map, filter, slice, concat).

Em código moderno e funcional, preferimos não mutar os dados originais:

const numeros = [3, 1, 4, 1, 5];

// ❌ Modifica o array original
numeros.sort();

// ✅ Cria uma cópia ordenada sem alterar o original
const ordenados = [...numeros].sort();
console.log(numeros);   // [3, 1, 4, 1, 5] — intacto
console.log(ordenados); // [1, 1, 3, 4, 5]

O ... é o spread operator — vamos estudá-lo em detalhes no Artigo 07.

Tarefa para você

Dado o array abaixo, resolva cada desafio:

const alunos = [
  { nome: "Lucas", nota: 8.5, turma: "A" },
  { nome: "Mariana", nota: 5.0, turma: "B" },
  { nome: "Pedro", nota: 9.0, turma: "A" },
  { nome: "Camila", nota: 4.5, turma: "B" },
  { nome: "Rafael", nota: 7.5, turma: "A" },
];
  1. Filtre apenas os alunos aprovados (nota >= 6)
  2. Extraia apenas os nomes dos alunos da turma "A"
  3. Calcule a média geral de todos os alunos
  4. Desafio extra: retorne os nomes dos alunos aprovados da turma "A", em ordem alfabética

Conclusão

Neste artigo você aprendeu:

  • Como criar e acessar elementos de um array
  • Métodos para adicionar e remover elementos
  • Como encontrar elementos com find, findIndex e includes
  • Os três métodos funcionais mais importantes: map, filter e reduce
  • Como encadear métodos para pipelines de dados
  • A diferença entre métodos que mutam e os que não mutam

No próximo artigo vamos explorar os Objetos — a estrutura de dados que modela o mundo real no JavaScript.

 

📚 Fontes e Referências

Comentários

Mais em Javascript

Promises: resolvendo o Callback Hell
Promises: resolvendo o Callback Hell

No artigo anterior vimos o Callback Hell &mdash; c&oacute;digo que cresce hor...

Condicionais: if, else e switch
Condicionais: if, else e switch

No Javascript n&oacute;s guardamos informa&ccedil;&otilde;es em vari&aacute;v...

Escopo, Hoisting e Closures
Escopo, Hoisting e Closures

Este &eacute; um dos artigos mais importantes da s&eacute;rie. N&atilde;o por...