¡Hola! Me parece que andas usando un bloqueador de anuncios =( ¿Nos desbloqueas? ¿Por qué?
F13

Funcion 13

Aprende ES6 - Nuevas adiciones a los objetos literales

Como ya sabrás, en Función 13 estamos embarcados en que aprendas todos los entresijos de ES6. En artículos anteriores hemos hablado sobre let, const y los ámbitos, las funciones flecha, que son realmente útiles, las Promesas y las Clases y cómo podemos usar la Desestructuración. Si esto no te suena de nada y estás intentando ponerle algún sentido a las siglas, ¡no te preocupes! Echa un vistazo a nuestra Introducción a ES6.

Los objetos literales reciben una serie de mejoras, especialmente de sintaxis, que nos permitirán ahorrarnos algunas líneas de código.

Por si la palabra objeto literal te pilla un poco de sorpresa, esto es un objeto literal:

var foo = {  
  bar: 'baz'
};

Es decir, aquellos que son declarados con las llaves directamente. Recuerda que casi todo es un objeto en JavaScript, pero estos son los literales.

Atajos para nombres de propiedades

Siempre que vayas a crear un objeto con una propiedad cuyo nombre coincida con el de una variable, puedes omitir el valor de la propiedad ya que este es implícito. Veamos un rápido ejemplo:

let bar = 'baz';  
let foo = { bar };  
console.log(foo.bar); // baz  

Ten en cuenta que también puedes asignar otras propiedades de la forma habitual:

let bar = 'baz';  
let foo = { bar, qax: 'asd' };  
console.log(foo); // { bar: "baz", qax: "asd" }  

Sin duda esto será muy útil en muchos aspectos aunque es especialmente socorrido en Node.js donde es bastante común este patrón:

let usuarios = [];

function nuevoUsuario(nombre) {  
  let id = usuarios.length + 1;
  let usuario = { id, nombre };

  usuarios.push(usuario);

  return usuario;
}

function obtenerUsuario(id) {  
  return usuarios.find(usuario => usuario.id === id);
}

module.exports = {  
  nuevoUsuario: nuevoUsuario,
  obtenerUsuario: obtenerUsuario
};

Ahora, con ES6 podemos directamente usar esta línea:

module.exports = { nuevoUsuario, obtenerUsuario };  

Otro caso de uso realmente interesante es, teniendo varias variables durante el desarrollo, hay veces que necesitamos verlas todas para ver qué contienen en un punto concreto. Un ejemplo:

const funciona = true;  
const precio = 13.99;  
const nombre = 'Antonio';  
console.log(funciona, precio, nombre);  
// true 13.99 "Antonio"

Poco legible, especialmente problemático cuando estás usando propiedades parecidas como top, offsetTop y demás. Mira cómo podemos mejorarlo:

const funciona = true;  
const precio = 13.99;  
const nombre = 'Antonio';  
console.log({ funciona, precio, nombre });  
/*
{
  funciona: true,
  precio: 13.99,
  nombre: "Antonio"
}
*/

¡Mucho mejor! ¿No te parece?

Nombres de propiedad computados

Ya vimos parte de esto al hablar de desestructuración pero vamos a profundizar un poco más. Veamos un patrón común en JavaScript para usar variables a la hora de acceder a una propiedad:

let propiedad = 'nombre';  
let usuario = {};  
usuario[propiedad] = 'Antonio';  
console.log(usuario); // { nombre: 'Antonio' };  

Con ES6 podemos simplificar un poco:

let propiedad = 'nombre';  
let usuario = { [propiedad]: 'Antonio' };  
console.log(usuario); // { nombre: 'Antonio' };  

Definición de métodos

Es muy habitual el definir métodos en los objetos literales así:

let foo = {  
  bar: function() {
    return 'baz';
  }
};

Ahora no hace falta tanto y podemos olvidarnos de function y de los dos puntos:

let foo = {  
  bar() {
    return 'baz';
  }
}

En resumen

ES6 nos permite declarar objetos literales de manera más resumida facilitándonos atajos para crear propiedades desde variables y a la hora de definir funciones. También nos permite tener claves computadas en la definición. Veamos un ejemplo en conjunto:

function hacerCoche(marca, modelo, precio) {  
    return {
        // gracias al atajo para nombre
    // de propiedad, podemos omitir
    // el valor si la clave coincide
    // con el nombre de la variable
        marca,  // Igual que marca: marca
        modelo, // Igual que modelo: modelo
        precio, // Igual que precio: precio

        // Valor computado
        ['hacer' + marca]: function () {
          console.log('Fabricando ' + marca + ' ' + modelo);
        },

    bajarPrecio() {
      precio = -1000;
    }
    };
}

let coche = hacerCoche('Hyundai', 'i30', 16000);

console.log(coche);  
/*
{
  bajarPrecio: function() { ... };
  hacerHyundai: function() { ... };
  marca: 'Hyundai',
  modelo: 'i30',
  precio: 16000
}
*/
console.log(coche.hacerHyundai()) // Fabricando Hyundai i30  

Programador Front-end en First + Third y Potato. Trabajando con JavaScript y HTML5 desde el corazón de Sevilla.

Comentarios ¡Únete a la conversación!