cierre

Un cierre es una función⚙️ que tiene acceso a una función externa⚙️ incluso después de que la función externa haya terminado. El cierre es necesario para brindar acceso de la función interna al alcance de la función externa️, pero al mismo tiempo cerrar el acceso desde el entorno externo a las variables de la función interna⚙️.

Requisitos para crear un Cierre:

1. Una función externa que se llama en el código.
2. Hay una función interior en la función exterior.
3. Como resultado, la función externa devuelve la interna.

Considere crear un cierre usando un ejemplo:

Editor en vivo

function learnJavaScript() { const getFruit = () => { let fruit = 'Banana', show = () => { return fruit } return show } let showFruit = getFruit() return showFruit() }

function learnJavaScript() {
  const getFruit = () => {
    let fruit = 'Banana',
      show = () => {
        return fruit
      }
    return show
  }
  let showFruit = getFruit()
  return showFruit()
}

Resultado

Loading...

1. En el ejemplo, hemos creado una función externa getFruit;
2. Dentro de getFruit se creó una función interna show.
3. La función getFruit devuelve la función show como resultado.
4. A continuación en el código, asignamos el resultado de la función getFruit a la variable showFruit.
5. Porque el resultado de getFruit es una función, entonces showFruit no se convierte en una variable, sino en una función.
6. El resultado de toda la construcción fue la variable fruit ubicada dentro de la función getFruit, se cerró. Ahora solo podemos averiguar el valor de esta variable , no se puede cambiar.

Video

Ejemplos

Considere más ejemplos para comprender.

Encimera

El mostrador, el ejemplo más sencillo sobre el que se puede considerar el trabajo del cierre.

Editor en vivo

function learnJavaScript() { const makeCounter = () => { let x = 0 return () => { return ++x } } const counter = makeCounter() return counter() }

function learnJavaScript() {
  const makeCounter = () => {
    let x = 0
    return () => {
      return ++x
    }
  }
  const counter = makeCounter()
  return counter()
}

Resultado

Loading...

Contador mejorado

Como resultado, no tendremos una función⚙️, sino varias a la vez.

Editor en vivo

function learnJavaScipt() { let makeCounter = () => { let x = 0 return { inc: () => { return ++x }, dec: () => { return --x }, val: () => { return x } } } let counter = makeCounter() counter.inc() // 1 counter.inc() // 2 counter.inc() // 3 counter.inc() // 4 counter.dec() // 3 return counter.val() }

function learnJavaScipt() {
  let makeCounter = () => {
    let x = 0
    return {
      inc: () => {
        return ++x
      },
      dec: () => {
        return --x
      },
      val: () => {
        return x
      }
    }
  }

  let counter = makeCounter()
  counter.inc() // 1
  counter.inc() // 2
  counter.inc() // 3
  counter.inc() // 4
  counter.dec() // 3
  return counter.val()
}

Resultado

Loading...

Cerrando en un bucle

Editor en vivo

function learnJavaScript() { let res = [] for (let i = 0; i < 5; i++) { res[i] = () => { return i } } return res[2]() }

function learnJavaScript() {
  let res = []
  for (let i = 0; i < 5; i++) {
    res[i] = () => {
      return i
    }
  }
  return res[2]()
}

Resultado

Loading...

Recordamos la frase

Editor en vivo

function learnJavaScript() { let phrase = x => { return y => { return x + ' ' + y } } hello = phrase('Hello') return hello('World') }

function learnJavaScript() {
  let phrase = x => {
    return y => {
      return x + ' ' + y
    }
  }

  hello = phrase('Hello')
  return hello('World')
}

Resultado

Loading...

Total

Los cierres son uno de los conceptos fundamentales más importantes en JavaScript y deben ser entendidos por todos los desarrolladores de JS. Comprender los cierres 💡 es uno de los pasos para escribir aplicaciones eficientes y de alta calidad.

¿Problemas?

Escribe en Discord o Telegram chat y suscríbete a nuestras [noticias](https://t.me/ aplicación javascript )

preguntas

¿Qué es un cierre?

1. Construcción
2. Una función que tiene acceso a una función externa
3. Concepto

En un cierre, ¿qué está cerrado a qué?

1. Función en el alcance
2. Variables en funciones

¿Qué hay que hacer para acceder a una variable cerrada?

1. Lo describiré y lo usaré.
2. Está disponible
3. La variable solo se puede ver

Para comprender cuánto ha aprendido esta lección, realice una prueba en la aplicación móvil de nuestra escuela sobre este tema o en nuestro bot de Telegram.

Enlaces

1. Learn JavaScript
2. MDN Web Docs
3. Cierres de JavaScript

Contributors ✨

Thanks goes to these wonderful people (emoji key):

IIo3iTiv

Dmitriy Vasilev 💵

Resoner2005 🐛 🎨 🖋

Navernoss 🖋 🐛 🎨