Command Palette

Search for a command to run...

Modo Estricto en JavaScript: 'use strict' y Sus Implicaciones

El modo estricto es una característica que convierte errores silenciosos en excepciones explícitas, eliminando comportamientos problemáticos del lenguaje.

Lectura: 12 min
Nivel: Principiante

TL;DR - Resumen rápido

  • 'use strict' activa el modo estricto que convierte errores silenciosos en excepciones explícitas
  • Previene bugs comunes como variables sin declarar, parámetros duplicados y asignaciones a propiedades inmutables
  • El valor de 'this' es undefined en funciones normales, en lugar de apuntar al objeto global
  • Todos los módulos ES6 (import/export) ejecutan automáticamente en modo estricto sin necesidad de la directiva
  • No se puede usar en alcance global en navegadores si combinas scripts legacy con código moderno
  • Elimina características problemáticas como 'with', eval con scope propio, y nombres reservados del futuro
  • Es una buena práctica activarlo en cada función hasta que migres completamente a módulos ES6

¿Qué es el Modo Estricto?

El modo estricto es una característica introducida en ECMAScript 5 (2009) que permite ejecutar código JavaScript en un contexto más riguroso y seguro. Su propósito principal es convertir errores silenciosos de JavaScript en excepciones explícitas, eliminar características confusas o mal diseñadas del lenguaje, y hacer más fácil escribir código "seguro" que puede ser optimizado por los motores JavaScript.

Antes de ES5, JavaScript tenía comportamientos permisivos que causaban bugs difíciles de rastrear. Por ejemplo, asignar valores a variables sin declararlas las creaba automáticamente en el objeto global, o asignar valores a propiedades de solo lectura fallaba silenciosamente sin avisar al desarrollador. El modo estricto soluciona estos problemas.

Contexto Histórico

El modo estricto fue diseñado para ser opt-in (opcional) y completamente retrocompatible. Esto significa que código existente sin 'use strict' sigue funcionando exactamente igual. Esta decisión permitió a JavaScript evolucionar sin romper la web existente, una filosofía que el lenguaje mantiene hasta hoy.

Cómo Activar 'use strict'

El modo estricto se activa mediante la directiva "use strict" (un string literal) al inicio de un script o de una función. Es importante que sea la primera sentencia; cualquier código antes de ella (excepto comentarios) desactiva el modo estricto.

Alcance Global

Colocar "use strict" al inicio de un archivo activa el modo estricto para todo el script. Sin embargo, esto puede ser problemático si combinas múltiples archivos, ya que un script estricto puede afectar a otros scripts no estrictos cuando se concatenan.

strict-global.js
Loading code...

El ejemplo muestra cómo "use strict" al inicio del archivo activa el modo estricto para todo el script. Intentar usar una variable sin declararla lanza unReferenceError de inmediato, en lugar de crear silenciosamente una variable global.

Peligro en Producción

Activar 'use strict' globalmente es peligroso en aplicaciones que concatenan múltiples archivos JavaScript (como algunos build tools antiguos). Si un script usa modo estricto y se concatena con librerías legacy que no fueron diseñadas para ello, pueden aparecer errores inesperados. Por eso, es más seguro usarlo a nivel de función o migrar completamente a módulos ES6.

Alcance de Función

La forma más segura de usar el modo estricto es activándolo dentro de cada función. Esto garantiza que solo esa función y las funciones anidadas dentro de ella se ejecuten en modo estricto, sin afectar al código circundante.

strict-function.js
Loading code...

Usando "use strict" dentro de la función, el modo estricto se aplica solo a ese contexto. Las funciones externas o el código de librería no se ven afectados, lo que lo hace seguro para proyectos que mezclan código moderno con dependencias legacy. En proyectos que usan bundlers como Webpack o Rollup, es común envolver cada módulo en una IIFE con "use strict" al inicio para garantizar aislamiento.

Cambios de Comportamiento

El modo estricto modifica la semántica de JavaScript de varias formas importantes. A continuación se detallan los cambios más significativos que encontrarás en código real:

  • Variables sin declarar lanzan <code>ReferenceError</code> en lugar de crear propiedades globales
  • <code>this</code> es <code>undefined</code> en funciones normales, no el objeto global
  • Parámetros duplicados en funciones son un <code>SyntaxError</code> detectado en tiempo de parseo
  • Asignaciones a propiedades inmutables o no configurables lanzan <code>TypeError</code>

Variables Sin Declarar Lanzan Error

Uno de los cambios más impactantes es que asignar valores a variables no declaradas lanza unReferenceError, en lugar de crear automáticamente una propiedad en el objeto global (windowen navegadores, global en Node.js). Este comportamiento previene typos accidentales que crean variables globales inesperadas.

variables-sin-declarar.js
Loading code...

En el ejemplo, sin modo estricto la asignación a una variable no declarada crea una propiedad en el objeto global. Con modo estricto, la misma operación lanza un ReferenceError inmediato, haciendo el bug visible durante el desarrollo en lugar de propagarse silenciosamente a producción.

Bug Real en Producción

