Extensões da sintaxe de literal de objetos na versão ES6 do JavaScript
Neste tutorial você aprenderá as extensões da forma de sintaxe literal de objetos que tornam o seu código mais limpo e flexível.
English version: https://www.javascripttutorial.net/es6/object-literal-extensions/
A forma literal de objeto é um dos padrões mais populares para a criação de objetos no JavaScript devido a sua simplicidade. A versão ES6 do JavaScript torna o objeto literal mais sucinto e poderoso ao estender a sintaxe de algumas maneiras.
Abreviação do inicializador de propriedades do objeto
Antes da versão ES6, um literal de objeto é uma coleção de pares de nome:valor. Por exemplo:
A função createMachine() recebe dois argumentos, name e status, e retorna um novo literal de objeto com suas propriedades: name e status.
As propriedades name e status assumem os valores dos parâmetros de name e status. Essa sintaxe parece redundante porque o name e o status são mencionados duas vezes no nome e no valor das propriedades.
A versão ES6 permite que você elimine a duplicação quando uma propriedade de um objeto é igual ao nome da variável local, incluindo o nome sem dois pontos e valor.
Por exemplo, você pode reescrever a função createMachine() com recursos da versão ES6 do JavaScript dessa forma:
Internamente, quando uma propriedade de um literal de objeto tem apenas um nome, o motor JavaScript procura por essa variável com o mesmo nome no escopo circundante. Se encontrar uma, atribui à propriedade o valor da variável.
Neste exemplo, o motor JavaScript atribui as propriedades name e status recebem os valores vindos dos argumentos name e status.
Da mesma forma, você pode construir um literal de objeto a partir de variáveis locais, conforme mostrado no próximo exemplo:
Nome de propriedade computadas
Antes do ES6, você podia usar colchetes [] para habilitar os nomes de propriedades computadas para as propriedades dos objetos.
Os colchetes permitem que você use os literais de string e variáveis como nomes de propriedades.
Veja o seguinte exemplo:
A variável name foi iniciada com o valor 'machine name'. Como ambas as propriedades do objeto machine contêm um espaço, você só pode fazer referência a elas usando colchetes.
Na versão ES6 do JavaScript, o nome da propriedade computada é uma parte da sintaxe literal do objeto e usa a notação de colchetes.
Quando um nome de propriedade é colocado entre colchetes, o motor JavaScript o avalia como uma string, o que significa que você pode usar uma expressão para uma propriedade. Por exemplo:
As propriedades do objeto machine são avaliadas como 'machine name' e 'machine hours', portanto, você pode referenciá-las como as propriedades do objeto machine.
Sintaxe Concisa de Método
Antes do ES6, ao definir um método para um literal de objeto, você precisava especificar o nome e a definição completa da função, conforme mostrado no exemplo a seguir:
A versão ES6 torna a sintaxe para criar um método do objeto literal mais sucinta, removendo os dois pontos : e a palavra reservada function.
Essa sintaxe abreviada também é conhecida como Sintaxe Concisa de Método. É válido ter espaços no nome da propriedade, por exemplo:
Neste exemplo o método 'starting up'() possui espaços em seu nome. Para chamá-lo você usa a seguinte sintaxe:
Neste tutorial você aprendeu como usar algumas novas extensões de sintaxe literal de objetos da versão ES6, incluíndo abreviatura de inicializador de propriedade, propriedades computadas e sintaxe concisa de métodos.
Mais tutoriais sobre a versão ES6 do JavaScript
Confira uma série de outros tutoriais sobre a versão ES6 JavaScript que eu escrevi, clicando no link abaixo:
Veja o índice de todos os tutoriais JavaScript
Confira uma série de outros tutoriais JavaScript que eu escrevi, clicando no link abaixo: