Objetos em JavaScript: criar, ler, alterar e percorrer propriedades

No capítulo anterior, as funções permitiram-nos agrupar instruções. Os objetos agrupam dados: um utilizador, um produto ou uma resposta de API são objetos. É a estrutura que mais vais manipular em JavaScript, e este capítulo percorre-a de ponta a ponta, da criação à cópia.

O que é um objeto em JavaScript?

Um objeto é um conjunto de propriedades, cada uma formada por uma chave (um nome) e um valor. O valor pode ser de qualquer tipo: string, número, booleano, array, outro objeto ou uma função. Se conheces os dicionários de Python ou os arrays associativos de PHP, a ideia é a mesma.

const personne = {
  nom: 'Jean',
  age: 30,
  ville: 'Lille',
  actif: true,
  langues: ['français', 'anglais'],
};

As chavetas delimitam o objeto, cada propriedade escreve-se clé: valeur e as propriedades separam-se por vírgulas. A vírgula final depois da última propriedade é permitida e facilita os acrescentos.

Criar um objeto

A notação literal

É a do exemplo acima e é a forma a usar na grande maioria dos casos. Um objeto vazio escreve-se {} e pode ser preenchido a seguir:

const telephone = {};
telephone.marque = 'Sony';
telephone.prix = 400;
telephone.stock = 200;

console.log(telephone); // { marque: 'Sony', prix: 400, stock: 200 }

Uma função construtora

Quando é preciso criar vários objetos com a mesma forma, uma função chamada com new fabrica-os. Lá dentro, this designa o objeto que está a ser criado.

function Telephone(marque, prix, stock) {
  this.marque = marque;
  this.prix = prix;
  this.stock = stock;
  this.enStock = function () {
    return this.stock > 0;
  };
}

const motoZ = new Telephone('Motorola', 400, 200);
const miMax = new Telephone('Xiaomi', 200, 0);

console.log(motoZ.enStock()); // true
console.log(miMax.enStock()); // false

Esta escrita é a antepassada das classes, que vais ver mais à frente: class Telephone { constructor(marque, prix, stock) { … } } faz o mesmo com uma sintaxe mais clara. Ainda vais encontrar funções construtoras em código existente.

Por fim, new Object() também cria um objeto vazio, mas não traz nada além do que {} já dá: deixou de se usar.

Ler uma propriedade

Duas sintaxes, equivalentes no caso simples:

console.log(personne.nom);     // 'Jean'   — notação por ponto
console.log(personne['nom']);  // 'Jean'   — notação por parênteses retos

Os parênteses retos tornam-se indispensáveis em duas situações: quando a chave está numa variável e quando contém caracteres impossíveis de escrever a seguir a um ponto.

const cle = 'age';
console.log(personne[cle]);            // 30 — a chave vem de uma variável

const fiche = { 'prénom complet': 'Jean Dupont' };
console.log(fiche['prénom complet']);  // 'Jean Dupont' — espaço na chave

Ler uma propriedade que não existe não provoca nenhum erro: o resultado é undefined.

console.log(personne.pays);   // undefined

Já ler uma propriedade de uma propriedade ausente falha: personne.adresse.ville lança «Cannot read properties of undefined». O encadeamento opcional ?. evita o erro:

console.log(personne.adresse?.ville);   // undefined, sem erro

Alterar e acrescentar

A mesma atribuição altera uma propriedade existente ou cria uma nova:

personne.age = 31;            // alteração
personne.pays = 'France';     // acrescento — a propriedade não existia
personne['ville'] = 'Lyon';   // alteração, notação por parênteses retos

console.log(personne.age, personne.pays, personne.ville);   // 31 'France' 'Lyon'

Atenção ao const: impede que a variável personne seja reatribuída a outro objeto, não que o objeto seja alterado. É intencional e é prático. Para proibir qualquer alteração, Object.freeze(personne) congela o objeto (as atribuições passam a ser ignoradas em modo não estrito e recusadas em modo estrito).

Apagar uma propriedade e testar se existe

delete personne.pays;

console.log(personne.pays);                 // undefined
console.log('pays' in personne);            // false — a chave já não existe
console.log(Object.hasOwn(personne, 'nom')); // true  — a chave existe, é própria do objeto

delete retira a propriedade. Para verificar a presença de uma chave, prefere in ou Object.hasOwn() a um teste sobre undefined: uma propriedade pode existir com o valor undefined.

