Propriedades do objeto Javascript em detalhes

Neeraj Dana Segue 10 de jul · 4 min ler

O ECMAScript 6 adicionou vários aprimoramentos aos literais de objeto como parte do açúcar sintático do ES6 . O ES6 adicionou três maneiras de simplificar a criação de literais de objeto. Essas simplificações incluem uma sintaxe mais concisa para inicializar propriedades de objeto de variáveis, uma sintaxe mais concisa para definir métodos de função e nomes de propriedades de objetos calculados.

Nota

O açúcar sintático é uma sintaxe projetada para facilitar a leitura e a expressão das expressões. Isso torna a sintaxe mais "doce" porque o código pode ser expresso de forma concisa.

Propriedades do Objeto

O atalho para inicializar as propriedades do objeto permite criar objetos mais concisos. No ES5, precisávamos definir as propriedades do objeto com um nome de chave e um valor, conforme mostrado no código a seguir:

 function getPersionES5 (nome, idade, altura) {return {nome: nome, idade: idade, altura: altura}; } getPersionES5 ('Zachary', 23, 195) // Produção esperada: {name: 'Zachary', idade: 23, altura: 195} 

Observe a repetição no literal do objeto retornado pela função. Nós nomeamos a propriedade no objeto após o nome da variável causando duplicação ( <code> name: name </ code> ). No ES6, podemos reduzir cada propriedade e remover a repetição. No ES6, podemos simplesmente declarar a variável na declaração literal do objeto e ela criará uma propriedade com uma chave que corresponda ao nome da variável e um valor que corresponda ao valor da variável. Isso é mostrado no código a seguir:

 function getPersionES6 (nome, idade, altura) {return {nome, idade, altura}; } getPersionES6 ('Zachary', 23, 195) // Produção esperada: {name: 'Zachary', idade: 23, altura: 195} 

Como você pode ver, os exemplos ES5 e ES6 produzem exatamente o mesmo objeto. No entanto, em uma declaração literal de objeto grande, podemos economizar muito espaço e repetição usando essa nova abreviação.

Declarações de Função

O ES6 também adicionou um atalho para declarar métodos de função dentro de objetos. No ES5, tivemos que declarar o nome da propriedade e defini-la como uma função. Isso é mostrado no exemplo a seguir:

 function getPersonES5 (nome, idade, altura) {return {nome: nome, altura: altura, getAge: function () {return age; }}; } getPersonES5 ('Zachary', 23, 195) .getAge () // Saída esperada: 23 

No ES6, podemos definir uma função, mas com muito menos trabalho. Como na declaração de propriedade, não precisamos de um par de chave e valor para criar a função. O nome da função torna-se o nome da chave. Isso é mostrado no código a seguir:

 function getPersionES6 (nome, idade, altura) {return {nome, altura, getAge () {idade do retorno; }}; } getPersionES6 ('Zachary', 23, 195) .getAge () // Saída esperada: 23 

Observe a diferença na declaração da função. Omitimos a palavra-chave da função e os dois pontos após o nome da chave da propriedade. Mais uma vez, isso nos poupa um pouco de espaço e simplifica um pouco as coisas.

Propriedades computadas

O ES6 também adicionou uma maneira nova e eficiente de criar nomes de propriedades a partir de variáveis. Isso é por meio da notação de propriedade calculada. Como já sabemos, no ES5, existe apenas uma maneira de criar uma propriedade dinâmica cujo nome é especificado por uma variável; isso é através da notação de colchetes, isto é : obj [expression] = 'value' . No ES6, podemos usar esse mesmo tipo de notação durante a declaração do literal do objeto. Isso é mostrado no exemplo a seguir:

 const varName = 'firstName'; 
const person = {[varName] = 'João', sobrenome: 'Smith'}; console.log (person.firstName); // Saída esperada: John

Como podemos ver no snippet anterior, o nome da propriedade varName foi calculado como firstName . Ao acessar a propriedade, simplesmente a referenciamos como person.firstName . Ao criar propriedades calculadas em literais de objeto, o valor computado nos colchetes não precisa ser uma variável; pode ser quase qualquer expressão, até mesmo uma função. Um exemplo disso é mostrado no código a seguir:

 const varName = 'primeiro'; 
função computeNameType (type)
{tipo de retorno + 'Nome'; }
const pessoa = {[varName + 'Nome'] = 'João',
[computeNameType ('last')]: 'Smith'};

console.log (person.firstName); // Saída esperada: John console.log (person.lastName); // Saída esperada: Smith

No exemplo mostrado no fragmento anterior, criamos duas variáveis. O primeiro contém a string primeiro e o segundo contém uma função que retorna uma string. Em seguida, criamos um objeto e usamos a notação de propriedade calculada para criar nomes de chaves de objetos dinâmicos. O primeiro nome da chave é igual a firstName . Quando person.firstName é acessado, o valor que foi salvo será retornado. O segundo nome da chave é igual a lastName . Quando person.lastName é acessado, o valor que foi salvo será retornado.

Em resumo, o ES6 adicionou três maneiras de simplificar a declaração de literais de objeto, isto é, notação de propriedade, notação de função e propriedades calculadas. Para simplificar a criação de propriedades em objetos, quando propriedades são criadas a partir de variáveis, podemos omitir o nome da chave e os dois pontos. A propriedade de nome criada é configurada para o nome da variável e o valor é configurado para o valor da variável. Para adicionar uma função como propriedade a um objeto, podemos omitir a palavra-chave de cólon e função. O nome da propriedade que é criada é configurado para o nome da função e o valor da propriedade é a própria função. Finalmente, podemos criar nomes de propriedade a partir de expressões computadas durante a declaração do literal do objeto. Nós simplesmente substituímos o nome da chave pela expressão entre colchetes. Essas três simplificações podem economizar espaço em nosso código e facilitar a leitura da criação literal de objetos.