Scope y uso de variables

El "scope" (o alcance) se refiere a la accesibilidad de variables y funciones dentro de un programa.

¿Qué es el Scope?****

El ámbito (Scope) se refiere a los lugares dentro de nuestro código en donde las variables están disponibles para su uso. Cuando una variable tiene un ámbito global, significa que está disponible en cualquier lugar de tu programa. Veamos un ejemplo.

Toma el siguiente bloque de código y pégalo en tu consola.

var nombre = 'Madison'
function imprimirNombre() {
    console.log(nombre)
}
imprimirNombre()

Aquí hemos creado y llamado una función, imprimirNombre, que imprimirá el valor de la variable nombre, Madison. Verás eso impreso en tu consola.

Debido a que nuestra variable fue creada por fuera de la función, tiene alcance global. Esto significa que está disponible en cualquier parte de tu código, incluyendo dentro de cualquier función. Es por eso que la función, imprimirNombre, tiene acceso a la variable nombre.

Vamos ahora a crear una variable que tenga alcance de función. Esto significa que la variable solo se puede acceder dentro de la función en la que fue creada. Este siguiente ejemplo será muy similar al código anterior, pero con un posicionamiento diferente de la variable.

function imprimirAño() {
 var año = 2020
}
console.log(año)

Ahora nos saldrá un error en la consola: año is not defined (año no está definida). Esto es porque la variable año tiene alcance de función. Es decir, solo existe dentro de la función dentro de la cuál fue creada. Al ejecutar console.log, hemos intentado acceder a la variable desde afuera de la función, donde no tenemos acceso.

Las variables con alcance de función son útiles a los programadores porque frecuentemente queremos crear variables que sólo sirvan o sean necesarias dentro de cierta función. Crear variables globales también nos puede generar errores o fallos.

Ahora que tenemos un entendimiento básico de lo que es el alcance, podemos volver a nuestra discusión acerca de los problemas que tiene la palabra clave var.

Hay dos tipos principales de scope en JavaScript:

Scope Global: Las variables y funciones declaradas fuera de cualquier función o bloque de código tienen un alcance global. Estas variables y funciones pueden ser accedidas desde cualquier parte del código, incluyendo dentro de funciones u otros bloques de código.
Ejemplo de variable global:
```
var globalVariable = 10;

function myFunction() {
    console.log(globalVariable); // Puede acceder a la variable global
}

myFunction(); // Imprime 10` 
```

Scope Local: Las variables y funciones declaradas dentro de una función tienen un alcance local. Estas variables y funciones solo pueden ser accedidas dentro de la función en la que fueron declaradas.

Ejemplo de variable local:

function myFunction() {
    var localVariable = 20;
    console.log(localVariable); // Solo puede acceder a la variable local dentro de la función
}

myFunction(); // Imprime 20

console.log(localVariable); // Esto daría un error porque localVariable está fuera del alcance global`

Es importante entender el scope en JavaScript para evitar conflictos de nombres de variables y funciones, así como para escribir código más limpio y modular. Además, el conocimiento del scope es esencial para comprender cómo funcionan los cierres (closures) y cómo evitar errores relacionados con el alcance de las variables.

Problemas con la palabra clave var en JavaScript

Veamos otro ejemplo.

Crearemos una variable, edad. Luego escribiremos una sentencia if que verifique si edad tiene algún valor y, si lo tiene, que devuelva un console.log del número que sea el doble de la edad.

Este es un ejemplo simplificado, pero primero revisaremos si edad tiene un valor porque queremos asegurarnos que estamos sumando valores válidos.

var edad = 27
if (edad) {
 var dobleDeEdad = edad + edad
 console.log(`El doble de tu edad actual es ${dobleDeEdad}`)
}

Ahora en la consola verás El doble de tu edad actual es 54.

Nuestra variable, dobleDeEdad, es ahora una variable global. Si ingresas dobleDeEdad en tu consola, verás que tienes acceso a ella.

dobleDeEdad
54

Como podemos observar, dobleDeEdad está ahora disponible en cualquier parte de nuestro código. La variable dobleDeEdad no fue declarada dentro de ninguna función. En consecuencia, ha sido creada con alcance global.

El problema es que dobleDeEdad solo es una variable que usamos una vez dentro de nuestra sentencia if, la cuál no necesitamos que esté disponible en todo nuestro código. Se ha 'filtrado' fuera de la sentencia en la que fue creada, incluso si no necesitábamos que eso sucediera.

var edad = 27
if (edad) {
 //Necesitamos que var dobleDeEdad exista solamente en este bloque de código dentro de las llaves 
    var dobleDeEdad = edad + edad
    console.log(`El doble de tu edad actual es ${dobleDeEdad}`)
}

dobleDeEdad
54
//Nuestra var dobleDeEdad está disponible por fuera de estas llaves, en el ámbito global

Sería bueno que tuviésemos una manera de crear una variable que solo exista dentro de la sentencia if en donde fue creada. En otras palabras, el bloque de código que existe dentro de las llaves.

var edad = 27
if (edad) {
 //Queremos que nuestra variable solo exista aquí, donde la usaremos
 var dobleDeEdad = edad + edad
 console.log(`El doble de tu edad actual es ${dobleDeEdad}`)
}

Para ayudar a resolver este problema, las palabras clave const y let fueron introducidas a JavaScript.

Cómo usar la palabra clave const en JavaScript

const funciona similar a var, pero con unas cuantas diferencias grandes.

Primero, const tiene alcance de bloque, mientras que var tiene alcance de función.

¿Qué es un ****bloque?

Un _blo_que se refiere a cualquier espacio que esté entre llaves de apertura y cierre. Esto puede parecer confuso al principio. Escribamos nuestro ejemplo anterior, pero esta vez usando const en vez de var al declarar nuestra variable dobleDeEdad.

var edad = 27
if (edad) {
 const dobleDeEdad = edad + edad
 console.log(`El doble de tu edad actual es ${dobleDeEdad}`)
}

Ahora escribe dobleDeEdad en tu consola y presiona Enter. Te debería arrojar un error, dobleDeEdad is not defined ( dobleDeEdad no está definida). Esto es porque const tiene alcance de bloque: solo existe dentro del bloque donde fue definida.__

La variable dobleDeEdad está 'atrapada' dentro de las dos llaves de apertura y cierre. El código que está dentro de dichas llaves si puede acceder a dobleDeEdad, pero ningún código fuera de estas lo puede hacer.

Al usar const en vez de var, nuestro problema anterior es solucionado. Nuestra variable dobleDeEdad ya no se está 'filtrando' en nuestro ámbito global innecesariamente. En cambio, solo está disponible dentro del bloque de código donde fue creada.

¿Cómo funcionan las variables con ámbito de bloque dentro del contexto de las funciones? Para aprender sobre esto, vamos a crear y luego llamar a una función, devuelveX.

function devuelveX() {
 const x = 1
 return x
}
devuelveX()

Al llamar a la función devuelveX, podemos ver que esta devuelve el valor de x, que es 1.

Si luego escribimos x, la consola arrojará referenceError: x is not defined (Error de referencia: x no está definida). Esto es porque las funciones también con consideradas como bloques, lo que quiere decir que nuestra const x solo existirá dentro de la función.

Lo siguiente que debes saber sobre const es que solo se puede declarar una sola vez. Escribe este código en la consola:

const y = 1
const y = 2

Deberías ver un error, Identifier 'y' has already been declared (El identificador 'y' ya ha sido declarado).

Esta es la diferencia entre var y const. Mientras que const arroja un error, haciéndote saber que ya has declarado esta variable, la palabra clave var no.

var x = 1
var x = 2

La variable x señalará hacia el valor 2 sin errores. Esto puede causar errores para ti como programador, siendo que a lo mejor no quisiste asignarle un nuevo valor a tu variable. Entonces, usar const te puede ayudar, dado que recibirás un error si tratas de reasignar la variable accidentalmente.

Esta es una fortaleza de la palabra clave const que fue introducida como una mejor manera de crear variables en JavaScript. Sin embargo, ¿qué pasa en los casos cuando sí quieres actualizar el valor de tu variable?

Veamos un ejemplo en donde querríamos hacer eso.

Declaremos una variable adulto, con valor false. También crearemos una variable edad con valor 20.

const adulto = false

const edad = 20

Digamos que queremos revisar la edad del usuario y cambiar el valor de nuestra variable adulto a verdadero si la edad está por encima de 18. Podemos escribir una sentencia para hacerlo.

if (edad > 18) {
 adulto = true   
}

¿Qué pasa cuando ejecutamos este código?

Aquí veremos Error: Assignment to constant variable (Error: asignación a variable constante).

Esto es porque, en concordancia con las reglas de const, no podemos volver a declarar esta variable. Debido a que nuestra variable adulto ya está apuntando al valor false, no podemos hacerle apuntar a algo más.

Si imprimimos adulto de nuevo, podemos ver que se mantuvo igual y contiene el mismo valor de false.

No podemos reasignar nuestra variable adulto, lo que significa que const está funcionando de la manera esperada. Sin embargo, ¿qué pasa si queremos reasignar esta variable?

Frecuentemente los programadores querrán poder volver a declarar sus variables.

Aquí es donde nuestra tercera palabra clave, let, surge.

Cómo usar la palabra clave let en JavaScript****

Primero revisemos como let es similar a const.

Let, como const, tiene alcance de bloque. Si reemplazas const por let en nuestro ejemplo previo de dobleDeEdad, funcionaría igual.

Sin embargo, let es diferente de const de un modo fundamental. Las variables declaradas con la palabra clave let pueden volver a ser declaradas, a diferencia de const. Repasemos un ejemplo.

Usando nuestro mismo ejemplo previo, reemplaza const por let. Mantendremos nuestra variable edad como una const con el valor de 20.

let adulto = false
const edad = 20
if (edad > 18) {
    adulto = true
}

Ahora si escribimos adulto, en vez de recibir un error como se generó anteriormente, ahora veremos el resultado true.