Extensões de sintaxe literal de objeto no ES6

Resumo : neste tutorial você aprenderá sobre as extensões de sintaxe do objeto literal no ES6 que tornam seu código mais limpo e flexível.

O objeto literal é um dos padrões mais populares para a criação de objetos em JavaScript devido à sua simplicidade. ES6 torna o objeto literal mais sucinto e poderoso, estendendo a sintaxe de algumas maneiras.

Abreviação do inicializador de propriedade do objeto

Antes do ES6, um literal de objeto era uma coleção de pares nome-valor. Por exemplo:

function createMachine(name, status) {
    return {
        name: name,
        status: status
    };
}Linguagem de código:  JavaScript  ( javascript )

A createMachine() função recebe dois argumentos namee status retorna um novo objeto literal com duas propriedades: namee status.

As propriedades namee statusassumem os valores dos parâmetros namee status. Esta sintaxe parece redundante porque nameé statusmencionada duas vezes nas propriedades namee value.

ES6 permite eliminar 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 createMachine()função no ES6 da seguinte maneira:

function createMachine(name, status) {
    return {
        name,
        status
    };
}Linguagem de código:  JavaScript  ( javascript )

Internamente, quando uma propriedade de um objeto literal possui apenas um nome, o mecanismo JavaScript procura uma variável com o mesmo nome no escopo circundante. Se o mecanismo JavaScript puder encontrar um, ele atribuirá à propriedade o valor da variável.

Neste exemplo, o mecanismo JavaScript atribui os valores de propriedade e dos nameargumentos e .statusnamestatus

Da mesma forma, você pode construir um literal de objeto a partir de variáveis ​​locais, conforme mostrado no exemplo a seguir:

let name = 'Computer',
    status = 'On';

let machine = {
   name,
   status
};Linguagem de código:  JavaScript  ( javascript )

Nome da propriedade computada

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 literais de string e variáveis ​​como nomes de propriedades.

Veja o exemplo a seguir:

let name = 'machine name';
let machine = {
    [name]: 'server',
    'machine hours': 10000
};

console.log(machine[name]); // server
console.log(machine['machine hours']); // 10000Linguagem de código:  JavaScript  ( javascript )

A namevariável foi inicializada com um valor de 'machine name'. Como ambas as propriedades do machineobjeto contêm um espaço, você só pode referenciá-las usando colchetes.

No ES6, o nome da propriedade computada faz parte da sintaxe literal do objeto e usa a notação de colchetes.

Quando um nome de propriedade é colocado entre colchetes, o mecanismo JavaScript o avalia como uma string. Isso significa que você pode usar uma expressão como nome de propriedade. Por exemplo:

let prefix = 'machine';
let machine = {
    [prefix + ' name']: 'server',
    [prefix + ' hours']: 10000
};

console.log(machine['machine name']); // server
console.log(machine['machine hours']); // 10000
Linguagem de código:  JavaScript  ( javascript )

As machinepropriedades do objeto são avaliadas como 'machine name'e 'machine hours', portanto, você pode referenciá-las como propriedades do machineobjeto.

Sintaxe concisa do método

Antes do ES6, ao definir um método para um objeto literal, você precisa especificar o nome e a definição completa da função conforme mostrado no exemplo a seguir:

let server = {
	name: "Server",
	restart: function () {
		console.log("The" + this.name + " is restarting...");
	}
};Linguagem de código:  JavaScript  ( javascript )

ES6 torna a sintaxe para tornar um método do objeto literal mais sucinta, removendo os dois pontos (:) e a functionpalavra-chave.

O exemplo a seguir reescreve o serverobjeto acima usando a sintaxe ES6.

let server = {
    name: 'Server',
    restart() {
        console.log("The" + this.name + " is restarting...");
    }
};Linguagem de código:  JavaScript  ( javascript )

Essa sintaxe abreviada também é conhecida como sintaxe de método conciso . É válido ter espaços no nome da propriedade. Por exemplo:

let server = {
    name: 'Server',
    restart() {
        console.log("The " + this.name + " is restarting...");
    },
    'starting up'() {
        console.log("The " +  this.name + " is starting up!");
    }
};

server['starting up']();Linguagem de código:  JavaScript  ( javascript )

Neste exemplo, o método 'starting up'possui espaços em seu nome. Para chamar o método, você usa a seguinte sintaxe:

object_name['property name']();Linguagem de código:  CSS  ( css )

Neste tutorial, você aprendeu como usar algumas novas extensões de sintaxe literal de objeto no ES6, incluindo abreviação do inicializador de propriedade, propriedades computadas e sintaxe de método concisa.