Objetos em

Sobre Objetos

Explicação

Além de tipos de dados primitivos como number e string, existe outro tipo de dado importante em JavaScript chamado object. Objetos são coleções de pares chave-valor. Por isso, podem ser usados como o que costuma ser chamado de mapas ou dicionários em outras linguagens.

Em outras linguagens, todos os valores de um mapa geralmente precisam ter o mesmo tipo de dado. Em JavaScript, apenas o tipo da chave é restrito: ela precisa ser uma string. Os valores dentro de um mesmo objeto podem ter tipos diferentes. Podem ser tipos primitivos como números, mas também arrays, outros objetos ou até funções. Isso torna os objetos muito versáteis, a ponto de serem também entidades centrais para a programação orientada a objetos (POO) em JavaScript.

A seguir, vamos focar nos objetos como coleções ou mapas. Outros casos de uso dos objetos serão abordados em outros conceitos, veja por exemplo Classes.

Criando um objeto

Você cria um literal de objeto usando chaves. Você também pode incluir algumas entradas (pares chave-valor) diretamente. Para isso, declare primeiro a chave, seguida de dois-pontos e do valor.

const emptyObject = {};

const obj = {
  favoriteNumber: 42,
  greeting: 'Hello World',
  useGreeting: true,
  address: {
    street: 'Trincomalee Highway',
    city: 'Batticaloa',
  },
  fruits: ['melon', 'papaya'],
  addNumbers: function (a, b) {
    return a + b;
  },
};

A vírgula final após a última entrada é opcional em JavaScript. Você pode ler sobre as vantagens de usá-la aqui.

Talvez você se pergunte por que as chaves não estão entre aspas, embora devessem ser strings. Isso é uma notação abreviada. Se a chave segue as regras de nomenclatura de um identificador de JavaScript, você pode omitir as aspas. Para chaves com caracteres especiais no nome, você precisa usar a notação de string habitual.

const obj = {
  '1keyStartsWithNumber': '...',
  'key/with/slashes': '...',
  'key-with-dashes': '...',
  'key with spaces': '...',
  '#&()[]{}èä樹keyWithSpecialChars': '...',
};

Muitas vezes você vai querer adicionar variáveis existentes ao declarar um objeto. Isso costuma levar a pares chave-valor como name: name. JavaScript tem uma notação abreviada que permite simplesmente escrever name. Também há uma notação abreviada para definir uma função em um objeto. Nela, você pode omitir os dois-pontos e a palavra-chave function.

const x = 1;
const y = 2;

const obj = {
  x: x,
  y: y,
  calcSum: function (a, b) {
    return a + b;
  },
};

// Can be shortened to ...
const obj = {
  x,
  y,
  calcSum(a, b) {
    return a + b;
  },
};

Se você quer criar um literal de objeto com um nome de chave que está guardado em uma variável ou é obtido por meio de uma expressão, precisa envolver a variável ou a expressão em colchetes.

const key = 'greeting';

const obj = {
  [key]: 'hello world',
};
console.log(obj);
// => { greeting: 'hello world' }

Recuperando um valor

Há duas formas de recuperar o valor de uma determinada chave: a notação de ponto e a notação de colchetes.

const obj = { greeting: 'hello world' };

obj.greeting;
// => hello world

obj['greeting'];
// => hello world

// Bracket notation also works with variables.
const key = 'greeting';
obj[key];
// => hello world

Usar a notação de ponto como abreviação tem a mesma restrição de omitir as aspas. Ela só funciona se a chave segue as regras de nomenclatura de identificadores.

Se você tentar recuperar uma chave que não existe no objeto, JavaScript retorna undefined. Veja Null e Undefined para mais detalhes sobre isso.

Você pode encadear as chaves se quiser recuperar um valor de um objeto aninhado.

const obj = {
  address: {
    street: 'Trincomalee Highway',
    city: 'Batticaloa',
  },
};

obj.address.city;
// => 'Batticaloa'

obj['address']['city'];
// => 'Batticaloa'

// Notations can also be mixed.
obj.address['city'];
// => 'Batticaloa'

Adicionando ou alterando um valor

Você pode adicionar ou alterar um valor usando o operador de atribuição =. Novamente, as notações de ponto e de colchetes estão disponíveis.

const obj = { greeting: 'hello world' };

obj.greeting = 'Hi there!';
obj['greeting'] = 'Welcome.';

obj.newKey1 = 'new value 1';
obj['new key 2'] = 'new value 2';

const key = 'new key 3';
obj[key] = 'new value 3';

Removendo uma entrada

Você pode remover um par chave-valor de um objeto usando a palavra-chave delete.

const obj = {
  key1: 'value1',
  key2: 'value2',
};

delete obj.key1;
delete obj['key2'];

Repare que, embora undefined seja retornado para chaves inexistentes, definir uma chave como undefined não remove a entrada. Sempre use delete.

Verificando se uma chave existe

Você pode verificar se uma determinada chave existe em um objeto com o método hasOwnProperty.

const obj = { greeting: 'hello world' };

obj.hasOwnProperty('greeting');
// => true

obj.hasOwnProperty('age');
// => false

hasOwnProperty retorna false para chaves herdadas. Normalmente, esse é o comportamento desejado. Se você quiser incluir as chaves herdadas na verificação de existência, pode usar o operador in.

Percorrendo um objeto

Existe um laço for...in especial para iterar sobre todas as chaves de um objeto.

const obj = {
  name: 'Ali',
  age: 65,
};

for (let key in obj) {
  console.log(key, obj[key]);
}
// name Ali
// age 65

Pode parecer que o for...in sempre visita as chaves na ordem em que elas aparecem ou foram adicionadas ao objeto (ordem de inserção). Ainda assim, você não deve contar com isso, porque há casos especiais em que a ordem será diferente da ordem de inserção. Sempre escreva seu código como se a ordem fosse arbitrária. Se você precisa de uma ordem confiável, use um Map ou um [array][concept-arrays] aninhado em vez de um objeto.

O laço for…in tem uma armadilha caso o objeto tenha chaves herdadas. Elas também serão visitadas pelo laço for…in. Você geralmente quer evitar isso, então precisa ignorá-las, como mostrado abaixo.

for (let key in obj) {
  if (!obj.hasOwnProperty(key)) {
    continue;
  }
  // ...
}

JavaScript também tem um laço for...of, por exemplo para iterar sobre arrays. É importante notar que for...in e for...of não são intercambiáveis; veja a documentação da MDN para detalhes sobre isso.

Chaves, valores e entradas

O objeto embutido Object fornece métodos auxiliares para recuperar todas as chaves, os valores ou as entradas de um determinado objeto como arrays.

const obj = {
  name: 'Ali',
  age: 65,
};

Object.keys(obj);
// => [ 'name', 'age' ]

Object.values(obj);
// => [ 'Ali', 65 ]

Object.entries(obj);
// => [ [ 'name', 'Ali' ], [ 'age', 65 ] ]

Objeto realmente vazio

Você talvez tenha notado que um objeto vazio em JavaScript não é completamente vazio. Por exemplo, ele contém o método hasOwnProperty e outros métodos como toString. Normalmente, isso não causa nenhum problema, mas se você algum dia precisar criar um objeto realmente vazio, use um objeto nulo, que pode ser criado com Object.create(null).