GlobalThis en JavaScript: Accede al Objeto Global en Diferentes Entornos

En JavaScript el objeto global es un concepto clave, ya que actúa como el contenedor para todas las variables y funciones globales. Sin embargo, antes de ES2020, acceder al objeto global de forma consistente era un desafío, ya que su nombre varía dependiendo del entorno en el que se esté ejecutando el código. globalThis en JavaScript se creo para resolver este problema, una forma estándar y segura de acceder al objeto global en cualquier entorno.

En este artículo exploraremos qué es globalThis, por qué fue introducido en JavaScript, cómo funciona en diferentes entornos y por qué es importante para escribir código más portable y compatible.

¿Qué es el Objeto Global en JavaScript?

El objeto global es un objeto especial que existe en todos los entornos JavaScript y que contiene todas las variables y funciones del lenguaje. Dependiendo del entorno el nombre del objeto global puede cambiar:

• En un navegador, el objeto global es window.
• En un entorno Node.js, el objeto global es global.
• En Web Workers, no existe window, pero sí un objeto global específico para ese entorno.

El problema es que dependiendo del entorno en el que se ejecute el código, el nombre del objeto global varía, lo que puede hacer que el código que funciona en un entorno (un navegador) no funcione en otro (Node.js) sin ajustes adicionales.

El problema antes de globalThis:

// En un navegador:
console.log(window === this);  // true

// En Node.js:
console.log(global === this);  // true

Antes de la introducción de globalThis, los desarrolladores debían realizar verificaciones adicionales para determinar en qué entorno se ejecutaba su código y acceder al objeto global de manera adecuada. Esto hacía que el código fuera menos portátil y más difícil de mantener.

¿Qué es globalThis?

Esta una nueva característica introducida en ES2020 que proporciona una referencia uniforme al objeto global en cualquier entorno. Ya sea que estés en un navegador, Node.js o un Web Worker, globalThis siempre hace referencia al objeto global, lo que elimina la necesidad de escribir código específico para cada plataforma.

console.log(globalThis);  // En cualquier entorno, esto apunta al objeto global

Con globalThis, ahora puedes acceder al objeto global de manera confiable, independientemente de si estás en un navegador, en Node.js o en cualquier otro entorno JavaScript. Esto hace que tu código sea mucho más portable y fácil de mantener.

¿Cómo funciona globalThis en JavaScript y sus entornos?

1. En navegadores: En los navegadores, globalThis apunta al objeto window, que es el objeto global estándar en este entorno. Todas las variables globales y funciones que defines en un script se convierten en propiedades del objeto window.
2. En Node.js: En un entorno Node el objeto global es llamado global, pero con la introducción de globalThis, ahora puedes usar este nuevo identificador para referirte al objeto global de manera uniforme.
3. En Web Workers: En este entorno no existe el objeto window, pero aún tienes acceso a un objeto global específico del trabajador. Con globalThis, puedes acceder fácilmente al objeto global en este contexto también.

Ventajas de Usar globalThis

Uno de los mayores beneficios de usar globalThis es que hace que tu código sea más portable. Ya no tienes que preocuparte por verificar el entorno para acceder al objeto global. Esto es especialmente importante si estás desarrollando bibliotecas o aplicaciones que deben ejecutarse en múltiples entornos.

Uniformidad y simplicidad: Antes de globalThis, era común ver código como este para acceder al objeto global de manera compatible:

const globalObject = typeof window !== 'undefined' ? window :
                    typeof global !== 'undefined' ? global :
                    typeof self !== 'undefined' ? self : {};

Con globalThis, ya no es necesario escribir código como este. Ahora puedes acceder al objeto global con una sola referencia:

const globalObject = globalThis;

Evita problemas de compatibilidad: Antes de globalThis, el uso de diferentes nombres para el objeto global podía causar problemas de compatibilidad entre entornos, especialmente en código compartido entre el navegador y Node.js. globalThis resuelve este problema al proporcionar un único punto de acceso al objeto global, independientemente del entorno.

Uso de globalThis en la Práctica

Supongamos que estás desarrollando una biblioteca de JavaScript que debe funcionar tanto en navegadores como en Node.js. Sin globalThis, tendrías que escribir código específico para cada entorno para acceder al objeto global. Sin embargo, con globalThis, puedes escribir código una vez y ejecutarlo en cualquier entorno sin problemas.

function registrarVariableGlobal(nombre, valor) {
    globalThis[nombre] = valor;
}

registrarVariableGlobal('miVariableGlobal', 42);
console.log(globalThis.miVariableGlobal);

42

En este ejemplo, la función registrarVariableGlobal() añade una variable al objeto global usando globalThis, lo que garantiza que el código funcione en cualquier entorno.

Compatibilidad de globalThis

globalThis es una característica relativamente nueva en JavaScript, introducida en ES2020. Aunque la mayoría de los navegadores modernos y entornos como Node.js lo soportan, es posible que algunos navegadores antiguos o entornos más antiguos no lo soporten.

Solución para entornos sin soporte de globalThis

Si estás desarrollando para entornos que no soportan globalThis, puedes usar un polyfill para garantizar la compatibilidad:

if (typeof globalThis === 'undefined') {
  (function() {
    Object.defineProperty(Object.prototype, '__globalThis', {
      get: function() {
        return this;
      },
      configurable: true
    });
    __globalThis.globalThis = __globalThis;
    delete Object.prototype.__globalThis;
  })();
}

Este código crea un polyfill que proporciona globalThis en cualquier entorno que no lo soporte de manera nativa.

Conclusión

Con el globalThis en JavaScript se da una solución elegante y simple a un problema de larga data en el lenguaje, cómo acceder de manera consistente al objeto global en diferentes entornos. Con esta funcionalidad ya no es necesario escribir código específico para cada plataforma, lo que simplifica el desarrollo y hace que tu código sea más portable y fácil de mantener.

En el siguiente artículo, exploraremos en detalle las propiedades de los objetos en JavaScript y sus atributos, como la enumerabilidad, configurabilidad y mucho más.