,
23 tweets,
6 min read
Read on Twitter
Hoje, continuarei a falar sobre aquele conceito de Programação Funcional que algumas pessoas dizem ser complicado entender, e que eu quero fazer você perceber que não é:
🔥 Closures 🔥
Vem comigo na mini-thread! 👇
🔥 Closures 🔥
Vem comigo na mini-thread! 👇
Na thread passada explorei passo a passo, com gráficos e exemplos, o Escopo Léxico do JavaScript.
Não há como você entender como closures funcionam sem compreender como o JavaScript lida com escopos.
Se você não viu esse conteúdo, o link está nos últimos tweets =)
Não há como você entender como closures funcionam sem compreender como o JavaScript lida com escopos.
Se você não viu esse conteúdo, o link está nos últimos tweets =)
Primeiro, vamos relembrar o exemplo final no qual chegamos na 1ª thread sobre closures, onde vimos que:
🔹 Em JavaScript, toda função é uma closure;
🔹 Em JavaScript, toda função é uma closure;
🔹 Uma closure é a combinação de uma função e o escopo léxico no qual essa função foi declarada. Ou seja, uma closure carrega consigo qualquer var/let/const que está no mesmo escopo em que ela foi declarada:
Vamos à alguns exemplos mais interessantes =D
No código abaixo, a função `adderFactory` recebe um único parâmetro (num1) e retorna uma nova função.
A função que ela retorna, recebe um único parâmetro (num2) e retorna a soma de `num1` e `num2`:
No código abaixo, a função `adderFactory` recebe um único parâmetro (num1) e retorna uma nova função.
A função que ela retorna, recebe um único parâmetro (num2) e retorna a soma de `num1` e `num2`:
`adderFactory` é uma factory function. Ela cria funções que podem adicionar valores específicos aos seus parâmetros.
No exemplo acima, essa factory function é utilizada para criar duas novas funções: uma que adiciona 10 ao seu argumento, e outra que adiciona 100.
No exemplo acima, essa factory function é utilizada para criar duas novas funções: uma que adiciona 10 ao seu argumento, e outra que adiciona 100.
`add10` e `add100` são closures. Elas compartilham a mesma definição de corpo de função, mas armazenam ambientes léxicos diferentes:
🔸 No ambiente léxico de `add10`, o valor de `num1` é 10;
🔸 No ambiente léxico de `add100`, o valor de `num1` é 100;
🔸 No ambiente léxico de `add10`, o valor de `num1` é 10;
🔸 No ambiente léxico de `add100`, o valor de `num1` é 100;
Podemos ainda refatorar essa factory function, deixando-a mais concisa. Sem parênteses, chaves, `return` e quebras de linha desnecessárias:
🔥 "Tá, mas pra quê vou usar Closures?"
Muito do código Front-end que você escreve é baseado em eventos.
Você especifica um comportamento e esse comportamento é disparado através de uma ação do usuário.
Muito do código Front-end que você escreve é baseado em eventos.
Você especifica um comportamento e esse comportamento é disparado através de uma ação do usuário.
E geralmente, esse comportamento é setado como um callback. Uma função única que é executada como resposta de um evento.
Vamos codar alguns botões que ajustam o tamanho do texto de uma página.
Vamos codar alguns botões que ajustam o tamanho do texto de uma página.
Uma forma de fazer isso é especificar o tamanho da fonte do elemento `<body>` em pixels e setar o tamanho da fonte dos outros elementos da página com unidades relativas:
Obs.: Sei que não tá bonito, mas meu foco aqui é a funcionalidade da aplicação =)
O objetivo do nosso script é fazer os botões modificarem o font-size do `<body>`.
O objetivo do nosso script é fazer os botões modificarem o font-size do `<body>`.
Consequentemente, isso fará com que o font-size do parágrafo e dos headings sejam modificados também, devido às unidades relativas que eles possuem.
Vamos declarar uma função `makeSizer`, que recebe um parâmetro `size` e retorna uma nova função (uma closure).
Vamos declarar uma função `makeSizer`, que recebe um parâmetro `size` e retorna uma nova função (uma closure).
Quando essa closure é invocada, ela pega o elemento `<body>` e seta o font-size dele de acordo com o parâmetro `size`:
Agora vamos declarar 3 const que irão receber 3 invocações de `makeSizer`.
Cada invocação recebe como argumento uma string indicando o tamanho do font-size a ser setado:
Cada invocação recebe como argumento uma string indicando o tamanho do font-size a ser setado:
Ou seja, cada const recebeu a closure que retornamos!
Isso significa que se encadearmos um event listener em um botão, e passarmos por referência uma das closures que essas const estão armazenando como callback do evento, a closure se lembra do valor a ser setado e brilha lindamente fazendo o que deve ser feito:
E claro, podemos refatorar esse código, eliminando repetições e deixando-o mais conciso:
Acha que esse conteúdo pode ajudar + pessoas❓
👉Retweeta👈 essa thread!
Para facilitar, linkei ela ali em baixo =)
Te vejo na próxima 🔥
👉Retweeta👈 essa thread!
Para facilitar, linkei ela ali em baixo =)
Te vejo na próxima 🔥
Threads sobre Programação Funcional que você também pode gostar:
🔗Higher Order Functions:
🔗Introdução à Closures - Parte 1:
🔗Higher Order Functions:
🔗Introdução à Closures - Parte 1:
🔗Explorando Funções Puras:
🔗Introdução à Programação Funcional:
🔗Introdução à Programação Funcional - Parte 02:
🔗Introdução à Programação Funcional:
🔗Introdução à Programação Funcional - Parte 02:
