15: O que são closures?

February 15, 2020

https://www.instagram.com/tv/B9zefp9HBVa/

Closures é um tópico controverso. O que eu gostaria de ouvir como entrevistador seria algo como:

Closures significa que uma função interna sempre tem acesso as variáveis e aos parâmetros de sua função externa, mesmo após o retorno da função externa.

Cê ta ligado que dá pra criar função dentro de função né?

exemplo:

function OuterFunction () {
  var outerVariable = 1

  function InnerFunction () {
    console.log(outerVariable)
  }

  InnerFunction()
}

No exemplo acima, InnerFunction() pode acessar a variável outerVariable mesmo ela estando declarada no escopo de cima.

function OuterFunction () {
  var outerVariable = 100
  var parameters = JSON.stringify(arguments)

  function InnerFunction () {
    console.log(
      `[OUTER CLOSURE] OuterVariable continua viva no meu coração: ${outerVariable}`
    )
    console.log(
      `[OUTER CLOSURE] Parâmetros que mandaram para o Outer: ${parameters}`
    )
    console.log(`[INNER] Meus parâmetros: ${JSON.stringify(arguments)}`)
  }

  return InnerFunction
}

var innerFunc = OuterFunction(123, "vral")
innerFunc()

Ele chama a OuterFunction mas a única referência que você tem é a da InnerFunction, mas MESMO ASSIM você continua tendo acesso as variáveis que foram passadas pelo parâmetro para a OuterFunction bem como o que foi declarado nela que no caso é a outerVariable

Isso permite que ninguém externamente consiga mudar essas variáveis de dentro do escopo do OuterFunction, olha só:

var counter = (function () {
  var privateCounter = 0

  function changeBy (val) {
    privateCounter += val
  }

  return {
    increment: function () {
      changeBy(1)
    },

    decrement: function () {
      changeBy(-1)
    },

    value: function () {
      return privateCounter
    },
  }
})()

var original = counter.value()
console.log("Contador Original: ", original)

alert(counter.value()) // altera o valor

counter.increment()
counter.increment()

console.log("Contador Original: ", original) // continua a mesma bosta
alert(counter.value())

counter.decrement()
alert(counter.value())

console.log("Contador Original: ", original) // continua a mesma bosta

Explicação do Douglinhas (um dos principais devs de JS do mundo).
Tutorial gostosinho do TutorialsTeacher.

Baseado no excelente artigo: 70 Interview Questions