Alcance de JavaScript

Tabla de contenido

    Mostrar tabla de contenidos

El alcance determina la accesibilidad (visibilidad) de las variables.

JavaScript tiene 3 tipos de alcance:

  • Alcance del bloque

  • Alcance de la función

  • Alcance global

Alcance del bloque

Antes de ES6 (2015), JavaScript solo tenía alcance global y alcance de función.

ES6 introdujo dos nuevas palabras clave JavaScript importantes: let y const.

Estas dos palabras clave proporcionan Alcance del bloque en JavaScript.

No se puede acceder a las variables declaradas dentro de un bloque {} desde fuera del bloque:

Ejemplo

{ 
  let x = 2;
  }
// x can NOT be used here

Las variables declaradas con la palabra clave var NO pueden tener alcance de bloque.

Se puede acceder a las variables declaradas dentro de un bloque { } desde fuera del bloque.

Ejemplo

{ 
  var x = 2; 
  }
// x CAN be used here

Alcance Local

Las variables declaradas dentro de una función de JavaScript se convierten en LOCAL a la función.

Ejemplo

// code here can NOT use carName
function myFunction() {
  let carName = "Volvo";
  // code here CAN use carName
}
  
// code here can NOT use carName

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Scope</h2>

<p><b>carName</b> is undefined outside myFunction():</p>

<p id="demo1"></p>

<p id="demo2"></p>

<script>
myFunction();

function myFunction() {
  let carName = "Volvo";
  document.getElementById("demo1").innerHTML = typeof carName + " " + carName;
}

document.getElementById("demo2").innerHTML = typeof carName;
</script>

</body>
</html>

Las variables locales tienen alcance de función:

Solo se puede acceder a ellos desde dentro de la función.

Dado que las variables locales sólo se reconocen dentro de sus funciones, las variables con el mismo nombre se pueden utilizar en diferentes funciones.

Las variables locales se crean cuando se inicia una función y se eliminan cuando se completa la función.

Alcance de la función

JavaScript tiene alcance de función: cada función crea un nuevo alcance.

Las variables definidas dentro de una función no son accesibles (visibles) desde fuera de la función. función.

Variables declaradas con var, let y const son bastante similar cuando se declara dentro de una función.

Todos ellos tienen Alcance de Función:

function myFunction() {
    var carName = "Volvo";   
  // Function Scope
}
function myFunction() {
    let carName = "Volvo";   // 
  Function Scope
}
function myFunction() {
    const carName = "Volvo";   // 
  Function Scope
}

Variables globales de JavaScript

Una variable declarada fuera de una función se vuelve GLOBAL.

Ejemplo

let carName = "Volvo";
// code here can use carName

function myFunction() {
// code here can also use carName 
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Scope</h2>

<p>A GLOBAL variable can be accessed from any script or function.</p>

<p id="demo"></p>

<script>
let carName = "Volvo";
myFunction();

function myFunction() {
  document.getElementById("demo").innerHTML = "I can display " + carName;
}
</script>

</body>
</html>

Una variable global tiene Alcance Global:

Todos los scripts y funciones de una página web pueden acceder a ella.

Alcance global

Las variables declaradas Globalmente (fuera de cualquier función) tienen Alcance Global.

Se puede acceder a las variables globales desde cualquier lugar en un programa JavaScript.

Variables declaradas con var, let y const son bastante similar cuando se declara fuera de un bloque.

Todos ellos tienen Alcance Global:

var x = 2;       
  // Global scope
 let x = 2;       // 
  Global scope
 const x = 2;       // 
  Global scope

Variables de JavaScript

En JavaScript, los objetos y funciones también son variables.

El alcance determina la accesibilidad de variables, objetos y funciones desde diferentes partes del código.

Automáticamente global

Si asigna un valor a una variable que no ha sido declarada, automáticamente se convertirá en una variable GLOBAL.

Este ejemplo de código declarará una variable global carName, incluso si el valor se asigna dentro de una función.

Ejemplo

myFunction();
// code here can use carName
 
function myFunction() {
    carName = "Volvo";
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Global Variables</h2>
<p>If you assign a value to a variable that has not been declared, it will automatically become a GLOBAL variable:</p>

<p id="demo"></p>

<script>
myFunction();
// code here can use carName as a global variable
document.getElementById("demo").innerHTML = "I can display " + carName;

function myFunction() {
  carName = "Volvo";
}
</script>

</body>
</html>

Modo estricto

Todos los navegadores modernos admiten la ejecución de JavaScript en "modo estricto".

Aprenderá más sobre cómo utilizar el modo estricto en un capítulo posterior de este tutorial.

En el "modo estricto", las variables no declaradas no son automáticamente globales.

Variables globales en HTML

Con JavaScript, el alcance global es el entorno de JavaScript.

En HTML, el alcance global es el objeto de ventana.

Las variables globales definidas con la palabra clave var pertenecen al objeto de ventana:

Ejemplo

var carName = "Volvo";
// code here 
 can use window.carName

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Scope</h2>

<p>In HTML, global variables defined with <b>var</b>, will become window variables.</p>

<p id="demo"></p>

<script>
var carName = "Volvo";

// code here can use window.carName
document.getElementById("demo").innerHTML = "I can display " + window.carName;
</script>

</body>
</html>

Las variables globales definidas con la palabra clave let no pertenecen al objeto de ventana:

Ejemplo

let carName = "Volvo";
// code here can not use window.carName

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Global Variables</h2>

<p>In HTML, global variables defined with <b>let</b>, will not become window variables.</p>

<p id="demo"></p>

<script>
let carName = "Volvo";

// code here can not use window.carName
document.getElementById("demo").innerHTML = "I can not display " + window.carName;
</script>

</body>
</html>

Advertencia

NO cree variables globales a menos que tenga la intención de hacerlo.

Sus variables globales (o funciones) pueden sobrescribir las variables de ventana (o funciones).
Cualquier función, incluido el objeto de ventana, puede sobrescribir su función global. variables y funciones.

La vida útil de las variables de JavaScript

La vida útil de una variable JavaScript comienza cuando se declara.

Las variables de función (locales) se eliminan cuando se completa la función.

En un navegador web, las variables globales se eliminan cuando cierra el navegador ventana (o pestaña).

Argumentos de función

Los argumentos de función (parámetros) funcionan como variables locales dentro de funciones.