Este es uno de los bugs más comunes que el modo estricto previene. En código legacy sin modo estricto, un typo como "usreName = 'John'" en lugar de "userName" crearía silenciosamente una variable global, causando bugs difíciles de rastrear. Con modo estricto, obtienes un error inmediato que identifica el problema.

'this' es undefined en Funciones Normales

En modo estricto, el valor de this en funciones normales (no métodos) esundefined en lugar del objeto global. Este cambio previene modificaciones accidentales al objeto global y hace el comportamiento más predecible.

this-undefined.js
Loading code...

La diferencia en el valor de this es fundamental cuando migras código a modo estricto. Las funciones que asumían que this era el objeto global necesitarán ser refactorizadas para recibir el contexto explícitamente mediante parámetros, arrow functions o .bind().

Callbacks y 'this'

Este comportamiento es especialmente importante cuando trabajas con callbacks. Si pasas un método de objeto como callback (por ejemplo, a setTimeout o addEventListener), 'this' será undefined en modo estricto. La solución es usar arrow functions o .bind() para mantener el contexto correcto.

Parámetros Duplicados Lanzan Error

En modo no estricto, puedes definir funciones con parámetros duplicados. El último valor sobrescribe a los anteriores. En modo estricto, esto es un SyntaxError que se detecta en tiempo de parsing, antes de ejecutar el código.

parametros-duplicados.js
Loading code...

El SyntaxError de parámetros duplicados se detecta en tiempo de parseo, antes de que el código se ejecute. Esto significa que si tienes este error en tu código, el script completo fallará al cargar, no solo cuando se llame a la función con argumentos específicos.

Asignaciones a Propiedades Inmutables

JavaScript permite crear propiedades de solo lectura, no configurables, o congelar objetos completos con Object.freeze(). En modo no estricto, intentar modificar estas propiedades falla silenciosamente. En modo estricto, lanza un TypeError, permitiéndote detectar el error inmediatamente.

objetos-inmutables.js
Loading code...

El modo estricto convierte el fallo silencioso en un TypeError explícito. En lugar de mutar objetos existentes, la buena práctica es crear nuevos objetos con los cambios usando el spread operator (...) o Object.assign(), lo que resulta en código más predecible e inmutable.

Restricciones Adicionales

Además de los cambios principales, el modo estricto introduce varias restricciones adicionales que eliminan características problemáticas o ambiguas del lenguaje.

restricciones-adicionales.js
Loading code...

La sentencia with está prohibida porque hacía el código imposible de optimizar para los motores JavaScript y muy difícil de entender. Además, eval() no puede introducir nuevas variables en el scope circundante, delete en variables simples lanza un SyntaxError, y palabras reservadas para futuras versiones (como implements, interface, package) no pueden usarse como identificadores.

Modo Estricto en Módulos ES6

Todos los módulos ECMAScript (archivos que usan import/export) se ejecutan automáticamente en modo estricto, sin necesidad de agregar la directiva "use strict". Esto significa que si tu proyecto usa módulos ES6, ya estás usando modo estricto y no necesitas agregarlo manualmente.

modulos-es6.js
Loading code...

Si tu proyecto utiliza módulos ES6 con import y export, no necesitas agregar "use strict" en ningún lado. Solo los scripts tradicionales cargados con <script> sin type="module" requieren la directiva explícita si quieres activar el modo estricto.

Errores Comunes

Al activar el modo estricto en código existente, es común encontrar errores que antes pasaban desapercibidos. Aquí están los más frecuentes y cómo solucionarlos.

errores-comunes.js
Loading code...

Cada uno de estos errores corresponde a un hábito de código sloppy que el modo estricto corrige. La estrategia recomendada es activar el modo estricto en proyectos nuevos desde el principio, o migrarlo gradualmente en proyectos existentes empezando por las funciones más aisladas y bien testeadas.

Activar en Código Legacy

Si intentas activar 'use strict' en una aplicación legacy grande, es probable que encuentres muchos errores. Una estrategia común es activarlo gradualmente: primero en funciones nuevas, luego en módulos completos, y finalmente migrar todo el código a módulos ES6. No intentes activarlo globalmente de golpe en producción sin pruebas exhaustivas.

Resumen

El modo estricto es una herramienta fundamental para escribir JavaScript robusto y mantenible. A continuación se resumen los puntos clave que debes recordar sobre su uso y comportamiento.

Resumen: Modo Estricto en JavaScript

Cómo usar 'use strict':

  • Actívalo al inicio de cada función si trabajas con scripts legacy concatenados
  • Si usas módulos ES6 (import/export), ya está activo automáticamente
  • Nunca lo actives globalmente en proyectos que mezclan código legacy y moderno
  • Usa herramientas como ESLint con configuración de módulos para verificar código estricto
  • Testea exhaustivamente al migrar código no estricto a estricto

Conceptos clave:

  • Convierte errores silenciosos en excepciones explícitas (variables sin declarar, propiedades inmutables)
  • 'this' es undefined en funciones normales, no el objeto global
  • Prohíbe características problemáticas como 'with' y eval con scope propio
  • Parámetros duplicados y asignaciones a no-writables lanzan errores
  • Mejora el rendimiento al eliminar ambigüedades que dificultan la optimización del motor