El ámbito de una variable (scope) es la zona donde esta tendrá acción, es decir las zonas del programa donde podremos utilizarla. En JavaScript tenemos principalmente dos ámbitos, globales y locales. Luego veremos otra opción que es por bloque (let), pero primero centrémonos en aprender cuando es una variable local o global y lo que eso conlleva en nuestro código.
Para instanciar una variable en javascript podemos no poner nada o utilizar la palabra reservada var, es en el uso de esta palabra la que nos ayudara a definir si es local o global.
Veamos un ejemplo:
<script>
var nombre = «Antonio»;
apellido = «Otero»;
</script>
En este caso tanto la variable nombre y la variable apellido son globales, pues las estamos intanciando en la raiz de nuestro código, o lo que es lo mismo, no estan dentro de una función.
Vamos a crear una función y instanciar una variable.
|
1 2 3 4 5 |
function creaMensaje() { var mensaje = “Mensaje de prueba”; alert("este mensaje SI se imprimirá" + mensaje) } alert("este mensaje no se imprimirá" + mensaje) |
En el ejemplo, podemos comprobar como en el caso del primer alert si nos saca la ventana emergente dado, que la variable mensaje esta instanciada dentro de la función con var, mientras el segundo alert nos dará error pues no tiene visibilidad a dicha variable.
Si dentro de la función no pusieramos el comando var para instanciarla esto haria que la variable fuese global en lugar de locar, veamos otro ejemplo.
|
1 2 3 4 5 |
function creaMensaje() { mensaje = “Mensaje de prueba”; alert("este mensaje SI se imprimirá" + mensaje) } alert("este mensaje TAMBIEN se imprimirá" + mensaje) |
Por lo que podemos sacar dos conclusiones:
- Una variable solo es local si la instanciamos con var dentro de una función.
- Una variable es local siempre que la instanciemos en la raíz del código con o sin var, o si la instanciamos dentro de una función sin utilizar var.
Actividad
¿En el siguiente código se imprimirá el mensaje?
|
1 2 3 4 5 6 7 |
var mensaje = “Mensaje de prueba”; function muestraMensaje() { alert(mensaje); } creaMensaje(); alert(mensaje); |
Y, ¿en este?
|
1 2 3 4 5 6 |
function creaMensaje() { mensaje = "Mensaje de prueba"; } creaMensaje(); alert(mensaje); |
Y, ¿en este otro?
|
1 |
function creaMensaje() {<br> mensaje = "Mensaje de prueba";<br>}<br> <br>creaMensaje();<br>alert(mensaje); |