Como usar métodos Object no JavaScript

Introdução

Os Objetos no JavaScript são coleções de pares chave/valor. Os valores podem consistir em propriedades e métodos e podem conter todos os outros tipos de dados do JavaScript, como strings, números e Booleans.

Todos os objetos no JavaScript descendem do construtor pai ](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)Object[. Object tem muitos métodos embutidos úteis que podemos usar e acessar para tornar o trabalho com objetos individuais em algo simplificado. Diferentemente de métodos protótipos Array como o sort() e o reverse(), que são usados na instância do array, os métodos Object são usados diretamente no construtor Object e utilizam a instância de objeto como um parâmetro. Isso é conhecido como um método estático.

Este tutorial irá analisar importantes métodos de objetos embutidos, com cada seção abaixo tratando de um método específico e fornecendo um exemplo de uso.

Pré-requisitos

Para aproveitar esse tutorial ao máximo, você deve estar familiarizado em criar, modificar e trabalhar com objetos, que pode ser revisto no artigo “Entendendo objetos no JavaScript”.

Para mais orientação com o JavaScript no geral, você pode rever nossa série Como programar em JavaScript.

Object.create()

O método Object.create() é usado para criar um novo objeto e conectá-lo ao protótipo de um objeto existente.

Podemos criar uma instância de objeto job e estendê-la para um objeto mais específico.

// Initialize an object with properties and methods
const job = {
    position: 'cashier',
    type: 'hourly',
    isAvailable: true,
    showDetails() {
        const accepting = this.isAvailable ? 'is accepting applications' : "is not currently accepting applications";

        console.log(`The ${this.position} position is ${this.type} and ${accepting}.`);
    }
};

// Use Object.create to pass properties
const barista = Object.create(job);

barista.position = "barista";
barista.showDetails();

Output
The barista position is hourly and is accepting applications.

Agora, o objeto barista tem uma propriedade — position — mas todas as outras propriedades e métodos do job estão disponíveis pelo protótipo.Object.create()é útil para manter o código DRY minimizando a duplicação.

Object.keys()

O Object.keys() cria um array que contém as chaves de um objeto.

Podemos criar um objeto e imprimir o array de chaves.

// Initialize an object
const employees = {
	boss: 'Michael',
	secretary: 'Pam',
	sales: 'Jim',
	accountant: 'Oscar'
};

// Get the keys of the object
const keys = Object.keys(employees);

console.log(keys);

Output
["boss", "secretary", "sales", "accountant"]

O Object.keys pode ser usado para iterar através das chaves e valores de um objeto.

// Iterate through the keys
Object.keys(employees).forEach(key => {
    let value = employees[key];

	 console.log(`${key}: ${value}`);
});

Output
boss: Michael
secretary: Pam
sales: Jim
accountant: Oscar

O Object.keys também é útil para verificar o comprimento de um objeto.

// Get the length of the keys
const length = Object.keys(employees).length;

console.log(length);

Output
4

Ao usar a propriedade length, conseguimos contar as 4 propriedades de employees.

Object.values()

O Object.values() cria uma array que contém os valores de um objeto.

// Initialize an object
const session = {
    id: 1,
    time: `26-July-2018`,
    device: 'mobile',
    browser: 'Chrome'
};

// Get all values of the object
const values = Object.values(session);

console.log(values);

Output
[1, "26-July-2018", "mobile", "Chrome"]

O Object.keys() e o Object.values() permitem que você retorne dados de um objeto.

Object.entries()

O Object.entries() cria um array aninhado dos pares chave/valor de um objeto.

// Initialize an object
const operatingSystem = {
    name: 'Ubuntu',
    version: 18.04,
    license: 'Open Source'
};

// Get the object key/value pairs
const entries = Object.entries(operatingSystem);

console.log(entries);

Output
[
    ["name", "Ubuntu"]
    ["version", 18.04]
    ["license", "Open Source"]
]

Assim que tivermos os arrays de pares chave/valor, podemos usar o método forEach() para percorrer e trabalhar com os resultados.

// Loop through the results
entries.forEach(entry => {
    let key = entry[0];
    let value = entry[1];

    console.log(`${key}: ${value}`);
});

Output
name: Ubuntu
version: 18.04
license: Open Source

O método Object.entries() irá retornar apenas as propriedades próprias da instância do objeto e não quaisquer propriedades que possam ser herdadas por meio do seu protótipo.

Object.assign()

O Object.assign() é usado para copiar valores de um objeto para outro.

Podemos criar dois objetos e fundi-los com o Object.assign().

// Initialize an object
const name = {
    firstName: 'Philip',
    lastName: 'Fry'
};

// Initialize another object
const details = {
    job: 'Delivery Boy',
    employer: 'Planet Express'
};

// Merge the objects
const character = Object.assign(name, details);

console.log(character);

Output
{firstName: "Philip", lastName: "Fry", job: "Delivery Boy", employer: "Planet Express"}

Também é possível usar o operador de propagação (...) para realizar a mesma tarefa. No código abaixo, vamos modificar como declaramos o character através da fusão dos objetos name e details.

// Initialize an object
const name = {
    firstName: 'Philip',
    lastName: 'Fry'
};

// Initialize another object
const details = {
    job: 'Delivery Boy',
    employer: 'Planet Express'
};

// Merge the object with the spread operator
const character = {...name, ...details}

console.log(character);

Output
{firstName: "Philip", lastName: "Fry", job: "Delivery Boy", employer: "Planet Express"}

Essa sintaxe de propagação em literais de objeto também é conhecida como clonagem superficial (shallow-cloning).

Object.freeze()

O Object.freeze() impede a modificação de propriedades e valores de um objeto e impede que as propriedades sejam adicionadas ou removidas de um objeto.

// Initialize an object
const user = {
	username: 'AzureDiamond',
	password: 'hunter2'
};

// Freeze the object
const newUser = Object.freeze(user);

newUser.password = '*******';
newUser.active = true;

console.log(newUser);

Output
{username: "AzureDiamond", password: "hunter2"}

No exemplo acima, tentamos substituir a senha hunter2 por *******, mas a propriedade password permaneceu a mesma. Também tentamos adicionar uma nova propriedade, active, mas ela não foi adicionada.

O Object.isFrozen() está disponível para determinar se um objeto foi congelado ou não e retorna um Boolean.

Object.seal()

O Object.seal() impede que novas propriedades sejam adicionadas a um objeto, mas permite a modificação de propriedades existentes. Este método é semelhante ao Object.freeze(). Recarregue seu console antes de implementar o código abaixo para evitar um erro.

// Initialize an object
const user = {
	username: 'AzureDiamond',
	password: 'hunter2'
};

// Seal the object
const newUser = Object.seal(user);

newUser.password = '*******';
newUser.active = true;

console.log(newUser);

Output
{username: "AzureDiamond", password: "*******"}

A nova propriedade active não foi adicionada ao objeto selado, mas a propriedade password foi alterada com sucesso.

Object.getPrototypeOf()

O Object.getPrototypeOf() é usado para obter o [[Prototype]] interno oculto de um objeto, também acessível através da propriedade __proto__.

Neste exemplo, podemos criar um array, que tenha acesso ao protótipo Array.

const employees = ['Ron', 'April', 'Andy', 'Leslie'];

Object.getPrototypeOf(employees);

Output
[constructor: ƒ, concat: ƒ, find: ƒ, findIndex: ƒ, pop: ƒ, …]

Podemos ver no resultado que o protótipo do array employees tem acesso aos métodos de protótipo Array pop, find, entre outros. Podemos confirmar isso testando o protótipo employees contra o Array.prototype.

Object.getPrototypeOf(employees) === Array.prototype;

Output
true

Este método pode ser útil para obter mais informações sobre um objeto ou garantir que ele tenha acesso ao protótipo de outro objeto.

Também há um método Object.setPrototypeOf() relacionado que adicionará um protótipo a outro objeto. Ao invés disso, é recomendável que você utilize o Object.create() uma vez que ele é mais rápido e tem maior desempenho.

Conclusão

Os objetos têm muitos métodos úteis que nos ajudam a modificar, proteger e iterar através deles. Neste tutorial, vimos novamente como criar e atribuir novos objetos, iterar através das chaves e/ou valores de um objeto, e congelar ou selar um objeto.

Se você precisar revisar os objetos do JavaScript, leia “Entendendo objetos no JavaScript”. Se quiser se familiarizar com a cadeia de protótipos, você pode olhar “Entendendo protótipos e herança no JavaScript”.