martes 6 agosto 2024

¿Qué es un scope en JavaScript?

El scope, o ámbito, en JavaScript define el contexto en el que las variables y las funciones son accesibles y utilizables en tu código. Este contexto determina el alcance, visibilidad y duración de una variable. Entender los diferentes tipos de scope es crucial para escribir un código limpio, eficiente y libre de errores.

Tipos de scope en JavaScript

1. Scope global: Las variables declaradas fuera de cualquier función o bloque pertenecen al scope global. Son accesibles desde cualquier parte del código.

2. Scope local: Las variables declaradas dentro de una función son locales a esa función y no son accesibles fuera de ella.

3. Scope de bloque: Introducido con ES6, las variables declaradas con let y const dentro de un bloque ({}) son limitadas a ese bloque.

Scope global

Las variables en el scope global se definen fuera de cualquier función o bloque y son accesibles desde cualquier parte del código.

let globalVar = "Soy global";

function mostrarGlobal() {
  console.log(globalVar); // Acceso a una variable global dentro de una función
}

mostrarGlobal(); // Salida: Soy global

Scope local

Las variables en el scope local se definen dentro de una función y no pueden ser accedidas fuera de esa función.

function localScope() {
  let localVar = "Soy local";
  console.log(localVar); // Acceso a una variable local dentro de la misma función
}

localScope(); // Salida: Soy local
console.log(localVar); // Error: localVar no está definida

Scope de bloque

El scope de bloque limita el alcance de las variables declaradas con let y const al bloque donde se definen.

{
  let blockVar = "Soy un bloque";
  console.log(blockVar); // Acceso a una variable de bloque dentro del bloque
}

console.log(blockVar); // Error: blockVar no está definida

Scope anidado

Las funciones en JavaScript pueden ser anidadas, creando scopes anidados. Las funciones internas pueden acceder a las variables definidas en sus funciones externas.

function funcionExterna() {
  let externaVar = "Externa";
  
  function funcionInterna() {
    let internaVar = "Interna";
    console.log(externaVar); // Acceso a la variable de la función externa
    console.log(internaVar); // Acceso a la variable de la función interna
  }
  
  funcionInterna();
}

funcionExterna();

Algunos ejemplos

Ejemplo 1: Alcance de una variable global

let nombre = "Ana";

function saludar() {
  console.log("Hola, " + nombre);
}

saludar(); // Salida: Hola, Ana

Ejemplo 2: Alcance de una variable local

function mostrarMensaje() {
  let mensaje = "Hola desde el ámbito local";
  console.log(mensaje);
}

mostrarMensaje(); // Salida: Hola desde el ámbito local
console.log(mensaje); // Error: mensaje no está definida

Ejemplo 3: Alcance de bloque

if (true) {
  let mensaje = "Dentro del bloque";
  console.log(mensaje); // Salida: Dentro del bloque
}

console.log(mensaje); // Error: mensaje no está definida

Referencias a sitios oficiales

Para más detalles sobre los scopes en JavaScript, puedes consultar la documentación oficial de Mozilla sobre scope.

Etiquetas:

javascript

Creado por:

Jorge García

Fullstack developer