Explicación de los cierres de JavaScript

Una suave introducción al tema de los cierres, clave para comprender cómo funcionan las funciones de JavaScript.

Si alguna vez has escrito unfunciónen JavaScript, ya utilizastecierres.

Es un tema clave para comprender, que tiene implicaciones sobre las cosas que puede hacer.

Cuando se ejecuta una función, se ejecutacon el alcance que estaba en su lugar cuando se definió, ynocon el estado que está en su lugar cuando esejecutado.

El alcance básicamente es el conjunto de variables visibles.

Una función recuerda suAlcance léxicoy puede acceder a las variables que se definieron en el ámbito principal.

En resumen, una función tiene todo un bagaje de variables a las que puede acceder.

Permítanme darles un ejemplo de inmediato para aclarar esto.

const bark = dog => {
  const say = `${dog} barked!`
  ;(() => console.log(say))()
}

bark(Roger)

Esto se registra en la consolaRoger barked!, como se esperaba.

¿Qué sucede si desea devolver la acción en su lugar:

const prepareBark = dog => {
  const say = `${dog} barked!`
  return () => console.log(say)
}

const bark = prepareBark(Roger)

bark()

Este fragmento también se registra en la consola.Roger barked!.

Hagamos un último ejemplo, que reutilizaprepareBarkpara dos perros diferentes:

const prepareBark = dog => {
  const say = `${dog} barked!`
  return () => {
    console.log(say)
  }
}

const rogerBark = prepareBark(Roger) const sydBark = prepareBark(Syd)

rogerBark() sydBark()

Esto imprime

Roger barked!
Syd barked!

As you can see, the state of the variable say is linked to the function that’s returned from prepareBark().

Also notice that we redefine a new say variable the second time we call prepareBark(), but that does not affect the state of the first prepareBark() scope.

This is how a closure works: the function that’s returned keeps the original state in its scope.


More js tutorials: