Continuemos nuestro viaje
de profundizar en cómo funciona realmente JavaScript
entre bastidores.
Realmente espero que lo hayas disfrutado hasta ahora.
y son capaces de ver el inmenso valor
que estas conferencias traen a la mesa.
Ahora, después de esta conferencia,
finalmente habrá otra conferencia de codificación.
Así que espera, ya casi llegamos.
Pero ahora comencemos con esta conferencia.
Así lo aprendimos en la última lección
que cada contexto de ejecución tiene un entorno variable,
una cadena de ámbito y una palabra clave this.
Entonces, en esta lección, aprendamos qué alcance
y una cadena de alcance son,
por qué son tan importantes y cómo funcionan.
Y empecemos por entender
lo que realmente significa alcance,
y aprender sobre algunos conceptos relacionados también.
Así que el alcance controla cómo las variables de nuestro programa
son organizados y accedidos por el motor de JavaScript.
Entonces, básicamente, el alcance hace la pregunta,
¿Dónde viven las variables?
¿O dónde podemos acceder a una determinada variable y dónde no?
Ahora en JavaScript,
tenemos algo llamado alcance léxico.
Y el alcance léxico significa que la forma en que las variables
se organizan y se accede
está totalmente controlado por la colocación de funciones
y de bloques en el código de los programas.
Por ejemplo, una función que está escrita dentro
otra función tiene acceso a las variables
de la función padre, ¿de acuerdo?
De nuevo, el alcance de las variables está influenciado
por dónde escribimos exactamente nuestras funciones y bloques de código.
Bien, y ahora sobre el alcance en sí.
El alcance es el espacio o entorno.
en el que se declara una determinada variable,
simple como eso.
Y en el caso de las funciones,
eso es esencialmente el entorno variable
que se almacena en el contexto de ejecución de funciones.
Así que si ahora te estás preguntando,
cual es la diferencia entre alcance
y entorno variable?
Entonces la respuesta es que para el caso de las funciones,
es básicamente lo mismo.
Ahora en JavaScript, tenemos el alcance global,
alcance de función y alcance de bloque.
Y hablaremos de esto en un segundo.
Pero primero, definamos también cuál es el alcance
de una variable es.
Entonces, el alcance de una variable es básicamente toda la región.
de nuestro código, donde se puede acceder a una determinada variable.
Ahora, algunas personas usan la palabra alcance para todo esto,
pero me gusta definir todos estos conceptos que tenemos aquí
de una manera clara, porque en realidad sutiles diferencias.
Por ejemplo, si lo miras de cerca,
El alcance no es lo mismo que el alcance de una variable.
Y entonces deberías saber acerca de las diferencias sutiles, ¿verdad?
Y sé que todavía puede sonar igual por ahora,
pero después de ver un par de ejemplos
y escribiendo algo de código real,
entenderás todo lo que te acabo de mostrar aquí.
De todos modos, ahora hablemos de los tres tipos diferentes.
de alcance en JavaScript.
Eso es alcance global, alcance de función y alcance de bloque.
Y recuerda, el alcance es el lugar en nuestro código
donde se declaran las variables.
Y cuando digo variables, exactamente lo mismo
es cierto para las funciones también.
Porque al final, las funciones son solo valores
que se almacenan en variables.
Primero, el alcance global es una vez más
para el código de nivel superior.
Así que esto es para las variables que se declaran
fuera de cualquier función o bloque.
Estas variables serán accesibles en todas partes
en nuestro programa, en todas las funciones y todos los bloques.
Así que realmente, en todas partes.
A continuación, todas y cada una de las funciones crean un alcance.
Y las variables declaradas dentro del alcance de esa función
solo son accesibles dentro de esa función.
Esto también se llama alcance local.
opuesto al alcance global.
Entonces, las variables locales viven en la función, por así decirlo.
Y fuera de la función,
las variables entonces no son accesibles en absoluto.
Nuevamente, esto es técnicamente lo mismo.
como las funciones entorno variable,
pero todavía tenemos que darle el nombre de alcance
en este contexto,
porque los bloques también crean ámbitos.
De todos modos, en este ejemplo aquí,
la variable now es 2037 dentro de la función cog H.
Y por lo tanto, podemos usarlo en la función
para hacer cálculos.
Pero fuera de la función,
mientras intentamos registrarlo en la consola,
obtenemos un error de referencia.
Entonces JavaScript está tratando de encontrar la variable now
en este ámbito global,
tan fuera de la función, pero no puede encontrarlo.
Y entonces va a haber un error.
Y si recuerdas, o eliges un proyecto de juego
de la sección anterior,
también está la razón por la que tuvimos que declarar
un par de variables fuera de la función init,
¿recuerda eso?
Así que teníamos algunas variables declaradas en la función init,
y luego eso nos dio un error
porque otras funciones estaban intentando
para acceder a estas variables.
Pero, por supuesto, estaban en el ámbito de la función.
Y por lo que tenían un alcance local,
por lo que no pudimos acceder a ellos
fuera de esa función donde fueron declarados.
Y aquí, en realidad no importa
qué tipo de función estamos usando.
Declaraciones de funciones, expresiones de funciones
y las funciones de flecha crean su propio alcance.
Ahora, tradicionalmente, solo se utilizan funciones para crear ámbitos.
en JavaScript.
Pero a partir de ES6, los bloques también crean ámbitos ahora.
Y con bloques,
nos referimos a todo lo que está entre llaves,
como el bloque de una sentencia if o un bucle for.
Entonces, al igual que con las funciones,
variables declaradas dentro de un bloque
solo son accesibles dentro de ese bloque
y no fuera de ella.
Ahora, la gran diferencia es que los ámbitos de bloque
solo se aplica a las variables declaradas con let o const, ¿de acuerdo?
De nuevo, solo las variables let y const
están restringidas al bloque en el que fueron creadas.
Por eso decimos que las variables let y const
tienen alcance de bloque.
Entonces, si declaro una variable usando var en este bloque,
entonces esa variable aún sería accesible
fuera del bloque,
y estaría dentro del alcance de la función actual
o al ámbito global.
Y entonces decimos que var tiene un alcance de función.
Así que en ES5 y antes,
solo teníamos alcance global y alcance de función.
Y es por eso que las variables ES5 declaradas con var,
solo se preocupan por las funciones, pero no por los bloques.
Simplemente los ignoran.
Finalmente, también a partir de ES6,
todas las funciones ahora también tienen alcance de bloque,
al menos en modo estricto,
que siempre deberías estar usando de todos modos.
Y al igual que con las variables let y const,
esto significa que las funciones declaradas dentro de un bloque
solo son accesibles dentro de ese bloque, ¿de acuerdo?
Y veremos ejemplos de todo eso en el siguiente vídeo,
cuando vamos a volver a la codificación.
Entonces, para recapitular, let y const variables
así como las funciones tienen un alcance de bloque.
Y si ya conoces otros lenguajes de programación,
el alcance del bloque probablemente esté más en línea
con lo que ya sabes.
Los ámbitos de función son extraños para algunos principiantes.
en el mundo JavaScript.
Y es por eso que se introdujeron los ámbitos de bloque en ES6.
Pero ahora para entender todo esto un poco mejor,
veamos un ejemplo más real y detallado
y también aprenda sobre la cadena de alcance.
Y aquí tenemos un código con diferentes funciones.
y bloques,
y vamos a echar un vistazo a los alcances
que están en este código, así como construir la cadena de alcance.
Y por supuesto, comenzamos con el alcance global.
Como puede ver, la variable myName
es la única declaración de variable
que tenemos en el ámbito global.
Ahora, técnicamente, la primera función
también cuenta como una variable
que está presente en el ámbito global,
pero quiero mantenerlo simple aquí.
Y entonces solo consideraré declaraciones de variables
y sin funciones, ¿de acuerdo?
Solo tenga en cuenta que lo que sea que esté explicando aquí
para variables también funciona igual para funciones.
De todos modos, dentro del ámbito global,
tenemos un ámbito para la primera función
porque cada función crea su propio alcance, ¿recuerdas?
¿Y qué hay en el alcance?
Bueno, es la variable edad la que se declara
justo en la parte superior de la función.
A continuación, dentro del primer ámbito,
Consideremos ahora la segunda función,
que también creará su propio alcance
que contiene la variable de trabajo establecida en profesor.
Así que como ves,
tenemos una estructura anidada de alcances
con un alcance dentro del otro.
Pero ahora viene la parte realmente interesante.
Porque aquí en la segunda función,
tenemos esta línea de código
donde necesitamos la variable myName
y la variable edad,
los cuales no fueron declarados dentro del alcance actual.
Pero realmente necesitamos estas variables aquí,
porque de lo contrario no podemos crear esta cadena aquí, ¿verdad?
Entonces, ¿cómo se puede arreglar esto?
¿Cómo sabrá el motor de JavaScript los valores?
de estas variables?
Bueno, el secreto es que cada alcance
siempre tiene acceso a todas las variables
de todos sus ámbitos exteriores.
Entonces, desde todos sus ámbitos principales.
En nuestro ejemplo, esto significa que el segundo alcance
puede acceder a la variable de edad desde el alcance
de la primera función.
Por supuesto, esto también significa que el primer alcance
puede acceder a las variables que están en el ámbito global,
porque ese es el ámbito principal.
Como consecuencia de esto,
el segundo osciloscopio también podrá acceder
la variable myName del alcance global,
porque tiene acceso a las variables
del primer alcance.
Y por cierto, todo esto también se aplica a los argumentos de función.
Pero en este ejemplo, simplemente no tenemos ninguno.
Y así es esencialmente cómo funciona la cadena de alcance.
En otras palabras,
si un alcance necesita usar una determinada variable,
pero no puede encontrarlo en el alcance actual,
buscará en la cadena de alcance
y ver si puede encontrar una variable
en uno de los ámbitos principales.
Si puede, utilizará esa variable.
Y si no puede, entonces habrá un error.
Y este proceso se llama búsqueda de variables.
Ahora es importante tener en cuenta que estas variables
no se copian de un ámbito a otro, ¿de acuerdo?
En su lugar, los alcances simplemente buscan en la cadena de alcance
hasta que encuentran una variable que necesitan
y luego lo usan.
Lo que también es extremadamente importante tener en cuenta
es que esto no funciona al revés.
Un cierto alcance nunca, nunca tendrá acceso
a las variables de un ámbito interno.
En este ejemplo, el primer ámbito, por ejemplo,
nunca tendrá acceso a la variable de trabajo
que se almacena en el segundo ámbito, ¿de acuerdo?
De nuevo, un ámbito solo puede buscar en una cadena de ámbitos,
pero no puede mirar hacia abajo básicamente.
Entonces solo se puede usar el ámbito principal,
pero sin alcances secundarios.
De todos modos, con todo esto en su lugar ahora,
esta línea de código se puede ejecutar
e imprimir en la consola.
Jonas es un profesor de 30 años,
aunque las variables myName y age
no se definieron en el alcance actual.
Todo lo que hizo el motor fue sacarlos de la cadena de alcance.
Y como te habrás dado cuenta,
de hecho, ya hemos hecho esto antes en nuestro propio código.
Realmente no entendíamos lo que estaba pasando.
y cómo funcionó todo.
Pero ahora sabemos cómo funciona.
Increíble, ¿verdad?
De todos modos, todavía nos queda un alcance más aquí,
y ese es el creado por este bloque aquí.
Recuerda que a partir de ES6,
no solo las funciones crean ámbitos, sino también bloques.
Sin embargo, estos ámbitos solo funcionan para los tipos de variables ES6.
Así que para las variables let y const.
Es por eso que la única variable que está en el alcance
es la variable década.
La variable millennial no se declara con const o let,
y, por lo tanto, no se limita solo a este bloque.
En cambio, la variable millennial es en realidad parte
del primer ámbito de función.
De nuevo, para una variable declarada con var,
los ámbitos de bloque no se aplican en absoluto.
Son funciones con ámbito, no con ámbito de bloque.
Let y const por otro lado
son de hecho bloques de ámbito, ¿de acuerdo?
Esta es una de las cosas fundamentales.
que debe tener en cuenta acerca de let, const y var,
y sobre el alcance en general.
Entonces, si está tomando notas y espero que esté tomando
muchas notas,
entonces esto definitivamente debe estar ahí.
Ahora sobre una cadena de alcance,
si la variable millennial está en el ámbito de la primera función,
entonces, por supuesto, el segundo alcance de la función
también tiene acceso a ella,
incluso si realmente no necesita esa variable.
También la cadena de alcance, por supuesto,
también se aplican a los ámbitos de bloque.
Y por lo tanto en o si el alcance del bloque,
tenemos acceso a todas las variables
de todos sus ámbitos exteriores.
Entonces, desde el primer alcance de la función,
y por supuesto desde el ámbito global.
Por eso dije en la última diapositiva
que las variables en un ámbito global
son accesibles desde todas partes.
Lo son, porque siempre lo son.
en la parte superior de la cadena de alcance.
De hecho, llamamos variables en el ámbito global,
variables globales, muy creativo, ¿verdad?
Pero en realidad usamos mucho este término en JavaScript.
Ahora es importante entender
que nuestro alcance de bloques morados
no tiene acceso a ninguna variable
desde el alcance de la segunda función amarilla.
Y lo mismo, al revés.
¿Y por qué es eso?
Bueno, es por el alcance léxico
como aprendimos en la última diapositiva.
Entonces, la forma en que podemos acceder a las variables
depende de donde se coloque el alcance,
así que donde está escrito en el código.
En este caso, ninguno de estos dos alcances está escrito
uno dentro del otro.
Ambos son ámbitos secundarios de la primera función.
Incluso podríamos decir que son unos visores hermanos.
Y así, por las reglas del alcance léxico,
no pueden tener acceso a las variables de los demás,
simplemente porque uno no está escrito dentro del otro.
También podemos decir que la cadena de alcance
solo funciona hacia arriba, no hacia los lados.
De acuerdo, entonces esto fue mucho para asimilar,
pero espero que todo siga teniendo sentido
en este punto.
Y si no, no te preocupes,
veremos todo esto funcionando en la práctica
en el siguiente vídeo.
Pero por ahora, sin embargo,
hay una cosa más de la que tenemos que hablar,
cuál es la diferencia entre la cadena de alcance
y para llamar a la pila.
Recibo muchas preguntas sobre esto todo el tiempo.
Y por eso decidí hablar de
cómo la pila de llamadas, el contexto de ejecución,
entornos variables y alcance
todos están relacionados entre sí.
Entonces, antes de pasar al siguiente video.
Y una vez más,
veamos un poco más de código aquí.
Entonces tenemos tres funciones llamadas primera, segunda y tercera,
para que esto sea más fácil de entender.
Empezamos llamando a la primera función,
que luego llama a la segunda función,
que a su vez llama a la tercera función.
Por lo que aprendimos antes,
la pila de llamadas para este ejemplo se verá así, ¿verdad?
Un contexto de ejecución para cada función.
en el orden exacto en que fueron llamados.
También incluyeron la variable entorno.
de cada contexto de ejecución.
Por ahora, todo esto no tiene nada que ver con los alcances.
o la cadena de alcance, ¿de acuerdo?
Todo lo que estoy haciendo es crear un contexto de ejecución
para cada llamada de función y llenarlo
con las variables de esa función.
Y puedes pausar el video aquí por un momento.
comprender el contenido de cada entorno variable.
Bien, y ahora que hiciste eso
y tenemos todos estos entornos variables en su lugar,
en realidad podemos comenzar a construir la cadena de alcance.
Como siempre, vamos a comenzar con el alcance global.
Y las variables disponibles en el alcance global.
son exactamente los que están almacenados en el entorno variable
del contexto de ejecución global.
Y dado todo lo que hemos aprendido hasta ahora,
eso tiene sentido, ¿verdad?
Y tenga en cuenta que en este ejemplo,
De hecho, estoy incluyendo funciones en cada ámbito.
a diferencia de lo que hicimos en la diapositiva anterior.
Ahora en el ámbito global, también llamamos a la primera función,
que es la razón por la que tenemos un contexto de ejecución para ello
en la pila de llamadas.
Y esta función, por supuesto, también tiene su propio alcance,
que contiene todas las variables que se declaran
dentro de la función.
Y una vez más, esto es exactamente lo mismo.
como el entorno variable
del contexto de ejecución de funciones.
Sin embargo, eso no es todo
porque ahora ya sabemos sobre la cadena de alcance.
Entonces, el primer alcance también tiene acceso a todas las variables.
desde su ámbito principal,
gracias a la cadena de alcance.
Ahora, como ya sabemos,
la cadena de alcance tiene que ver con el orden
en el que las funciones están escritas en el código.
Pero lo que es realmente importante tener en cuenta aquí
es que la cadena de alcance no tiene nada que ver con el orden
en el que se llamaron funciones.
O en otras palabras, la cadena de alcance no tiene nada que ver
con el orden de los contextos de ejecución en la pila de llamadas.
La cadena de alcance obtiene los entornos variables.
del contexto de ejecución como se muestra aquí con las flechas rojas,
Pero eso es todo.
El orden de las llamadas a funciones no es relevante.
a la cadena de alcance en absoluto, ¿de acuerdo?
Realmente tenlo en cuenta.
Ahora, pasando a la segunda función ahora,
una vez más, su alcance es igual a su entorno variable.
También está escrito léxicamente dentro de la primera función.
Y por supuesto,
también tendrá acceso a todos sus ámbitos principales.
Entonces podemos decir que la cadena de alcance en un cierto alcance
es igual a sumar todos los entornos variables
de todos los ámbitos principales.
Y este es nuestro alcance,
y la cadena de alcance están integradas en el motor de JavaScript
entre bastidores.
Bueno.
Ahora en la segunda función,
tratamos de llamar a la tercera función.
Pero, ¿por qué funciona eso?
Bueno, funciona porque la tercera función
está en la cadena de ámbito del segundo ámbito de función
como podemos ver aquí en nuestro diagrama de cadena de alcance.
Es una función en el ámbito global o una función global,
y por lo tanto es accesible en todas partes.
Por supuesto, esto creará un nuevo alcance.
junto con la cadena de alcance como ya sabemos.
Genial, entonces, ¿qué sucede en esta tercera función?
Bueno, estamos tratando de actuar como variables B, C,
D y A aquí.
D no hay problema porque está justo ahí
en el tercer ámbito de funciones.
Así que ese es fácil.
Entonces la variable C no está en un ámbito local
y entonces JavaScript necesita hacer una búsqueda de variables.
Entonces busca en una cadena de alcance
buscando la variable C,
pero no está allí.
Y por supuesto que no lo es,
porque C está definido en la segunda función,
y simplemente no hay forma en que la tercera función
puede acceder a las variables definidas en la segunda función.
Y eso es cierto,
aunque fue la segunda función la que llamó a la tercera.
Y aquí hay aún más pruebas
que el orden en que se llaman las funciones
no afecta la cadena de alcance en absoluto.
Y aquí como resultado,
obtenemos el error de referencia
porque tanto C como B no se pueden encontrar
en el tercer ámbito ni en la cadena de ámbito.
Bueno.
Y con esto, espero haberlo dejado muy claro.
ese contexto de ejecución, entornos variables,
el alcance de la pila de llamadas y la cadena de alcance son todos diferentes,
pero todavía conceptos muy relacionados.
Y si aún no está claro como el cristal,
entonces no hay problema en volver a ver esta diapositiva,
o tal vez incluso toda esta conferencia un poco más tarde.
Y sé que esta fue una conferencia bastante larga.
con un montón de cosas para asimilar.
Y aquí hay un resumen útil
con las principales conclusiones de este video.
Entonces, para comenzar, el alcance hace la pregunta,
"¿Dónde viven las variables?"
O "¿Dónde podemos acceder a una determinada variable,
"¿Y dónde no?"
De eso se trata el alcance.
Ahora, hay tres tipos de alcance en JavaScript.
El alcance global, alcances definidos por funciones
y ámbitos definidos por bloques, a partir de ES6.
Sin embargo, solo las variables let y const tienen alcance de bloque.
Las variables declaradas con var terminan automáticamente
en el ámbito de función más cercano.
A continuación, en JavaScript, tenemos alcance léxico,
lo que significa que las reglas de dónde podemos acceder a las variables
se basan en el lugar de las funciones del código
y se escriben bloques.
Y ahora, que empiece la magia,
porque cada alcance siempre tiene acceso
a todas las variables de todos sus ámbitos externos.
Y esto es lo que llamamos la cadena de alcance.
Cuando una determinada variable no está en el alcance actual,
el motor mira hacia arriba en la cadena de alcance
hasta que encuentre la variable que está buscando,
y este proceso se llama búsqueda de variables.
Es importante tener en cuenta que la cadena de alcance
es una calle de sentido único.
Entonces, un alcance nunca tendrá acceso a las variables.
de un alcance interno, solo de alcances externos.
También podemos pensar en la cadena de alcance en un cierto alcance
como siendo igual a sumar
todos los entornos variables de todos los ámbitos principales.
Y finalmente, debemos tener en cuenta
que la cadena de alcance no tiene nada que ver
con el orden en que se llamaron las funciones.
Así que el orden de las llamadas a funciones
no afecta la cadena de alcance en absoluto.
Bien, y ahora eso es todo.
Esto es, en pocas palabras, alcance en JavaScript.
Nos vemos en el próximo vídeo.