Pular para o conteúdo

Array

Uma lista ordenada de valores. É de onde vem toda lista, tabela e galeria da sua interface.

Também aparece como "lista", "vetor", "map", "filter", "[]".

Array é uma lista. Escrita entre colchetes, com os itens separados por vírgula.

const categorias = ["Design", "Código", "Processo"];

Cada item tem uma posição, começando do zero. categorias[0] é "Design".

Os três métodos que resolvem quase tudo

const produtos = [
  { nome: "E-book", preco: 49, ativo: true },
  { nome: "Curso", preco: 390, ativo: false },
  { nome: "Mentoria", preco: 900, ativo: true },
];
 
// transformar cada item em outra coisa
produtos.map((p) => p.nome);
// ["E-book", "Curso", "Mentoria"]
 
// ficar só com os que passam num teste
produtos.filter((p) => p.ativo);
// [E-book, Mentoria]
 
// reduzir a lista a um valor só
produtos.reduce((total, p) => total + p.preco, 0);
// 1339

map é o mais importante pra quem desenha interface, porque é ele que transforma uma lista de dados numa lista de cards na tela:

{produtos.map((produto) => (
  <Cartao key={produto.nome} {...produto} />
))}

A ligação com o seu trabalho

Toda vez que você desenha um card e escreve "repetir para cada item", está descrevendo um map. E toda vez que pergunta "e se a lista vier vazia", está lembrando o dev de tratar array.length === 0, que é o estado vazio que quase sempre falta na tela.

Outros termos de JavaScript

Quer o assunto inteiro e não só a definição? Os guias pegam cada tema do começo ao fim.