A maior rede de estudos do Brasil

Grátis
11 pág.
First Class Objects, High-Order functions, Funções Anônimas e Closures no JavaScript

Pré-visualização | Página 1 de 3

04/10/2019 First Class Objects, High-Order functions, Funções Anônimas e Closures no JavaScript
https://medium.com/lfdev-blog/me-explica-96651fc2c105 1/14
First Class Objects, High-Order
functions, Funções Anônimas e
Closures no JavaScript
Felix Costa
Apr 24, 2017 · 10 min read
As vezes em nossa rotina de estudo nos deparamos com certos termos e conceitos que
não tínhamos visto ou mesmo que não conseguimos assimilar e trazer isso pra nossa
realidade de estudos. Principalmente pra quem segue o modelo autodidata, onde você
não segue a risca um modelo e cronograma por vezes pulamos esses mesmos termos e
conceitos desconhecidos e que são essenciais para avançarmos para o próximo nível.
Dentro do universo JavaScript não é diferente e mesmo tendo ideia de cada um dos
termos que irei apresentar nesse post, já me vi os confundindo ou mesmo os
esquecendo, então vamos entender de maneira direta qual a ligação de cada um deles e
entender de maneira breve o que é cada um.
Devo alerta-lo que esse post não tem o objetivo de esgotar os assuntos relacionados a
cada tópico discutido e sim somente abordar uma introdução simples para entender as
04/10/2019 First Class Objects, High-Order functions, Funções Anônimas e Closures no JavaScript
https://medium.com/lfdev-blog/me-explica-96651fc2c105 2/14
diferenças. No final do artigo deixo várias referências para aí sim estudar e se
aprofundar em cada tópico falado. Esse artigo serve mais para tirar dúvidas entre cada
um dos termos citados.
Pre-Requisitos
O único pre-requisito para você ter total entendimento do texto é já estar um pouco
familiarizado com a sintaxe do JavaScript (Não precisa ser o ES6+), ter uma ideia do
que a Programação Funcional propõem resolver (basicamente conceito mesmo). Caso
algo não seja assimilado, deixe sua dúvida nos comentários ou anote os termos
desconhecidos para sua próxima pesquisa/aventura.
Funções
Funções são velhas conhecidas já e em JavaScript elas seguem a mesma estrutura que
em outras linguagens. Ok, isso sabemos.
Uma função simples em JavaScript que retorna o triplo de um parâmetro qualquer
A função acima é praticamente a mesma se for aplicada em outras linguagens. Porque a
ideia das funções é exatamente essa. Mas há uma coisa que nem todas as linguagens
que dão suporte a funções possuem. E é a nossa primeira letrinha misteriosa.
First Class Objects (Objetos de Primeira Classe)
Em JS e em outras linguagens (principalmente as linguagens funcionais ou que dão
suporte a esse paradigma), funções são valores. Na prática podemos simplesmente
dizer que as funções são um tipo especial de objeto e como qualquer outro objeto nós
podemos trata-lo da mesma forma como tratamos os nossos objetos em JavaScript.
Mesmo o JavaScript não sendo uma linguagem puramente Funcional, podemos tomar
algumas ações que classificam as funções JavaScript como Objetos de Primeira Classe,
view raw
1
2
3
4
5
6
7
simpleFunction.js hosted with ❤ by GitHub
function triple(x) {
 return x * 3;
}
triple(30);
// 90
04/10/2019 First Class Objects, High-Order functions, Funções Anônimas e Closures no JavaScript
https://medium.com/lfdev-blog/me-explica-96651fc2c105 3/14
como por exemplo, jogar uma função para uma variável.
Funções que são Objetos de Primeira Classe podem ser associados a qualquer outro tipo de objeto
Mas como isso é possível? No JavaScript funções são objetos, como mencionei acima.
As funções herdam de um tipo especial chamado Object e podem ser usadas atribuídas
com uma chave contendo um respectivo valor.
Da mesma forma como podemos passar uma função para uma variável, podemos usar
funções dentro de nossos objetos literais e usa-los como métodos de nossos objetos.
view raw
1
2
3
4
5
6
7
8
9
firstClassObject.js hosted with ❤ by GitHub
let triple = function (x) {
 return x * 3;
}
triple(3); // output: 9
let anotherVariable = triple;
anotherVariable(30); // output: 90
view raw
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
warrior.js hosted with ❤ by GitHub
let warrior = {
 hp: 100,
 strength: 20,
 attack: function(target) {
 target.hp -= this.strength;
 }
}
let enemy = {
 hp: 100,
 strength: 12,
 attack: function(target) {
 target.hp -= this.strength;
 }
}
warrior.attack(enemy);
console.log(enemy.hp); // output: 80
04/10/2019 First Class Objects, High-Order functions, Funções Anônimas e Closures no JavaScript
https://medium.com/lfdev-blog/me-explica-96651fc2c105 4/14
Exemplo usado em um artigo do Ryan Christiani demonstrando como usar funções como métodos em
nossos objetos
No exemplo acima, criamos dois objetos simples e cada um deles possui uma função
que está atribuída a uma chave específica do objeto. E podemos executa-la/acessa-la da
mesma forma como acessamos propriedades comuns.
Outra característica que torna o JavaScript como First Class Object é o fato de podemos
passar funções para outras funções como argumentos e até mesmo retornar uma
chamada de função dentro de uma função…. Parece confuso? Calma, vamos usar essas
duas características para partimos para o nosso segundo tópico.
Higher-order Functions (Funções de Ordem Superior) ou
Callbacks
Justamente pelas funções serem First-Class Object, podemos passar uma função como
argumento para outra função e depois executar essa função passada ou até mesmo
retorná-la para ser executada posteriormente.
Uma pequena nota é que as funções de ordem superior também são conhecidas como
Callbacks no JavaScript. Então basicamente a ideia é a mesma com identificações
diferentes.
As Funções de ordem superior ou Funções de Callback são derivadas do paradigma de
programação funcional e ao contrário do muitos imaginam não é necessário ser um
ninja do clã das sombras para entender ou aplicar esses padrões de codificação.
Inclusive você mesmo já deve ter usado / visto e nem sabia que era simplesmente isso.
Passando funções como argumento
Vamos imaginar que precisamos dar um olá para uma pessoa, o nosso famoso Hello
World. Então temos nossa função helloWorld. E vamos imaginar que precisamos
imprimir essa mensagem em várias linguás diferentes então eu preciso que essa função
imprima mensagens em inglês, em francês e etc.
Uma coisa que nossa função precisa é o nome da pessoa a quem queremos
cumprimentar então podemos já afirmar que nossa função recebe um nome como
argumento: helloWorld(name).
04/10/2019 First Class Objects, High-Order functions, Funções Anônimas e Closures no JavaScript
https://medium.com/lfdev-blog/me-explica-96651fc2c105 5/14
Mas como eu poderia resolver o problema das mensagens diferentes de acordo com a
minha escolha sem precisar criar um helloWorldEnglish, HelloWorldPortuguese,
HelloWorldFrancais…?
Nesse exemplo nós temos várias funções, cada uma com um retorno de “ola” diferente.
Como chamar a função helloWorld e ter seu output de acordo com uma língua
específica? Basta eu passar uma função especial para essa finalidade como argumento
e dentro da nossa função principal executar a função que passamos.
Veja que helloWorld recebe dois argumentos: languageFunction e name. Nesse momento
eles podem ser qualquer coisa e apesar de ter o final Function eu somente usei para
deixar claro na assinatura da função que trata-se de uma função mas isso é opcional. E
dentro da nossa função principal, sabendo que languageFunction será uma função e
sabendo que ela tem um objeto de retornar uma string qualquer a depender da lingua,
basta eu concatenar isso com o nosso segundo argumento, que é o nome da pessoa, e
pronto.
A função imprime no nosso console uma mensagem de olá e essa mensagem será
diferente de acordo com a função de língua que passarmos. Seja qual for, se o