Ejemplo De Cierre De Javascript

| | | | | | | | | | | | | | | | | | | | | | | | |

Una de las palabras de moda más importantes en el lenguaje JavaScript es cierre. Es el tema de muchas preguntas de entrevistas de trabajo en las empresas FAANG. En este artìculo, hablaremos sobre el cierre y el alcance, ilustraremos sus conceptos con ejemplos simples y luego terminaremos con una pregunta de muestra de una entrevista con uno de los gigantes tecnològicos más grandes.

Cuando alguien te dice que algo está o no dentro del alcance de un proyecto, ¿qué significa eso? & nbsp;

Me gustarìa pensar en un periscopio o un telescopio cuando pienso en la respuesta a esto. Estos instrumentos nos muestran todo tipo de cosas dentro de los lìmites de la lente que tiene: & nbsp; está en alcance. Si está fuera del alcance, no podrá ver más allá del diámetro de la lente. Y no es posible iluminar algo fuera del diámetro. Deberìa pensar en esto ya que hablamos de tres tipos de alcance muy importantes y distintos en JavaScript: local, global y léxico. & Nbsp;

Alcance local

Alcance local es el más peque√±o de los tres ámbitos de los que hablaremos hoy. Cuando declaramos una funciòn, cualquier cosa dentro de los corchetes ({}) se considera local a la funciòn. Cuando el motor de JavaScript lee la funciòn, declarará las variables; cuando termine, destruirá las variables. & nbsp;

Como puede ver, cuando " console.log () " el resultado de la funciòn de saludo invocada, podemos acceder al nombre del sitio web después de que se ejecutò la funciòn. Esto nos da el " Hello Python.Engineering " cadena que estábamos buscando. El console.log () de la variable que se declarò dentro de la funciòn arroja un error porque no está definida.

Como ya se mencionò, la razòn por la que websiteName no está definido se debe a que las variables se crean dentro de las funciones cuando se invocan y luego se destruyen cuando se ejecuta la sentencia de terminal. Cualquier cosa fuera de la funciòn no tiene acceso a cosas dentro de la funciòn a menos que tenga una configuraciòn especial.

Alcance global

El siguiente alcance es prácticamente una traducciòn literal de la frase. Un alcance global toma los elementos declarados fuera de una funciòn y los reserva en un espacio donde todos los scripts y métodos y funciones pueden acceder y usarlos para su lògica. & Nbsp;

¿Qué hace el còdigo anterior si console.log () el contador al final del còdigo? ¿Qué espera que suceda? & Nbsp;

Repasemos el còdigo: & nbsp;

  1. Variable de contador declarada e iniciada en el entorno global. & nbsp;
  2. Agregar funciòn declarada en el entorno global. & Nbsp;
  3. Se invoca Add.
  4. Variable de contador declarada e iniciada en el entorno local. & Nbsp;
  5. El contador local aumenta en 1 & lArr; ¿por qué local y no global? & nbsp;
  6. Se devuelve el contador. La funciòn termina.
  7. Add se invoca nuevamente
  8. Siga los pasos 4 para 6 nuevamente. & Nbsp;
  9. Repita los pasos 3 a 6 nuevamente.
  10. console.log (contador); & lArr; ¿Qué se devuelve? & Nbsp;

Debido a que la funciòn termina cuando el contador está en 1 cada vez, nuestra variable de contador local se vuelve a declarar y se reinicia en 0 cada vez que se ejecuta la funciòn. No importa lo que suceda, el contador siempre se detendrá a 1 a nivel local. & nbsp;

Si una funciòn encuentra una variable dentro de su alcance, no busca en el alcance global la variable & ndash; por lo que la variable global nunca cambia. Por lo tanto, nuestro console.log () generará 0 ya que nuestra variable definida más cercana dentro de esa declaraciòn " s entorno está en el entorno global. & Nbsp;

Lexical Scope

El alcance léxico es uno de los conceptos más fundamentales en JavaScript. Es la idea de que la creaciòn de una funciòn o de una variable será accesible para ciertas partes del còdigo y luego inaccesible para otras partes del còdigo. Todo depende de dònde esté la declaraciòn de cada variable y funciòn.

Echemos un vistazo a este bloque de còdigo: & nbsp;

Aquì tenemos un conjunto de funciones anidadas. La funciòn init () declara una variable llamada var1, declara una funciòn llamada second e invoca second (). & Nbsp;

Cuando el compilador pasa a través de este còdigo por primera vez, se hace una observaciòn de alto nivel de lo que tenemos:

En este punto, no podemos ver nada más dentro del funciòn init () & ndash; simplemente sabemos que la funciòn existe. Cuando se invoca nuestra funciòn init (), el compilador echa otro vistazo de alto nivel a lo que hay dentro de la funciòn:

  1. var1
  2. second () funciòn
  3. invocar second ()
  4. La funciòn init () no sabe nada sobre lo que está sucediendo dentro del bloque second (). Solo puede ver lo que está en su léxico entorno & ndash; su estado circundante.

    Cada funciòn anidada está en un contenedor más peque√±o, como un conjunto de mu√±ecas de anidaciòn de matrioskas rusas (consulte la parte superior de la página, por ejemplo, si está inseguro de lo que son). Las mu√±ecas en saber lo que está sucediendo dentro de su contenedor y lo que ya ocurriò o declarado / leìdo en el padre. La mu√±eca más grande, por ejemplo, solo sabe que existe la pròxima mu√±eca en su contenedor. No sabe sobre ninguna de las otras mu√±ecas del conjunto, solo qué hay en su entorno léxico (su estado) y qué ya sucediò (el alcance externo). & Nbsp;

    En esencia, sabemos dos cosas:

    1. El alcance externo no puede ver el alcance interno.
    2. El alcance interno tiene acceso al alcance externo. & nbsp;

    Debido a que el afrontamiento externo no puede ver lo que está sucediendo en el ámbito interno, podemos decir con seguridad que se trata de una relaciòn unidireccional. El interior puede ver y usar variables del alcance exterior, pero el exterior no puede ver el interior. Esto se denomina alcance léxico . & Nbsp;

    La belleza del alcance léxico es que el valor de una variable está determinado por su ubicaciòn en el còdigo. Las funciones buscan el significado de una variable dentro de su entorno local primero & ndash; si no puede encontrarlo, se mueve a la funciòn que definiò esa funciòn. Si no puede encontrarlo allì, se mueve hacia arriba en la cadena hasta la siguiente funciòn definida.

    Esto se convierte en un concepto muy importante en JavaScript que surgirá una y otra vez a medida que aprenda más sobre Marcos de JavaScript y còmo funcionan. Puedes pasar desde el exterior, pero nunca puedes pasar " arriba " en la otra direcciòn. Esto es muy importante ya que llegamos al tema principal en cuestiòn: cierre .

Cierre

La definiciòn de cierre es muy similar a la del alcance léxico. La principal diferencia entre los dos es que el cierre es una funciòn de orden superior y el alcance léxico no lo es. Una funciòn de orden superior tiene una caracterìstica básica: devuelve una funciòn o usa una funciòn como parámetro. & nbsp;

El cierre es una funciòn que puede acceder a su alcance léxico, incluso cuando esa funciòn se invoca más tarde. & nbsp;

Tanto el cierre como el alcance léxico tienen sus propias variables, pueden acceder a las variables y parámetros de una funciòn principal y pueden usar variables globales. Caminemos a través del siguiente còdigo: & nbsp;

  1. greeting (), pero a√∫n no conocemos el contenido. & Nbsp;
  2. greetUser existe, pero todavìa no conoces el contenido
  3. greetUser () & ndash; esto invoca la lìnea anterior, que, a su vez, invoca la funciòn greeting (). & nbsp;
  4. userName declarado
  5. welcomeGreeting () existe, pero don & rsquo ; todavìa no conozco el contenido
  6. La declaraciòn de retorno debajo del bloque welcomeGreeting () devuelve esa misma funciòn
  7. console.log (" Hola, " + nombre de usuario); Nuestro console.log aquì puede acceder al ámbito principal para obtener el valor de userName
  8. Declaraciòn de terminal que finaliza la funciòn y destruye el significado de las variables dentro del bloque de còdigo.

En este còdigo, estamos pasando informaciòn al anidar funciones juntas para que se pueda acceder al alcance principal más tarde.



Conclusiòn

En este artìculo, hablamos sobre un tema bastante importante de JavaScript: alcance y cierres. Recomendarìa diversificar y leer varios artìculos diferentes sobre el tema. La forma en que se ense√±a esto puede provenir de una variedad de puntos de vista y ndash; lo que significa, por supuesto, que hay muchas formas de aprenderlo. ¬°Espero que este manual te haya sido √∫til! ¬°Buena suerte para continuar con tu estudio sobre los cierres!