En el apartado de novedades sobre objetos en el Manual de ES6 nos queda por ver una herramienta disponible en los objetos que se llama "computed property" y nos puede servir para generar propiedades en los objetos tengan nombres calculadas durante la ejecución de los programas. Veremos qué es en este artículo y pondremos algunos ejemplos para que se entienda perfectamente.

Para que puedas aprender qué es una computed property en Javascript y cómo usarlas hemos cubierto estos puntos.

• Qué es una computed property
• Por qué necesitamos las computed properties
• No confundir con los getters de Javascript
• Getters computados con computed properties
• Conclusión

Qué es una computed property

Las propiedades computadas o "computed property" es una de las novedades del lenguaje que se introdujo en el estándar EcmaScript 2015, conocido como ES6. Ese estándar hace tiempo que está disponible en todos los navegadores, por lo que ya lo podemos usar de manera segura, incluso sin necesidad de transpilación del código Javascript.

Este tipo de propiedades computadas, o propiedades calculadas, se refiere a la posibilidad de tener nombres de propiedades de objetos cuyos nombres se pueden determinar en tiempo de ejecución.

Veamos un ejemplo de uso de una propiedad computada:

let nombrePropiedadDinamica = "nombre";

let objeto = {
  [nombrePropiedadDinamica]: "Pepito Grillo",
}

Por qué necesitamos las computed properties

Generalmente cuando definimos un objeto en Javascript todas las propiedades tienen nombres expresados de manera literal. Por ejemplo,

const persona = {
  nombre: juan,
  edad: 33,
  intereses: ['pintura', 'deportes'],
}

Pero ahora imagina que quieres crear otras propiedades en el objeto cuya llave esté calculada y definida por una variable.

Cuando decimos "cuya llave esté calculada" nos referimos a los nombres de las propiedades, o nombres de las "claves" o "llaves" de los objetos, entendiendo los objetos como agrupaciones de clave / valor.

Por ejemplo, tenemos la siguiente variable:

const dato = 'educacion';

Y ahora queremos aplicarle al objeto una propiedad nueva con ese valor de la variable dato. Desde siempre, en Javascript puedes usar el objeto ya declarado y los corchetes para generar esa variable una vez el objeto ha sido creado:

persona[dato] = 'universitaria';

Ahora el valor del objeto persona sería el siguiente:

{
  nombre: 'juan',
  edad: 33,
  intereses: ['pintura', 'deportes'],
  educacion: 'universitaria'
}

Esto está perfecto, solo que hemos tenido que crear el objeto y luego asignarle la nueva propiedad. Ahora, gracias a las "computed property" podemos hacer todo este proceso de un único paso, directamente al declarar el literal de objeto.

const dato = 'educacion';

const persona = {
  nombre: 'juan',
  edad: 33,
  intereses: ['pintura', 'deportes'],
  [dato]: 'universitaria'
}

Como puedes ver, no tiene mucho misterio. Sin embargo no es algo conocido por todos los desarrolladores y en algunas ocasiones te puede venir bien aplicarlo.

No confundir con los getters de Javascript

El nombre de "propiedad computada" puede confundirse con otra de las características de Javascript que existen desde siempre, que son los getters.

class Coche {
  constructor(fabricante, modelo) {
    this.fabricante = fabricante;
    this.modelo = modelo;
  }
  
  get denominacion() {
    return `${this.fabricante} ${this.modelo}`; 
  }
}

const miCoche = new Coche('Ford', 'Focus');
console.log(miCoche.denominacion);

En este ejemplo, al mostrar el valor en la consola, mediante miCoche.denominacion obtenemos el valor "Ford Focus".

Estos getters, como digo, los tienes desde siempre en Javascript y ya los hemos explicado en el artículo getters y setters en Javascript. No dejan de ser propiedades cuyos valores están computados o calculados, sin embargo, las computed properties que estamos conociendo en este artículo lo que computan no es el valor, sino el nombre de la propiedad.

Getters computados con computed properties

Y ya que estamos hablando de getters, quiero poner un ejemplo que también es posible de realizar en Javascript cuando los valores de las computed properties los quieres usar en clases que tienen sus getters.

Por ejemplo, quieres usar el nombre de "denominacion" del coche que vimos en el ejemplo anterior como una computed property. Veamos cómo se implementaría esto en Javascript:

const computed = 'denominacionCompleta';

class Coche {
  constructor(fabricante, modelo) {
    this.fabricante = fabricante;
    this.modelo = modelo;
  }
  
  get [computed]() {
    return `${this.fabricante} ${this.modelo}`; 
  }
}

const miCoche = new Coche('Hyundai', 'Kona');
console.log(miCoche.denominacionCompleta);

En este caso el nombre de la propiedad computada se llama 'denominacionCompleta', por ello para acceder al nombre completo del coche haríamos miCoche.denominacionCompleta.

Es decir, get[computed] hace que se cree un getter con el nombre que tenemos en la variable computed. Con ello estamos haciendo el mismo efecto que teníamos en el uso de la computed property en el literal de objeto, pero ahora en el marco de un getter en una clase.

Hay que reconocer que es un poco extraño hacer que los nombres del getter vengan de una cadena de texto, pero la posibilidad está ahí para lo que necesites.

Conclusión

Hemos podido aprender otra de las características de EcmaScript 2015 que puede resultarte útil cuando tengas que crear propiedades dinámicas en Javascript, es decir, propiedades cuyos nombres son dinámicos y se han calculado o generado en tiempo de ejecución durante tu aplicación.

Igual no encuentras hoy demasiada necesidad de crear una computed property pero al menos desde ahora, cuando veas esa sintaxis en Javascript, no te resultará extraña.