Signals en JavaScript

En programación orientada a eventos un signal permite guardar un valor y reaccionar a cambios ejecutando funciones mediante subscripciones.

signals

¿Qué es un Signal en JavaScript?

Un signal en JavaScript es un concepto usado para representar un valor que cambia en el tiempo y cuando cambia ejecuta código automáticamente definido. Aunque es un término que ha ganado popularidad últimamente con frameworks como SolidJS, Preact o Angular, el concepto se puede aplicar en JavaScript puro.

La implementación es muy sencilla. Podemos crear una clase Signal que siga la estructura de un Getter/Setter, modificándo el método set ligeramente para que además de asignar el valor que se le pasa por parámetro, también ejecute las funciones que se han suscrito. La subscripción se hace con el método subscribe que simplemente es un Array de funciones.

class Signal {
constructor(initialValue) {
this.value = initialValue;
this.subscribers = [];
}
get() {
return this.value;
}
set(newValue) {
this.value = newValue;
this.subscribers.forEach(fn => fn(newValue));
}
subscribe(callback) {
this.subscribers.push(callback);
}
}
const count = new Signal(0);
count.subscribe(newValue => {
console.log(`Count updated to: ${newValue}`);
});
count.set(1);
count.set(2);
console.log(`Current count: ${count.get()}`);

En este ejemplo se crea un nuevo Signal de valor 0 y luego se añade una subscripción con una función que indica con qué valor se ha actualizado el Signal. Luego se llama dos veces set haciendo que por cada uno se ejecute la función suscrita.

Resumen

Hemos visto qué es un Signal y cómo funciona y hemos implementado un ejemplo simple. Los Signals pueden tener mucha utilidad, desde actualizar automáticamente la interfaz de usuario cuando cambian los datos, como un contador de likes, notificaciones en tiempo real, o el estado de un formulario hasta para mantener sincronizados diferentes componentes de una aplicación.