Seleccionar página
Cuando se produjo la aparición de las clases en ECMAScript 2015 (ES6) parecía que una oleada de nuevos desarrollos basados en este modelo se iba a extender por toda la comunidad de programadores Javascript. Por fin se podía utilizar una forma expresiva y clara para construir clases, en vez de usar los, para muchos, engorrosos prototipos.

Se argumentó -no sin razón- que las clases son sólo azúcar sintáctico en Javascript, pero se ha demostrado que la sintaxis de clases planteado funciona bien y es mucho más cómoda que los mecanismos anteriores, aun siendo compatibles unos con otros, lo cual también tiene su mérito.

Aunque quizás su extensión ha sido menor de lo que inicialmente se podía esperar, lo cierto es que se ha difundido de forma natural y es ampliamente usado por muchos frameworks front basados en componentes, aunque es prácticamente ignorado en el mundo back, donde la gestión de estado habitual en un modelo de clases no es tan bien acogida.

Con el paso del tiempo hay un buen soporte en los navegadores modernos y en las versiones actuales de NodeJS (kangax) y la posibilidad de utilizar Babel o cualquier otro transpilador para generar código compatible con navegadores antiguos, hace que no hay excusas para la evitar el uso de clases.

Quizás el mayor problema para su completa implantación ha sido la falta de tradición en la comunidad Javascript en el uso de clases. En general el código que podemos observar en los paquetes, librerías y frameworks publicados está basado en funciones, dejando el uso de clases acotado -en general- a algunos componentes.

Aunque no es muy buena idea hacer predicciones en tecnología -casi siempre se falla- lo cierto es que en los próximos meses vamos a ver aparecer una serie de nuevas funcionalidades en las clases de Javascript que seguramente produzca un nuevo impulso en su difusión. Hay un buen conjunto de propuestas al TC39 que incluyen novedades relacionadas con las clases:

Básicamente lo que nos proponen es:

La posibilidad de definir propiedades directamente en el cuerpo de la clase y no tener que utilizar el constructor para ello:

class Counter extends HTMLElement {
  x = 0;

  clicked() {
    this.x++;
    window.requestAnimationFrame(this.render.bind(this));
  }

  constructor() {
    super();
    this.onclick = this.clicked.bind(this);
  }

  connectedCallback() { this.render(); }

  render() {
    this.textContent = this.x.toString();
  }
}
window.customElements.define('num-counter', Counter);

La posibilidad de definir y acceder a miembros privados por medio de un nombre que empiece por #, es decir, propiedades o métodos, estáticos o del objeto, sólo se pueden acceder dentro de los métodos de la clase:

class Counter extends HTMLElement {
  #xValue = 0;

  get #x() { return #xValue; }
  set #x(value) {
    this.#xValue = value; 
    window.requestAnimationFrame(this.#render.bind(this));
  }

  #clicked() {
    this.#x++;
  }

  constructor() {
    super();
    this.onclick = this.#clicked.bind(this);
  }

  connectedCallback() { this.#render(); }

  #render() {
    this.textContent = this.#x.toString();
  }
}
window.customElements.define('num-counter', Counter);

La posibilidad de utilizar decoradores, una muy potente herramienta que permite modificar las clases y sus propiedades incorporando nuevos comportamientos, haciendo mucho más estructurada la distribución de responsabilidades en nuestro código.

import { defineElement, observer, bound } from './mydecorators.js';

@defineElement('num-counter')
class Counter extends HTMLElement {
  @observed #x = 0;

  @bound
  #clicked() {
    this.#x++;
  }

  constructor() {
    super();
    this.onclick = this.#clicked;
  }

  connectedCallback() { this.render(); }

  @bound
  render() {
    this.textContent = this.#x.toString();
  }
}

Aunque algunas quizás no seamos capaces de dislumbrar la importancia de algunas de estas funcionalidades (los decoradores son una aportación de gran potencial) o no nos terminen de gustar algunas de las opciones utilizadas (hay quien aborrece el uso de # para los miembros privados), si parece que 2019 es el año donde las clases en Javascript van a dar un nuevo paso hacia adelante.

Novedades

Limitar el tamaño de un Map

Limitar el tamaño de un objeto Map no parece una idea muy razonable, pero cuando tu programa se ejecuta sin interrupción durante días, semanas, meses e inclusos años, es muy importante controlar el tamaño de la memoria utilizada para evitar problemas inesperados. Una simple función memoize puede llegar a almacenar mucha más información de la que puedes pensar. Aquí te contamos como limitar el tamaño de un objeto Map para estas situaciones.

Cómo conseguir un objeto Map ordenado

Mantener un objeto Map con su contenido ordenado no es algo tan sencillo como parece. Por defecto, Map guarda los datos en el mismo orden en el que han sido creados en el objeto. Para conseguir que el contenido se muestre ordenado tendremos que explorar varias interesantes alternativas que nos descubrirán algunas de características interesantes de estas estructuras de datos.

¿Es una función nativa de Javascript?

Comprobar si una determinada función es una función nativa de Javascript o es una función escrita en código es algo más complicado de lo que pueda parecer a primera vista. No hay grandes diferencias entre una función nativa y una escrita por nosotros, por lo que tenemos que buscar mecanismos algo indirectos para poder diferenciarlas.