En JavaScript puro y duro no existe la reactividad como la que puedes encontrar en frameworks como React, Vue o Svelte. Definir una variable y que al modificarse se actualize el DOM se puede implementar de varias maneras: crear y llamar manualmente una función que añada el contenido dentro del elemento HTML, usar Object.defineProperty() o usar un JavaScript Proxy.

Este último Proxy JavaScript es el método más moderno y limpio y es el que veremos a continuación.

Si partimos de una estructura HTML mínima:

<div id="salida"></div>

Y el código JavaScript donde ocurre la reactividad:

const estado = new Proxy({ mensaje: '' }, {
  set(objetivo, propiedad, valor) {
    objetivo[propiedad] = valor;

    if (propiedad === 'mensaje') {
      document.getElementById('salida').textContent = valor;
    }

    return true;
  }
});

A partir de este punto, basta con actualizar estado.mensaje para que el contenido del elemento se actualice en pantalla:

estado.mensaje = 'Hola, mundo';

No se ha llamado a ninguna función específica ni se ha modificado el DOM manualmente más allá del Proxy. Todo ocurre de forma automática gracias a la lógica contenida en el interceptor set.

Cómo funciona exactamente

Cuando usamos new Proxy(), creamos un objeto que actúa como intermediario entre el código y el objeto real ({ mensaje: '' }). Al interceptar el método set, tenemos acceso a:

• El objeto original (objetivo).
• La propiedad que se está modificando (propiedad).
• El nuevo valor asignado (valor).

Esto nos permite ejecutar cualquier acción adicional cuando una propiedad concreta cambie. En este caso, actualizamos el contenido del elemento con id="salida" cada vez que se cambia mensaje.

Es importante devolver true al final del interceptor para que la operación se considere válida.

Qué ventajas aporta

Esta solución resulta útil cuando queremos añadir un comportamiento reactivo sin introducir dependencias externas. Algunas características relevantes:

• Código conciso y fácil de mantener
• Control total sobre cuándo y cómo se actualiza la interfaz
• No requiere estructuras adicionales ni clases

También podemos ampliar esta lógica para reaccionar a múltiples propiedades o componentes del DOM, o incluso encadenar efectos según el valor asignado.

Resumen

Usar un Proxy en JavaScript nos permite crear una forma sencilla de reactividad orientada a actualizar el DOM. Hemos definido una estructura mínima que reacciona al cambio de un valor y actualiza automáticamente un elemento sin necesidad de manipulación manual cada vez.

Esto nos ayuda a comprender cómo se puede construir una interfaz dinámica a partir de conceptos del propio lenguaje, y sienta las bases para introducir ideas más avanzadas cuando el proyecto lo requiera, además de conocer de forma simple las técnicas que usan estos frameworks JavaScript.