En este artículo, vamos a aprender sobre el alcance de JavaScript. El ámbito gestiona la disponibilidad de las variables o también podemos decir que determina la accesibilidad de las variables.
Tipos de ámbitos en JavaScript:
- Ámbito de bloque
- Alcance de la función
- Ámbito local
- Alcance global
Alcance del bloque: JavaScript anterior solo tenía alcance global y alcance de función. let y const son las dos nuevas palabras clave importantes que introdujo ES6 y estas dos palabras clave proporcionan Block Scope en JavaScript. ECMAScript (ES6) 2015 fue la segunda revisión importante de JavaScript. No se puede acceder a las variables que se declaran dentro de un bloque { } desde fuera del bloque.
dejar palabra clave:
Ejemplo:
{
let x = 2;
}
x cannot be used here
var palabra clave:
Ejemplo:
{
var x = 2;
}
x can be used here
Las variables declaradas con la palabra clave var no pueden tener alcance de bloque y se pueden declarar dentro de un bloque { } y se puede acceder a ellas desde fuera del bloque.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<body>
<h2 style="color:green">GeeksforGeeks</h2>
<script>
function foo() {
if (true) {
var x = '1'; // Exist in function scope
const y = '2'; // Exist in block scope
let z = '3'; // Exist in block scope
}
console.log(x);
console.log(y);
console.log(z);
}
foo();
</script>
</body>
</html>
Salida (en consola):
1 y is not defined
Alcance de la función: JavaScript tiene un alcance de función y cada función crea un nuevo alcance. Las variables definidas dentro de una función no son accesibles desde fuera de la función y las variables declaradas con var , let y const son bastante similares cuando se declaran dentro de una función.
var palabra clave:
Ejemplo:
function myFunction() {
var firstName = "Krishna"; // Function Scope
}
dejar palabra clave:
Ejemplo:
function myFunction() {
let firstName = "Krishna"; // Function Scope
}
palabra clave constante:
Ejemplo:
function myFunction() {
const firstName = "Krishna"; // Function Scope
}
Ámbito local: las variables declaradas dentro de una función se vuelven locales para la función. Las variables locales se crean cuando se inicia una función y se eliminan cuando se ejecuta la función. Las variables locales tienen alcance de función, lo que significa que solo se puede acceder a ellas desde dentro de la función.
Ejemplo:
// This part of code cannot use firstName
function myFunction() {
let firstName = "Krishna";
// This part of code can use firstName
}
This part of code cannot use firstName
HTML
<!DOCTYPE html>
<html>
<body>
<h2 style="color:green">
GeeksforGeeks
</h2>
<script>
function foo() {
var x = '1';
console.log('inside function: ', x);
}
foo(); // Inside function: 1
console.log(x); // Error: x is not defined
</script>
</body>
</html>
Salida (en consola):
inside function: 1 x is not defined
Alcance global: las variables declaradas globalmente (fuera de cualquier función) tienen alcance global y se puede acceder a las variables globales desde cualquier parte de un programa. Al igual que las variables de ámbito de función declaradas con var , let y const son bastante similares cuando se declaran fuera de un bloque.
dejar palabra clave:
let x = 2; // Global scope
palabra clave constante:
const x = 2; // Global scope
var palabra clave:
var x = 2; // Global scope
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<body>
<h2 style="color:green">GeeksforGeeks</h2>
<script>
// Global scope
var x = '1'
const y = '2'
let z = '3'
console.log(x); // 1
console.log(y); // 2
console.log(z); // 3
function getNo() {
console.log(x); // x is accessible here
console.log(y); // y is accessible here
console.log(z); // z is accessible here
}
getNo(); // 1
</script>
</body>
</html>
Salida (en consola):
1 2 3 1 2 3