GlobalThis en JavaScript: Accede al Objeto Global en Diferentes Entornos

El concepto del objeto global en JavaScript es importante, ya que actúa como el contenedor para todas las variables y funciones definidas como globales. Sin embargo, antes de ES2020, acceder al objeto global de forma consistente era un desafío, ya que su nombre variaba según el entorno en el que se ejecutaba el código.

La introducción de globalThis en JavaScript solucionó este problema. Es una forma estándar y segura de acceder al objeto global en cualquier entorno, lo que facilita la escritura de código portable y compatible. En este artículo, exploraremos qué es globalThis, cómo funciona en diferentes entornos, y cómo aprovecharlo en proyectos modernos.

¿Qué es el objeto global en JavaScript?

El objeto global es un objeto especial que existe en todos los entornos de JavaScript y que contiene todas las variables y funciones globales. Dependiendo del entorno, su nombre varía:

• 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 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?

globalThis es una nueva característica introducida en ES2020 que proporciona una referencia uniforme al objeto global en cualquier entorno. Ya sea en un navegador, Node.js o un Web Worker, globalThis apunta siempre al objeto global, eliminando la necesidad de verificaciones específicas para cada entorno.

console.log(globalThis); // Apunta al objeto global en cualquier entorno

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 necesita registrar variables en el objeto global. Antes de globalThis debías manejar cada entorno de forma manual. Con globalThis, el código es más simple:

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

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

Este enfoque asegura que tu código funcione en cualquier entorno sin necesidad de ajustes adicionales.

Compatibilidad de globalThis

Aunque globalThis es una característica moderna. la mayoría de los navegadores modernos y entornos de Node.js lo soportan. Sin embargo, para entornos más antiguos, puedes usar un polyfill para garantizar compatibilidad.

Solución para entornos sin soporte de globalThis

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

Este código asegura que globalThis esté disponible incluso en entornos que no lo soportan nativamente.

Conclusión

globalThis resuelve un problema de larga data en JavaScript al proporcionar una referencia consistente al objeto global en cualquier entorno. Esto simplifica el desarrollo de aplicaciones y bibliotecas que deben ejecutarse en diferentes plataformas, haciéndolas más portables y fáciles de mantener.

Si bien su adopción depende del soporte del entorno, los desarrolladores pueden usar polyfills para garantizar compatibilidad. Con esta herramienta, escribir código universal en JavaScript es más simple que nunca.

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.