Artigo original: JavaScript Object Keys Tutorial – How to Use a JS Key-Value Pair

Você pode agrupar os dados relacionados em uma única estrutura de dados usando um objeto JavaScript, como este:

const mesa = {
   altura: "1 metro e 20",
   peso: "30 libras",
   cor: "marrom",
   material: "madeira",
 };

Um objeto contém propriedades ou pares chave-valor. O objeto mesa acima tem quatro propriedades. Cada propriedade tem um nome, também chamado de chave, e um valor correspondente.

Por exemplo, a chave altura tem o valor de "1 metro e 20". Juntos, a chave e o valor formam uma única propriedade.

altura: "1 metro e 20",

O objeto mesa contém dados sobre uma mesa. Na verdade, essa é uma razão pela qual você usaria um objeto do JavaScript: para armazenar dados. Também é simples recuperar os dados que você armazena em um objeto. Esses aspectos tornam os objetos muito úteis.

Este artigo trará informações sobre os objetos em JavaScript:

  • como criar um objeto
  • como armazenar dados em um objeto
  • e recuperar dados a partir dele.

Comecemos pela criação de um objeto.

Como criar um objeto em JavaScript

Vou criar um objeto chamado pizza abaixo e acrescentar a ele pares chave-valor.

const pizza = {
   sabor: "queijo",
   molho: "marinara",
   tamanho: "pequeno"
};

As chaves estão à esquerda dos dois pontos : e os valores estão à direita dele. Cada par chave-valor é uma propriedade. Há três propriedades nesse exemplo:

  • A  chave sabor tem um valor "queijo".
  • A chave molho tem um valor "marinara".
  • A chave tamanho tem um valor "pequeno".

Cada propriedade é separada por uma vírgula. As propriedades, juntas, ficam cercadas por chaves {}.

Essa é a sintaxe básica do objeto. Há, porém, algumas regras a serem seguidas ao criar objetos em JavaScript.

Chaves de objetos em JavaScript

Cada chave em seu objeto do JavaScript deve ser uma string, símbolo ou número.

Veja com atenção o exemplo abaixo. Os nomes de chave 1 e 2 são, na verdade, transformados em strings.

const carrinhoCompras = {
   1: "maçã",
   2: "laranja"
};

É uma diferença deixada clara quando se imprime o objeto.

console.log(carrinhoCompras);
//Resultado: { '1': 'maçã', '2': 'laranja' }

Há outra regra a ter em mente sobre nomes de chaves: se seu nome de chave tiver espaços, você precisa deixá-lo entre aspas.

Dê uma olhada no objeto desenvolvedor abaixo. Observe o último nome de chave, "nome do projeto atual". Esse nome de chave contém espaços. Portanto, eu o deixei entre aspas.

const desenvolvedor = {
   nome: "Phil",
   idade: 21,
   desenvolvedorBackend: true,
   linguagens: ["Python", "JavaScript", "Java", "C++"],
   "nome do projeto atual": "O Incrível aplicativo"
};

Valores de objetos em JavaScript

Um valor, por outro lado, pode ser qualquer tipo de dado, incluindo um array, número ou booleano. Os valores no exemplo acima contêm estes tipos: string, inteiro, booleano e array.

Você pode até usar uma função como um valor. Nesse caso, ela é conhecida como método. sons(), no objeto abaixo, é um exemplo.

const animal = {
   tipo: "gato",
   nome: "gatinho",
   sons() { console.log("miau miau") }
};

Agora, vamos supor que você queira adicionar ou excluir um par chave-valor ou que, simplesmente, você queira recuperar o valor de um objeto.

Você pode fazer essas coisas usando a notação de ponto ou de colchetes, sobre as quais falaremos em seguida.

Como a notação de ponto e a notação de colchetes funcionam em JavaScript

A notação de ponto e a notação de colchetes são duas maneiras de acessar e usar as propriedades de um objeto. É provável que você use a notação de pontos com mais frequência. Por isso, vamos começar com ela.

Como adicionar um par chave-valor com notação de pontos em JavaScript

Vou criar um objeto vazio abaixo, chamado livro.

const livro = {};

Para adicionar um par chave-valor usando a notação de ponto, use a sintaxe:

