Ahora es el momento de ver el alcance en acción
en un ejemplo semicomplejo,
para asegurarte de que realmente obtienes
el concepto súper importante.
Y como siempre,
comencemos abriendo una nueva ventana de VS Code
con (murmura) archivos de inicio.
Eso ya está aquí en mi escritorio.
Y otra vez,
Tengo la configuración más bonita aquí.
El índice no es realmente importante aquí.
Y entonces empecemos a escribir
algo de código JavaScript aquí.
Y voy a empezar escribiendo un
función de cálculo simple.
Y esta vez usemos una declaración de función.
No es que importe.
Pero solo para tener algo de diversidad,
y no siempre crean el mismo tipo de función.
Yo sé calcAge,
que va a recibir un año de nacimiento.
Y luego toda esta función hace
es calcular una edad.
Y entonces esto no es nada nuevo en este punto.
Así que el año en curso,
menos el año de nacimiento.
Entonces vamos también
devuelve esa edad aquí.
Y entonces esta función calcAge aquí es,
como aprendimos en la última lección,
definida en un ámbito global.
Y eso es porque es
aquí en el código de nivel superior, ¿verdad?
Además, esta función aquí crea su propio alcance.
Y ese alcance va a ser equivalente
al entorno variable
de su contexto de ejecución.
Así que eso es todo lo que aprendimos
en el último par de conferencias.
Y ahora vamos a crear una variable global aquí.
Así que voy a llamar a ese
nombre de pila.
Y ahora llamemos a la función
Yo sé calcAge,
con 1991.
Y luego aquí dentro de esta función calcAge,
Registraré el nombre en la consola.
Así que primer nombre.
Ahora como ves,
esta variable de nombre no está realmente en este ámbito
de la función calcAge.
Sin embargo, es una variable global.
que definimos aquí.
Y por lo tanto,
a través de la cadena de alcance,
va a estar disponible
también dentro de este ámbito.
Así que dentro de esta función, ¿verdad?
Así que ejecutemos este código aquí,
solo para ver que realmente funciona.
Y luego vamos a explicar un poco más.
Entonces servidor en vivo.
Y aquí vamos.
Abramos la consola.
Vamos a recargar para deshacernos de este error.
Y bien
Entonces ves que en efecto,
Jonas aquí fue impreso en la consola,
que es la primera variable de nombre.
Entonces, cuando se ejecutó esta línea de código aquí,
JavaScript no encontró esta variable en el alcance.
Y entonces hizo una búsqueda de variables,
dónde miró hacia arriba en la cadena de alcance
para ver si encontró la variable allí.
Y, de hecho, el ámbito principal
de la función calcAge es el alcance global.
Y la variable del primer nombre está ahí,
y, por lo tanto, JavaScript podría usar eso.
Ahora aquí, si lo intentamos,
por ejemplo solo nombre,
entonces JavaScript también haría una búsqueda,
pero no encontraría esta variable en el ámbito global.
Y por lo tanto, obtendríamos un error.
Ahora con esta variable,
en realidad no obtendríamos ningún error.
Como te expliqué al principio,
esto es algo especial
nombre de variable que no debemos usar.
Así que digamos que usé el apellido.
Y así de nuevo, esta variable
no se encuentra por ningún lado.
Así que incluso mirando hacia arriba
en el ámbito principal,
y ahora, cuando guardé esto,
luego obtengo este apellido que no define el error.
¿Bueno?
Y entonces, volviendo aquí al primer nombre,
entonces por supuesto,
todo funciona igual.
Y eso es cierto,
aunque esta variable aquí
en realidad se definió después de la función calcAge.
Pero eso no es un problema en absoluto.
Porque recuerda que el código en la función
solo se ejecuta una vez que se llama.
Y eso sucede después
la declaración de la variable del nombre.
Así que aquí mismo.
Y así, en este punto del código,
la variable del primer nombre ya está
en el entorno de variables de ejecución global.
Así que en el ámbito global, listo para ser utilizado.
Está bien, pero vamos a deshacernos de esto aquí.
Y vamos a crear otra función dentro de esta función.
Entonces funcion, printAge
y esto imprimirá una buena cadena en la consola.
Y como también ya sabes,
también crea un nuevo alcance.
Y vamos a crear una variable de salida,
cual va a ser la cuerda
que construiremos aquí.
Entonces la salida es igual,
eres
la edad,
y me olvidé de las llaves
nacido en
Año de nacimiento.
Y luego simplemente registramos ese mensaje en la consola.
Y ahora para ver este resultado aquí,
necesitamos, por supuesto, llamar a la función.
Entonces, hagámoslo aquí.
Entonces imprimirEdad.
Y ahora obtenemos una cadena con todos los datos.
que en realidad calculamos,
Y funciona bien.
Entonces obtenemos la edad que se calculó aquí,
y tambien el año de nacimiento
que se pasó a esta función.
Y así aquí de nuevo,
vemos la magia de la cadena de alcance en acción.
Así que una vez más,
el motor mientras ejecuta esta función printAge
está tratando de acceder
o está tratando de encontrar la variable edad
en el ámbito actual,
sin embargo, no puede encontrarlo allí.
Y por lo tanto,
va al ámbito principal,
donde luego encontrara
esta variable de edad, por supuesto,
que creamos aquí.
Y lo mismo ocurre con la variable año de nacimiento,
porque para el alcance
el parámetro de una función
funcionan como variables normales.
Y también recuerda que dijimos
que el alcance de una variable
es toda la región del código
en el que la variable es accesible.
Así por ejemplo,
el alcance de la variable edad
es toda esta área aquí.
Así que en todas partes aquí,
la variable edad es accesible.
Asi que por su puesto,
en la función calcAge, donde se definió,
y luego también en todos los ámbitos secundarios,
así que todos los ámbitos internos, ¿de acuerdo?
Pero, por supuesto, la edad no es accesible fuera
del alcance de calcAge.
Así que permítanme demostrar eso aquí.
Así que aquí, no podremos
para acceder a la variable edad.
Y eso es porque como mencioné,
la cadena de alcance es una calle de sentido único.
Entonces solo un alcance interno
puede tener acceso a las variables de su ámbito externo,
pero no al revés.
Así que ahora aquí estamos en el ámbito exterior,
y no podemos tener acceso a las variables
de un ámbito de niño,
cuál es el alcance de la función calcAge aquí
seguramente lo es, ¿de acuerdo?
Y lo mismo ocurre con las funciones de nuevo.
Y entonces no podemos llamar a la función imprimirEdad aquí,
por la misma razón.
Comentemos esto.
Y ahora obtenemos que printAge no está definido.
¿Bueno?
Así que aquí en el ámbito global,
no tenemos acceso a ninguna variable definida
en cualquier otro ámbito.
Ahora, ¿de acuerdo?
Y aquí, llevémoslo al siguiente nivel,
y también incluir el nombre de la persona.
Así que digamos, primer nombre.
Y probemos esto ahora.
Y de hecho, tiene acceso
a la variable del primer nombre.
Y así aquí,
el motor está haciendo un aún más grande,
o una búsqueda de variables más larga.
Así que ahora mismo, por supuesto,
en el alcance de printAge aquí.
Entonces JavaScript no puede encontrar una variable
en el ámbito actual.
Entonces busca en la cadena de alcance,
que es entonces el siguiente paso,
la función calcEdad.
Sin embargo, tampoco puede encontrar el nombre en este ámbito,
y por lo tanto sube aún más
en el ámbito global.
Y ahí está.
Y este es el valor
que se va a utilizar.
Bien, entonces espero
todo esto tenía sentido hasta este punto.
Ahora vayamos más lejos
y también crear un ámbito de bloque
aquí mismo en esta función printAge.
Así que hagamos una declaración if aquí.
Y comprobaremos si la persona
basado en el año de nacimiento es un millennial.
Y asi es si naciste
entre 1981 y 1996.
Entonces eres un millennial,
y entonces vamos a verificar eso.
Así que el año de nacimiento debe ser
al menos 1981
y por debajo,
por debajo de 1996.
Y aquí estamos creando un bloque.
Y por lo tanto, este será un nuevo ámbito de bloque.
Y entonces vamos ahora
defina una variable aquí usando const.
Y lo llamaré cuerda.
Y digamos,
así que primero llevamos esta cadena aquí a la consola.
Y entonces también podemos decir,
entonces si la persona es millennial,
diremos,
Ah, y eres un millennial.
Y luego otra vez, el primer nombre.
Y ahora estamos agregando
incluso un paso más aquí
a la cadena de alcance,
porque ahora la búsqueda de nombre
es aún más largo.
Pero aún funcionará.
Así que déjame registrar eso en la consola.
Y así en este caso,
Claramente soy un millennial, ¿de acuerdo?
Y de nuevo, Jonas aquí todavía se encuentra
todo el camino hasta aquí
desde el ámbito exterior.
Pero ahora, ¿qué crees que pasará?
mientras tratamos de registrar esta variable
fuera de este ámbito de bloque?
Así que básicamente haz lo mismo,
pero fuera del bloque.
De hecho, obtenemos un error de que str no está definido.
Y de nuevo, eso es porque las variables const y let
tienen alcance de bloque.
Entonces son válidos.
Entonces están disponibles solo dentro del bloque.
en que fueron creados.
Pero ahora observe cómo creamos otra variable más,
que llamaré millennial.
Y pongámoslo en verdadero.
Y entonces esta es una antigua variable anterior a ES6.
Y entonces, ¿qué crees que va a pasar,
como lo registramos, también aquí fuera de este bloque?
Así que tenemos que comentar esto.
Así que de nuevo, ¿qué crees que va a pasar ahora?
Y JavaScript realmente puede encontrarlo.
Y eso es por el hecho
que var variables,
entonces las variables declaradas con la palabra clave var
están en el ámbito de la función.
Así que simplemente ignoran el bloqueo,
porque no tienen un alcance de bloque en absoluto.
Solo tienen un alcance de función.
Y entonces aquí, todavía estamos en la misma función.
Así que aquí,
aquí estamos tratando de acceder a la variable
que se definió en la misma función, ¿verdad?
Así que ahora mismo,
el alcance de la variable millennial
es toda esta función,
sin importar si fue declarado dentro de un bloque o no.
Porque de nuevo, a las variables var no les importa
sobre bloques en absoluto.
Y por lo tanto,
luego podemos acceder a la variable millennial
dentro de su alcance.
¿Bueno?
Así que tenlo en cuenta mientras usas,
o como ves una variable declarada
con var, verdad?
Porque, como dije,
por su cuenta, probablemente no debería usar
esta variable usted mismo,
siempre use const, o let.
Pero si está leyendo otras bases de código,
o incluso trabajar con código antiguo,
entonces ten en cuenta
que así es como funciona la variable var.
Y por eso es muy importante
para aprender sobre str también.
Bien, el siguiente,
Probemos que las funciones también son de hecho,
ámbito de bloque a partir de ES6.
Así que vamos a crear un simple
función aquí, que sumará dos valores.
Devuelve A más B.
y luego vamos
intente llamarlo aquí fuera del bloque.
Así que suma dos y tres.
Y ahora obtenemos agregar no está definido.
Y así de hecho,
el alcance de esta función de añadir aquí
es sólo el bloque en el que se definió.
Así que solo aquí,
Podemos usar la función de agregar.
Y eso prueba que
las funciones son ahora, de hecho, de ámbito de bloque.
Pero recuerda que eso solo es cierto para el modo estricto.
Y ese es el modo
en el que estamos actualmente.
Pero si apago esto,
deberías ver ahora agregar que te llaman.
Así que registremos el resultado de eso en la consola.
Y ahora deberíamos ver cinco.
Y efectivamente, ahora funciona.
¿Ahora a la derecha?
Pero siempre debemos usar el modo estricto.
Y ahora deberíamos recuperar ese error.
Y entonces, también comentemos esto.
Y así puedes guardar esto aquí como referencia.
Bueno.
Y ahora a terminar.
Hagamos algunos experimentos aquí.
Entonces, ¿qué crees que va a pasar?
si declaramos una variable en este ámbito aquí?
Entonces, en este nuevo alcance de bloque que ya existe
en un ámbito principal?
Entonces, por ejemplo, digamos aquí,
constante
primer nombre, igual
steven
Entonces, ¿qué te parece esta cadena aquí?
se verá como ahora?
¿Entonces crees que aquí,
dirá Jonas o Steven?
Bueno, intentémoslo.
Y de hecho,
ahora dice Steven,
y eso pasa,
porque como siempre,
JavaScript intenta buscar el nombre de la variable
en el ámbito actual.
Y en este momento, en realidad está en el ámbito actual.
Entonces, el primer nombre está, de hecho, en este mismo bloque.
Entonces, en este mismo ámbito,
y por lo tanto, JavaScript usará esa variable
y no realizar ninguna búsqueda de variables
en la cadena de alcance.
Así que la cadena de alcance
no es necesario en absoluto,
si la variable que estamos buscando
ya está en el ámbito actual.
Y ese es exactamente el caso aquí.
Pero por supuesto,
entonces fuera de este bloque,
la variable del primer nombre
todavía va a ser el
procedente de la cadena de ámbito.
Entonces por eso aquí,
todavía ves a Jonas.
Así que aquí mismo en la función imprimirEdad,
que es otro alcance.
Entonces, es el ámbito principal de este ámbito, ¿verdad?
Y aquí, el primer nombre sigue siendo Jonas,
porque no está en el alcance actual de esta función.
Y por lo tanto, JavaScript hará una búsqueda de variables
en la cadena de alcance,
hasta que pueda encontrar el nombre,
que sigue siendo Jonas,
viniendo de aquí abajo.
Así que aquí creamos una nueva variable
con el mismo nombre de otra variable
que ya habíamos creado en un ámbito principal.
Así que tenemos dos variables de nombre en este momento.
Pero eso no es un problema en absoluto.
Porque de hecho,
son variables completamente diferentes,
simplemente sucede que tienen el mismo nombre.
Pero eso no es un problema en absoluto,
porque se definen en diferentes ámbitos.
Y así puedes tener nombres de variables repetidos.
Eso no es absolutamente ningún problema.
Y esa es también la razón
por qué puedes tener diferentes funciones
con los mismos nombres de parámetros.
porque de nuevo,
cada parámetro solo se define en ese ámbito
de esa función.
Y por lo tanto, no es un problema en absoluto.
tener muchas funciones con exactamente los mismos nombres de parámetros,
de la misma manera que no es un problema
tener funciones con los mismos nombres de variables
dentro de ellos.
Pero ahora mira lo que sucede cuando redefinimos una variable
desde un ámbito principal dentro de un ámbito interno.
Así que no crear una nueva variable,
pero simplemente reasignando el valor
de una variable
Así que hagamos eso aquí.
Y digamos ahora
la salida es igual
nueva salida
Y aquí tenemos que cambiar
la salida a un let.
Pero analicemos lo que hicimos aquí.
Entonces estamos en el alcance de printAge.
Así que eso es todo esto aquí.
Y aquí, tenemos la variable de salida,
entonces tenemos un ámbito interior,
así que como un alcance infantil aquí,
que luego redefine esta variable de salida
desde el ámbito exterior.
Entonces, si luego tratamos de acceder a esa salida aquí nuevamente,
¿Qué crees que va a pasar?
Bueno, tenemos una nueva salida aquí.
Y eso es porque en realidad manipulamos
una variable existente aquí,
dentro de un ámbito de niño.
Entonces, dentro de un alcance interno, ¿verdad?
No creamos una nueva variable,
simplemente redefinimos una variable a la que accedimos aquí
del ámbito principal.
Así que si creamos un nuevo
variable llamada salida aquí,
entonces tendríamos la misma situación
como antes con el primer nombre.
Entonces esta sería una variable completamente diferente,
y no afectaría en absoluto la salida del alcance externo.
Y ahora que guardamos esto,
entonces esta nueva salida debería desaparecer.
Y debería volver a la salida original.
como lo definimos en el alcance ahora.
De hecho, ahora la nueva salida se ha ido.
Y de nuevo, eso es porque
ahora es su propia variable.
Así que una nueva variable,
que casualmente tiene el mismo nombre
como una variable de su ámbito principal.
Pero para ilustrar esto aquí,
en realidad dejémoslo así.
Y también lo comentaré,
creando una nueva variable con
mismo nombre que
alcances exteriores
variable.
Y vamos a poner esto junto aquí.
reasignación
alcances exteriores
variable.
De nuevo, dos cosas completamente diferentes.
Pero creo que este es un muy buen ejemplo.
para ilustrar una vez más
cómo funciona la cadena de alcance.
Y con esto,
Espero que ahora entiendas completamente
cómo funciona el alcance en JavaScript.
También ten en cuenta
ese código real debería (risas)
probablemente no sea tan confuso,
pero esto fue solo para mostrarle cómo funciona el alcance.