Arrays de objetos: listas de 'fichas' de informações

Aprenda a trabalhar com coleções de objetos, como uma lista de usuários ou produtos.

Até aqui, você viu objetos (uma ficha com rótulos) e também arrays (uma lista em ordem).
Agora vamos juntar os dois conceitos em algo super usado no mundo real: arrays de objetos.

Um array de objetos é, basicamente, uma lista de fichas.

Analogia rápida

Imagine uma turma de alunos.
Cada aluno tem sua própria ficha:

  • nome
  • idade
  • nota

A turma inteira é uma lista dessas fichas.
No JavaScript, isso vira um array de objetos.

Exemplo básico

const alunos = [
  { nome: "Ana", idade: 18, nota: 8.5 },
  { nome: "Bruno", idade: 19, nota: 7.2 },
  { nome: "Carla", idade: 18, nota: 9.1 }
];

Aqui:

  • alunos é o array (a lista)
  • cada item do array é um objeto (uma ficha)

Como acessar informações

Para acessar um item do array, usamos índice ([0], [1], [2]).
Depois, acessamos a propriedade do objeto com ponto.

console.log(alunos[0].nome); // Ana
console.log(alunos[1].nota); // 7.2

Leitura de alunos[0].nome:

  1. pega o primeiro item da lista
  2. dentro dele, pega o campo nome

Adicionando uma nova ficha na lista

alunos.push({ nome: "Diego", idade: 20, nota: 8.0 });

console.log(alunos.length); // 4

push adiciona no final do array.

Atualizando dados de uma ficha

alunos[1].nota = 7.8;
console.log(alunos[1].nota); // 7.8

Você acessa o aluno e atualiza a propriedade que quiser.

Removendo um item da lista

alunos.pop(); // remove o último

Se quiser remover por posição específica, normalmente usamos splice:

alunos.splice(1, 1); // remove 1 item a partir do índice 1

Percorrendo a lista de fichas

Com for:

for (let i = 0; i < alunos.length; i++) {
  console.log(alunos[i].nome);
}

Com forEach (mais comum e legível):

alunos.forEach(function(aluno) {
  console.log(aluno.nome, aluno.nota);
});

Casos reais de arrays de objetos

Você vai usar isso o tempo todo para representar:

  • lista de produtos
  • lista de usuários
  • lista de pedidos
  • lista de tarefas
  • lista de comentários

É uma estrutura central no JavaScript.

Boas práticas

  • Mantenha nomes de propriedades consistentes (nome, idade, nota).
  • Evite misturar padrões (nomeAluno em um item e nome em outro).
  • Ao atualizar, confira o índice correto para não alterar a ficha errada.
  • Se possível, valide dados antes de inserir no array.

Resumo da lição

  • Array de objetos é uma lista em que cada item é uma ficha de dados.
  • Acesso comum: lista[indice].propriedade.
  • Você pode adicionar, atualizar, remover e percorrer normalmente.
  • Essa estrutura aparece em quase todo projeto web.