Os métodos: funções dentro de um objeto

Uma propriedade cujo valor é uma função chama-se método. Dentro de um método, this designa o objeto que a contém.

const personne = {
  nom: 'Ana',
  naissance: 1996,
  saluer() {
    return `Salut, je suis ${this.nom}`;
  },
  age() {
    return 2026 - this.naissance;
  },
};

console.log(personne.saluer()); // 'Salut, je suis Ana'
console.log(personne.age());    // 30

Percorrer um objeto

Três métodos estáticos devolvem o conteúdo de um objeto sob a forma de array, o que permite aproveitar tudo o que já sabes sobre ciclos:

const produit = { nom: 'Clavier', prix: 49.9, stock: 12 };

console.log(Object.keys(produit));    // ['nom', 'prix', 'stock']
console.log(Object.values(produit));  // ['Clavier', 49.9, 12]
console.log(Object.entries(produit)); // [['nom', 'Clavier'], ['prix', 49.9], ['stock', 12]]

for (const [cle, valeur] of Object.entries(produit)) {
  console.log(`${cle} : ${valeur}`);
}
// nom : Clavier
// prix : 49.9
// stock : 12

console.log(Object.keys(produit).length);   // 3 — o «número de propriedades»

O ciclo for…in também existe e percorre as chaves diretamente. Traz, no entanto, as propriedades herdadas do protótipo, o que surpreende assim que se manipulam objetos criados por bibliotecas: Object.keys() com for…of é a escolha por omissão.

for (const cle in produit) {
  console.log(cle);   // nom, prix, stock
}

A operação inversa, reconstruir um objeto a partir de pares, faz-se com Object.fromEntries():

Object.fromEntries([['a', 1], ['b', 2]]);   // { a: 1, b: 2 }

Objetos aninhados e arrays de objetos

Um valor pode ser um objeto: é assim que se representa uma estrutura. E um array de objetos é a forma mais comum dos dados que chegam de uma API.

const commande = {
  numero: 1042,
  client: {
    nom: 'Jean',
    adresse: { ville: 'Lille', codePostal: '59000' },
  },
  lignes: [
    { produit: 'Clavier', prix: 49.9, quantite: 1 },
    { produit: 'Souris', prix: 19.5, quantite: 2 },
  ],
};

console.log(commande.client.adresse.ville);   // 'Lille'
console.log(commande.lignes[1].produit);      // 'Souris'

let total = 0;
for (const ligne of commande.lignes) {
  total += ligne.prix * ligne.quantite;
}
console.log(total);   // 88.9

Os dados de um servidor chegam sob a forma de texto JSON, cuja sintaxe é a dos objetos literais: JSON.parse(texte) transforma-o em objeto e JSON.stringify(objet) faz o inverso.

Copiar um objeto sem surpresas

Atribuir um objeto a outra variável não o copia: as duas variáveis apontam para o mesmo objeto em memória.

const original = { nom: 'Jean', adresse: { ville: 'Paris' } };

const alias = original;
alias.nom = 'Paul';
console.log(original.nom);   // 'Paul' — não era uma cópia

O operador de spread copia o primeiro nível, mas os objetos aninhados continuam partilhados:

const copie = { ...original };
copie.nom = 'Marie';
copie.adresse.ville = 'Lyon';

console.log(original.nom);            // 'Paul'  — o primeiro nível é mesmo copiado
console.log(original.adresse.ville);  // 'Lyon'  — o objeto aninhado está partilhado

Para uma cópia completa, independente em todos os níveis, structuredClone() é a função indicada:

const clone = structuredClone(original);
clone.adresse.ville = 'Nice';

console.log(original.adresse.ville);  // 'Lyon' — o original não mudou

structuredClone não copia os métodos: reserva-o para objetos de dados. Por fim, Object.assign(cible, source) funde objetos, com a mesma cópia superficial do spread.

Resumo

Rumo à programação orientada a objetos

Quando vários objetos partilham a mesma forma e os mesmos métodos, descrevem-se uma só vez numa classe e criam-se instâncias com new. É a continuação natural deste capítulo: As classes em JavaScript e Introdução às classes e aos objetos (ES6). Por agora, o capítulo seguinte apresenta um objeto fornecido pela linguagem, Math, e os seus métodos.