Este tema se ha tratado muchas veces, sin embargo, me gustaría hablar sobre cuál es el alcance (usando JavaScript) desde la perspectiva del problema que se pretende abordar.

¿Qué problema resuelve realmente el alcance?

A medida que las aplicaciones aumentan de tamaño, también aumentan en complejidad; el alcance es una herramienta para gestionar dicha complejidad.

Acoplamiento versus desacoplamiento

Supongamos que tenemos un radio variable global establecido en 7 y una función createSpecialButton() que devuelve un botón "especial":

let radius = 7;

function createSpecialButton(radius) {
  return Click Me!
}

const button = createSpecialButton(radius);

Esta función devuelve un botón con un radio específico, que en este caso está establecido en 7. En este momento, no hay ningún problema con el código, ya que sabemos cuál es el radio establecido y, por lo tanto, sabemos cuál será el botón resultante. parece. Sin embargo, ¿qué sucede si agregamos dos funciones más que dependen de la variable del radio? Nuestro código ahora se ve así:

let radius = 7;

function createSpecialButton() {
  return Click Me!
}

function profileButton() {
  radius = 10;
  return Click Me!
}

function registrationButton() {
  radius = 16;
  return Click Me!
}

const profileButton = profileButton();
const registrationButton = registrationButton();
const button = createSpecialButton();

Después de realizar este cambio, ¿cuál será el valor del radio al llamar a createSpecialButton()? Si adivinaste 16, estarías en lo cierto.

Con solo agregar dos funciones adicionales, hemos aumentado enormemente la complejidad de nuestro código y ahora vivimos en un mundo en el que múltiples fragmentos de código no relacionados dependen de la misma dependencia. Ahora, imagine que se trata de una aplicación de pila completa mucho más grande: rápidamente se volvería difícil razonar sobre de dónde provienen ciertas partes del estado y cómo corregir errores cuando surjan.

Para solucionar este problema, podemos definir variables de radio separadas para cada función:

function createSpecialButton() {
  const radius = 7;
  return Click Me!
}

function profileButton() {
  const radius = 10;
  return Click Me!
}

function registrationButton() {
  const radius = 16;
  return Click Me!
}

const profileButton = profileButton();
const registrationButton = registrationButton();
const button = createSpecialButton();

Podrías ver este cambio y decir "bueno, está bien, pero ahora hay más código; eso no parece correcto". Eso es correcto, hay más código, sin embargo, menos código no es mejor si da como resultado un código menos mantenible: el cambio que hicimos mejora la mantenibilidad de nuestro código, y eso siempre es bueno.

Tipos de alcance en JavaScript

Alcance global

El alcance global es accesible desde toda la aplicación. Si está escribiendo una aplicación Node.JS, probablemente no trabajará con ella ni encontrará un alcance global. Sin embargo, si está trabajando en una aplicación web, puede colocar declaraciones en un alcance global usando una etiqueta de secuencia de comandos o usando window.SOMETHING.

Por ejemplo, usando la etiqueta script, podrías hacer algo como esto:

Además, MDN expresa su definición de "alcance global" como "El alcance predeterminado para todo el código que se ejecuta en modo script". Creo creo que se refieren al ejemplo anterior.

Mientras usas el objeto global de ventana, puedes hacer algo como esto:

  window.username = "Garrett";

Alcance del módulo

Si estás trabajando en un proyecto Node.JS, el alcance del módulo es con lo que trabajarás al más alto nivel. Cada archivo con una extensión .js (o .ts) es un módulo independiente, lo que significa que, como máximo, todo el contenido de un archivo determinado podrá acceder a sus declaraciones, a menos que las exporte explícitamente.

Por ejemplo, en user.ts, ambas funciones pueden acceder al nombre de la variable.

// user.ts

const name = "Garrett";

function greet() {
  console.log("Hello, ", name)
}

function greetAgain() {
  console.log("Hello again, ", name)
}

Sin embargo, en esta versión de user.ts, solo accessName() puede acceder al nombre de la variable:

// user.ts

function greet() {
  const name = "Garrett";
  console.log("Hello, ", name)
}

function greetAgain() {
  console.log("Hello again, ", name)
}

Tenga en cuenta que en ambos módulos no se exporta nada. En otras palabras, el código de otros módulos no tiene forma de conocer este código y, por lo tanto, no puede importarlo ni utilizarlo. Sin embargo, podemos cambiar eso:

// user.ts

export function greet(name: string) {
  console.log("Hello, ", name)
}

Ahora, ambas funciones se exportan y, por lo tanto, pueden ser utilizadas por otros módulos. Esto es técnicamente diferente al concepto de alcance global del que hablamos anteriormente, pero es similar en que hacemos que el código esté disponible para toda la aplicación importándolo de un módulo a otro.

Alcance de la función

De hecho, ya hemos visto el alcance de la función. Consulte el código a continuación (es el mismo código de uno de los fragmentos anteriores):

// user.ts

function greet() {
  const name = "Garrett";
  console.log("Hello, ", name)
}

function greetAgain() {
  console.log("Hello again, ", name)
}

Intenta ejecutar esto: greetAgain() producirá un error porque la variable de nombre que intenta leer solo existe dentro del contexto (es decir, "alcance") de greet().

Nota: es posible que veas que esto se denomina "ámbito local".

Alcance del bloque

El alcance del bloque es interesante porque solo funciona con tipos de variables más nuevos, específicamente, let y const, no var. Echemos un vistazo.

{
  let firstName = "Garrett";
  const lastName = "Love";
  var fullName = "Garrett Love";
  // firstName and lastName CAN be accessed here
  // fullName CAN be accessed here
}

// firstName and lastName CANNOT be accessed here
// fullName CAN STILL be accessed here

En el ejemplo anterior, podemos ver que 1) Colocar código dentro de un {} crea un bloque de código. 2) Solo se puede acceder a las variables definidas usando let y const dentro de ese bloque de código. 3) La variable creada con var no sigue las reglas del alcance del bloque, ya que aún se puede acceder a ella fuera de {}.

Nota: JavaScript moderno usa let y const para declaraciones de variables y no de var.

Las declaraciones deben hacerse dentro del alcance más pequeño necesario.

Para terminar, recuerde que el alcance es una herramienta para gestionar la complejidad de nuestro código, y cuanto más alto en el nivel de alcance coloque las declaraciones, más complejidad habrá en su código, por lo que es mejor apuntar a que las declaraciones colocarse en el ámbito más pequeño necesario.