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 name
e status
retorna um novo objeto literal com duas propriedades: name
e status
.
As propriedades name
e status
assumem os valores dos parâmetros name
e status
. Esta sintaxe parece redundante porque name
é status
mencionada duas vezes nas propriedades name
e 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 name
argumentos e .status
name
status
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']); // 10000
Linguagem de código: JavaScript ( javascript )
A name
variável foi inicializada com um valor de 'machine name'
. Como ambas as propriedades do machine
objeto 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 machine
propriedades do objeto são avaliadas como 'machine name'
e 'machine hours'
, portanto, você pode referenciá-las como propriedades do machine
objeto.
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 function
palavra-chave.
O exemplo a seguir reescreve o server
objeto 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.