Closure Série - POO para JS

Hoje vou continuar a falar sobre como passar de Programação Orientada-objetos para JavaScript cada vez mais funcional. Uma outra coisa bastante diferente para se comparar entre ambos os paradigmas é o uso de closure. No JavaScript, anteriormente tínhamos reproduzido aquela “classe” e acabamos criando uma closure. Vamos…

Closure Série - POO para JS


por: Tulio Faria

Categoria: DicasVideos
Thumbnail

Hoje vou continuar a falar sobre como passar de Programação Orientada-objetos para JavaScript cada vez mais funcional.

Uma outra coisa bastante diferente para se comparar entre ambos os paradigmas é o uso de closure. No JavaScript, anteriormente tínhamos reproduzido aquela “classe” e acabamos criando uma closure. Vamos supor que eu faça uma função dessa forma:

function func1() {

const name = ‘tulio faria’

function func1b(){

console.log(name)

}

func1b()

}



func1

Em JavaScript é normal e podemos fazer uma função dentro de uma função como no exemplo acima. Você percebeu que eu consegui acessar o ‘name’? Isso é uma característica do JS. Por conseguir colocar uma função em uma variável, é possível ter funções dentro de funções. Essa função interna consegue acessar o escopo da função pai.

No cenário, vamos executar esse código todo síncrono e em seguida ele morre, porém, existe uma outra situação onde eu consigo manter esse escopo vivo. Vamos supor que eu queira passar uma saudação:

function func1() {

const saudacao = ‘Ola’ +name

function func1b(){

console.log(saudacao)

}

return func1b

}



const saudarOTulio = func1(‘Tulio Faria’)

saudarOTulio()

Quando eu fiz isso, a func1 passou a ser uma closure porque ela travou esse escopo inteiro, nisso eu posso a qualquer momento chamar essa saudação. Existem alguns tipos de funcionalidades dentro do JS  que permitem que a gente faça alguns tipos interessantes, como por exemplo:

const contador = function(num){

let atual = 1

let timer = setInterval(() => {

if (atual===num){

clearInterval(timer)

}

console.log(atual++)

}, 1000)

}

contador(5)

Temos um contador que está usando todas as variáveis do lado de fora e temos um contador separado. Perceba que o setInterval está usando as variáveis de fora, isso cria um enclausuramento dessas variáveis. Outra coisa importante: esse código é assíncrono, então sempre que chamamos o setInterval, colocamos isso no event loop.

Deixe suas dúvidas e sugestões nos comentários. Curta o DevPleno no Facebook, se inscreva no canal no YouTube e cadastre seu e-mail para não perder as atualizações. Abraço!