Clouseres

[jhonesgoncalves]

Bom dia mestre,

eu entendi um pouco sobre clouseres, porem gostaria de uma explicação mais detalhada o mesmo para hosting?

@fdaciuk

[fdaciuk]

Oi @jhonesgoncal! Você tinha aberto uma issue sobre isso, que eu respondi aqui: https://github.com/da2k/curso-javascript-ninja/issues/2358

Ficou alguma dúvida com relação a isso ainda?

[jhonesgoncalves]

A MINHA DUVIDA LÁ FOI EM RELAÇÃO A IIFE usada na clousure. a minha duvida aqui é uma definição de clousure

[fdaciuk]

Então, mas a explicação foi em cima disso =) A closure é o nome que damos a uma função dentro de outra que consegue "guardar" um valor externo à ela - normalmente passado como parâmetro para a primeira função, ou uma variável criada na primeira função - e essa função mais interna normalmente é executada no futuro, fazendo alguma computação baseada nesse valor que ela conseguiu guardar =)

Essa função mais interna é o que chamamos de closure =)

[jhonesgoncalves]

Então , o que não consegui assimilar foi uma utilidade real nisso.

[fdaciuk]

Agora sim ficou clara a sua dúvida xD Vamos lá, exemplo simples: imagine um carrinho de compras com vários itens. Cada item tem um botão de remover que executa a mesma ação: faz um request para o servidor que remove o produto ao qual o botão foi clicado. O código é o mesmo, mas tem um pequeno problema: você precisa enviar o ID do produto que está sendo removido.

Esse problema fica fácil de ser resolvido com closures.

Você sabe que funções passadas para manipuladores de evento não podem ser executadas, pois ela é executada assim que o evento é disparado, correto?

Então imagine a seguinte função:

function removeProductFromCart (id) {
  return function (e) {
    // aqui você executa a função que remover o produto no carrinho, a função abaixo é só um exemplo
    removeProductById(id)
  }
}

Então você só precisa adicionar no listener de cada botão essa função removeProductFromCart, executando ela e passando o ID do produto que aquele botão vai remover. A função mais interna que está sendo retornada é a closure, que consegue "enxergar" o id passado na primeira função. Essa função mais interna será passada para o manipulador do evento do botão, e só será executada quando o botão for clicado.

Ao clicar, essa função é executada, e ela consegue pegar o ID correto do produto a ser removido, pois ela é uma closure.

O código dos botões ficaria algo assim:

$button1.addEventListener('click', removeProductFromCart(1), false);
$button2.addEventListener('click', removeProductFromCart(2), false);
$button3.addEventListener('click', removeProductFromCart(3), false);

Imaginando que o seu carrinho tem 3 itens, com 3 botões de remover. Assim você consegue reaproveitar a lógica de remoção, apenas passando por parâmetro para a primeira função o único valor que precisa mudar (o id do produto) quando o código é executado =)

Esse é um exemplo simples mas bastante utilizado =)

Ficou mais claro? =)

[jhonesgoncalves]

agora sim. valeu mesmo. e sobre o hoisting?

[fdaciuk]

Legal! Hoisting é aquilo que eu mostrei em aula mesmo: é o que o interpretador do JS faz quando uma variável é declarada: ele "iça" a função para o início do escopo (função) onde ela foi declarada, e seta o seu valor como undefined. Basicamente isso =)