nomeDoObjeto.nomeDaChave = valor

Esse é o código para adicionar a chave (autor) e o valor ("Jane Smith") ao objeto livro:

livro.autor = "Jane Smith";

Aqui está um desdobramento do código acima:

  • livro é o nome do objeto
  • . (ponto)
  • autor é o nome da chave
  • = (igual)
  • "Jane Smith" é o valor

Quando eu imprimir o objeto livro, verei o novo par chave-valor adicionado.

console.log(livro);
//Resultado: { autor: 'Jane Smith' }

Vou adicionar outro par chave-valor ao objeto livro.

livro.anoPublicacao = 2006;

O objeto livro tem agora duas propriedades.

console.log(livro);
//Resultado: { autor: 'Jane Smith', anoPublicacao: 2006 }

Como acessar dados em um objeto JavaScript usando a notação de ponto

Você também pode usar a notação de ponto em uma chave para acessar o valor relacionado.

Considere este objeto jogadorBasquete.

const jogadorBasquete = {
   nome: "James",
   mediaPontosPorJogo: 20,
   altura: "1,90 m",
   posicao: "ala-armador"
};

Digamos que você queira recuperar o valor "ala-armador". Esta é a sintaxe a ser usada:

nomeDoObjeto.nomeDaChave

Vamos utilizar essa sintaxe para obter e imprimir o valor "ala-armador".

console.log(jogadorBasquete.posicao);
//Resultado: ala-armador

Aqui está um desdobramento do código acima:

  • jogadorBasquete é o nome do objeto
  • .  (ponto)
  • posicao é o nome da chave

Aqui temos outro exemplo:

console.log(jogadorBasquete.nome);
//Resultado: James

Como excluir um par chave-valor em JavaScript

Para excluir um par chave-valor, use o operador de exclusão. Esta é a sintaxe:

delete nomeObjeto.nomeChave

Assim, para apagar a chave altura e seu valor do objeto jogadorBasquete, você escreveria este código:

delete jogadorBasquete.altura;

Como resultado, o objeto jogadorBasquete agora tem três pares chave-valor.

console.log(jogadorBasquete);
//Resultado: { nome: 'James', mediaPontosPorJogo: 20, posicao: 'ala-armador' }

É provável que você use frequentemente a notação de ponto, embora haja certos requisitos a serem observados.

Ao utilizar a notação de ponto, os nomes de chave não podem conter espaços, hifens, ou começar com um número.

Por exemplo, digamos que eu tente adicionar uma chave que contém espaços usando a notação de pontos. Vou receber um erro.

jogadorBasquete.porcentagem de acertos = "75%";
//Resulta em um erro

Portanto, a notação de pontos não funcionará em todas as situações. É por isso que existe outra opção: a notação de colchetes.

Como adicionar um par chave-valor usando notação de colchetes em JavaScript

Assim como a notação de ponto, você pode usar a notação de colchetes para adicionar um par chave-valor a um objeto.

A notação de colchetes oferece mais flexibilidade do que a notação de ponto. Isso porque os nomes de chave podem incluir espaços e hifens, podendo também começar com números.

Vou criar um objeto funcionario abaixo.

const funcionario = {};

Agora, quero adicionar um par chave-valor usando a notação de colchetes. Esta é a sintaxe:

nomeDoObjeto["nomeDaChave"] = valor

Então, é assim que eu adicionaria a chave (ocupação) e o valor (vendas) ao objeto do funcionário:

funcionario["ocupação"] = "vendas";

Aqui está um desdobramento do código acima:

  • funcionario é o nome do objeto
  • "ocupação" é o nome da chave
  • = (igual)
  • "vendas" é o valor

Abaixo estão mais alguns exemplos que utilizam a flexibilidade da notação de colchetes para adicionar uma variedade de pares chave-valor.

//Acrescentar um nome de chave com várias palavras
funcionario["viaja frequentemente"] = true;
 
//Adicionar um nome de chave que inclui um hífen
funcionario["Primeiro-território"] = "Chicago";
 
//Adicionar um nome de chave que comece com um número
funcionario["25"] = "total de clientes";

