En este artículo, veremos qué es el alcance de bloque en Javascript, el acceso a las variables de alcance de bloque, cómo se diferencia de otros tipos de alcance de variable, a través de los ejemplos. Antes de ES2015, JavaScript solo admitía el alcance a nivel de función, a diferencia de otros lenguajes como C++/Java, que tiene alcance a nivel de bloque. Con ES2015, además del alcance a nivel de función, JavaScript también admite el alcance a nivel de bloque con la ayuda de la palabra clave let y la palabra clave const .
Pero antes de entrar en detalles de ES2015, analicemos qué queremos decir exactamente con las frases «alcance a nivel de función» y «alcance a nivel de bloque».
Ámbito de nivel de bloque: este ámbito restringe el acceso a la variable que se declara dentro de un bloque específico desde el exterior del bloque. La palabra clave let & const facilita que las variables tengan un alcance de bloque. Para acceder a las variables de ese bloque específico, necesitamos crear un objeto para él. Las variables declaradas con la palabra clave var no tienen alcance de bloque.
Por ejemplo, considere el siguiente ejemplo:
{ let p = 110; const q = 111; } console.log(p); // Uncaught ReferenceError: p is not defined console.log(q); // Uncaught ReferenceError: q is not defined
Aquí, hemos usado la palabra clave let & const para ilustrar el alcance a nivel de bloque, para acceder a la variable desde fuera del bloque.
Alcance del nivel de función: las variables en este nivel de alcance están restringidas para acceder solo al interior de la función donde se declara, es decir, se puede acceder desde cualquier lugar dentro de esa función, no se puede acceder a funciones externas. Cada vez que se genera un nuevo ámbito al crear una función y en ese ámbito, cualquier función puede acceder a cualquier variable dentro de ese ámbito. La función o variables definidas como alcance global serán accesibles por todas las demás variables o funciones. Ahora, veamos el alcance de la función en JavaScript.
function printIfGFG( text){ if(text=="GeeksforGeeks"|| text=="GFG") { var message = "Verified Geek"; console.log(message); // Output: Verified Geek } console.log(message); // Output: Verified Geek } printIfGFG("GFG");
En el fragmento de código anterior, hemos declarado y definido un mensaje variable dentro de la condición if . Luego, mostró la salida del valor usando la función console.log() .
La parte complicada es el hecho de que también podemos imprimir el valor de la variable ‘ mensaje ‘ fuera de la condición si. Esto se debe a que en las funciones de JavaScript declaradas con la palabra clave ‘ var ‘ tienen que funcionar de forma predeterminada . El tiempo de ejecución de JavaScript busca la función envolvente más cercana en relación con la declaración de la variable y la establece como el ámbito de esa variable.
Pero, ¿cómo hace esto el tiempo de ejecución de JavaScript? Bueno, vale la pena mencionar aquí que el tiempo de ejecución de JavaScript cambia internamente nuestro código y mueve todas las declaraciones de variables al inicio de la función. Esto se conoce como elevación variable . Por lo tanto, nuestro código en el ejemplo actual se cambia efectivamente al fragmento de código a continuación.
function printIfGFG( text){ var message; if(text=="GeeksforGeeks"|| text=="GFG") { message = "Verified Geek"; console.log(message); // Output: Verified Geek } console.log(message); // Output: Verified Geek } printIfGFG("GFG");
Para profundizar en el concepto de ámbitos de variables en JavaScript antes de ES2015, consulte el artículo Comprender los ámbitos de variables en JavaScript para obtener más detalles.
Entonces, ahora que tenemos claro qué es el alcance de la función y el alcance del bloque, veamos cómo ES2015 logró los alcances del bloque en JavaScript. Desde ES2015, además de la palabra clave var , hay dos nuevas palabras clave disponibles para declarar variables.
Let: Las variables declaradas usando la palabra clave ‘let’ son similares a las variables declaradas usando la palabra clave ‘var’ con solo una diferencia. Las variables declaradas con ‘let’ tendrán alcance de bloque y no se elevarán al inicio de la función. Entonces, si intentamos acceder a esas variables fuera de su alcance de bloque, obtendremos un error de referencia que dice que la variable no está definida.
function printIfGFG( text){ if(text=="GeeksforGeeks"|| text=="GFG") { let message = "Verified Geek"; console.log(message); // Output: Verified Geek } console.log(message); // Output: Uncaught ReferenceError: message is not defined } printIfGFG("GFG");
Además, las variables declaradas con la palabra clave «let» se pueden redefinir pero no volver a declarar.
let msg = "Try again"; msg = "Try again later"; // Output: Try again later
let msg = "Try again"; let msg = "Try again later"; // Output: Uncaught SyntaxError: Identifier 'msg' has already been declared
Const: las variables declaradas con la palabra clave «Const» son similares a las variables declaradas con la palabra clave «let» con una característica adicional que, una vez declaradas y definidas, su valor no se puede cambiar.
Una variable constante en JavaScript es una variable que tiene una constante o un valor fijo que permanece igual, es decir. que no cambia a lo largo del programa. No es posible ningún tipo de modificación en su valor una vez declarado. Si el programador intenta modificar su valor, el compilador muestra un error, esto se debe a que en cuanto hemos declarado una variable como constante, le dice al compilador que ese es un valor fijo y que debe evitar realizar cambios en él.
El uso principal de las variables Const es hacer constantes de solo lectura como
const PI = 3.14 const MAX_USERS = 1000;
Además, es obligatorio definir las variables const en el momento de la declaración.
const pi; // Syntax Error pi = 3.14
Entonces, en este tutorial, buscamos dos nuevas palabras clave que se pueden usar para declarar variables en JavaScript. Una vez que comience a usar estas palabras clave mientras declara variables, habrá casos excepcionales en los que necesitará usar la palabra clave ‘var’ nuevamente.
Publicación traducida automáticamente
Artículo escrito por GeeksforGeeks-1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA