En este artículo vamos a continuar nuestro manual de ES6 explicando algunas de las mejoras que ECMAScript 2015 (ES6) ha introducido en el lenguaje Javascript. En este caso le toca el turno a los literales de objeto.

Veremos varias mejoras, casi todas "azucar sintático", a la hora de escribir objetos, sus propiedades, métodos, valores, etc. Es una lección fácil de aprender pero que puede mejorar un tanto la agilidad con la que escribes código, a la vez de introducir nuevas posibilidades que antes no existían.

Supongo que a estas alturas no hay necesidad de mencionarlo, pero por si alguien se ha perdido, un literal de objeto no es más que un objeto escrito directamente en el código. Algo muy típico en la programación Javascript, que nos permite crear objetos indicado su valor y sin la necesidad de utilizar clases como "molde".

var literalObjeto = {
  campo: "valor",
  meGustaDesarrolloWeb: true, 
  matriz: [ 1, 2, 5 ],
  metodo: function() {
    console.log('Esto es un método')
  }
}

Puedes encontrar más información sobre esto en el artículo literales de objeto en Javascript.

Nueva manera de escribir métodos

Una de las mejoras consiste en la posibilidad de resumir la escritura de métodos de los objetos literales. Con esta nueva sintaxis nos ahorramos la palabra "function", quedando de esta manera.

let factura = {
  id: 'A2016-156',
  cliente: 'Nombre del cliente',
  productos: [
    {
      name: 'Bombillas LED',
      precio: 234
    },
    {
      name: 'Tornillos inox',
      precio: 4
    }
  ],
  precio() {
    console.log('calculando precio');
    var precio = 0;
    this.productos.forEach(function(prod){
       precio += prod.precio
    })
    return precio
  }
}

Abreviación de propiedades

Más azúcar sintáctico para la definición de propiedades que responden a un patrón determinado, en el que el nombre de la propiedad es el mismo que la variable donde se guarda su valor. Es más fácil de ver que de explicar. Imagina que tienes ciertas variables:

var nombre = 'Pepe';
var edad = 35;
var saludar = function() {
  alert('hola')
}

Ahora podrías crear un objeto persona usando esas variables como sus propiedades.

var objPersona = {
  nombre: nombre,
  edad: edad,
  saludar: saludar
}

Este código es correcto en ES5 y nos dará como resultado un objeto como este:

{
  edad: 35,
  nombre: "Pepe",
  saludar: function () {
    alert('hola')
  }
}

Hasta ahí nada nuevo. Sin embargo, ahora en ES6 podemos resumir esa declaración del objeto, ya que el nombre de la propiedad corresponde con el nombre de la variable que contiene el valor a asignarle.

La nueva sintaxis para la abreviación de propiedades quedaría de esta manera:

var objPersona = {
  nombre,
  edad,
  saludar
}

Al ver el código, quien está acostumbrado a ES5, seguramente le parecerá que está faltando algo, pero es justamente esa la mejora, con menos código conseguimos lo mismo.

Propiedades con nombres computados

Esto es una nueva característica del lenguaje, aunque no deja de ser algo que podíamos hacer anteriormente de una manera un poco más rebuscada.

Se trata de crear un literal de objeto donde el nombre de una de sus propiedades es conmutado, es decir, una o varias de sus propiedades tienen nombres que son definidos en función del contenido de variables, en tiempo de ejecución.

El siguiente ejemplo te muestra lo que queremos decir. A través de las variables construimos un objeto, donde los nombres de las propiedades se generan a partir de los valores de esas variables.

var elemento = 'agua'
var modalidad = 'mariposa'
function deporte(){
   return 'natacion'
}

var registroDeporte = {
  [deporte()]: elemento,
  [modalidad + '100m']: 'Esta es la modalidad de 100 metros mariposa',
  [modalidad + '200m']: 'Esta es la modalidad de 200 metros mariposa',
}

Esto produciría un objeto como el siguiente:

{
  mariposa100m: "Esta es la modalidad de 100 metros mariposa",
  mariposa200m: "Esta es la modalidad de 200 metros mariposa",
  natacion: "agua"
}

En ES5 podríamos conseguir lo mismo, pero la sintaxis queda un poco más extraña, ya que necesitamos crear las propiedades accediendo a ellas como si fuera un array. Para ello primero debemos crear un objeto vacío y a continuación generamos sus propiedades.

var registroDeporte = {}
registroDeporte[deporte()] = elemento
registroDeporte[modalidad + '100m'] = 'Esta es… 100 metros mariposa'
registroDeporte[modalidad + '200m'] = 'Esta es… 200 metros mariposa'

El resultado sería de nuevo el mismo objeto de antes.

Esto quizás puede parecer una tontería, pero los que están acostumbrados a usar Javascript seguro que han tenido que hacer cosas rebuscadas para poder generar al vuelo propiedades en objetos con nombres computados. Es decir, de una manera cómoda nuestros objetos podrán tener propiedades de cualquier nombre que se necesite, aunque desconozca de antemano esos nombres y solo los pueda calcular en tiempo de ejecución.

Conclusión

Estas posibilidades de Javacript en ES6 nos facilitan bastante la escritura de código con objetos literales, ahorrando caracteres y permitiendo una lectura más rápida a los ojos del hombre. Merece la pena tenerlas en cuenta y usarlas siempre que podamos.