Quando imprimo o objeto funcionário, esta é a aparência:

{
  '25': 'total de clientes',
  ocupacao: 'vendas',
  'viaja frequentemente': true,
  'Primeiro-território': 'Chicago'
}

Com essa informação em mente, podemos adicionar a chave "porcentagem de acertos" ao objeto jogadorBasquete abaixo.

const jogadorBasquete = {
   nome: "James",
   mediaPontosPorJogo: 20,
   altura: "1,90 m",
   posicao: "ala-armador"
};

Você deve se lembrar que a notação de ponto nos deixou com um erro quando tentamos adicionar uma chave que incluía espaços.

jogadorBasquete.porcentagem de acertos = "75%";
//Resulta em um erro

A notação de colchetes, no entanto, evita esses erros, como você pode ver aqui:

jogadorBasquete["porcentagem de acertos"] = "75%";

Este é o resultado quando eu imprimo o objeto:

{
  nome: 'James',
  mediaPontosPorJogo: 20,
  altura: '1,90 m',
  posicao: 'ala-armador',
  'porcentagem de acertos': '75%'
}

Como acessar dados em um objeto do JavaScript usando a notação de colchetes

Você também pode usar a notação de parênteses em uma chave para acessar o valor relacionado.

Vamos recordar do objeto animal do início do artigo.

const animal = {
   tipo: "gato",
   nome: "gatinho",
   sons() { console.log("miau miau") }
};

Vamos obter o valor associado à chave nome. Para isso, envolva o nome da chave entre aspas e coloque-a entre colchetes. Esta é a sintaxe:

nomeDoObjeto["nomeDaChave"]

Aqui está o código que você escreveria com a notação de colchetes:

animal["nome"];

Este é um desdobramento do código acima:

  • animal é o nome do objeto
  • ["nome"] é o nome da chave entre colchetes

Aqui está outro exemplo.

console.log(animal["sons"]());

//Resultado: 
miau miau
undefined

Note que sons() é um método. Por isso, acrescentei os parênteses no final para invocá-lo.

É assim que você invocaria um método usando a notação de ponto.

console.log(animal.sons());

//Resultado: 
miau miau
undefined

Métodos em objetos do JavaScript

Agora, você já sabe como acessar propriedades específicas. Se, no entanto, você quiser todas as chaves ou todos os valores de um objeto, como faria?

Há dois métodos que darão as informações de que você precisa.

const corredor = {
   nome: "Jessica",
   idade: 20,
   milhasPorSemana: 40,
   corrida: "maratona"
};

Use o método Object.keys() para recuperar todos os nomes de chave de um objeto.

Esta é a sintaxe:

Object.keys(nomeDoObjeto)

Podemos usar esse método no objeto corredor acima.

Object.keys(corredor);

Se você imprimir o resultado, receberá um array das chaves do objeto.

console.log(Object.keys(corredor));
//Resultado: [ 'nome', 'idade', 'milhasPorSemana', 'corrida' ]

Do mesmo modo, você pode usar o método Object.values() para obter todos os valores de um objeto. Esta é a sintaxe:

Object.values(nomeObjeto)

Agora, vamos obter todos os valores do objeto corredor.

console.log(Object.values(corredor));
//Resultado: [ 'Jessica', 20, 40, 'maratona' ]

Tratamos de muitas coisas. Aqui está um resumo das principais ideias:

Objetos

  • Usamos objetos para armazenar dados como propriedades (pares chave-valor).
  • Os nomes de chave devem ser strings, símbolos ou números.
  • Os valores podem ser de qualquer tipo.

Acessar propriedades dos objetos

  • Notação de pontos: nomeDoObjeto.nomeDaChave
  • Notação de colchetes: nomeDoObjeto["nomeDaChave"]

Excluir uma propriedade

  • delete nomeDoObjeto.nomeDaChave

Você pode fazer muito com objetos. Agora, você conhece o básico para tirar proveito desse tipo de dados poderoso do JavaScript.

A autora escreve sobre aprender a programar e sobre as melhores maneiras de se fazer isso em seu blog, amymhaddad.com. Ela também usar o Twitter para falar sobre programação, aprendizagem e produtividade: @amymhaddad.