1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
|
---
title: Função First-class
slug: Glossario/Funcao-First-class
translation_of: Glossary/First-class_Function
---
<p>Entede-se que uma linguagem de programação tem <strong>Função First-class</strong> quando suas funções são tratadas como qualquer outra variável. Por exemplo, numa linguagem desse tipo, a função pode ser passada como argumento pra outras funções, ser retornada por outra função e pode ser atribuída como um valor à uma variável.</p>
<h2 id="Exemplo_Atribuir_uma_função_à_uma_variável">Exemplo | Atribuir uma função à uma variável</h2>
<h3 id="JavaScript">JavaScript</h3>
<pre class="brush: js">const foo = function() {
console.log("foobar");
}
// Chamar a função usando a variável
foo();
</pre>
<p>Nós atribuímos uma <code>Função Anônima</code> à uma <code>Variável</code>, então usamos a variável pra chamar a função adicionando parênteses <code>()</code> no fim.</p>
<div class="note">
<p><strong>Mesmo se sua função for nomeada,</strong> você pode usar o nome da variável pra chamá-la. Nomeá-la será útil quando for debugar seu código. <em>Mas não afetará a maneira que à chamamos.</em></p>
</div>
<h2 id="Exemplo_Passar_uma_função_como_um_Argumento">Exemplo | Passar uma função como um Argumento</h2>
<h3 id="JavaScript_2">JavaScript</h3>
<pre class="brush: js">function sayHello() {
return "Hello, ";
}
function greeting(helloMessage, name) {
console.log(helloMessage() + name);
}
// Passar `sayHello` como um argumento pra função `greeting`
greeting(sayHello, "JavaScript!");
</pre>
<p>Nós estamos passando a função <code>sayHello()</code> como um argumento pra função <code>greeting()</code>, isso explica como estamos tratando a função como um <code>valor</code>.</p>
<div class="note">
<p>A função que passamos como um argumento pra outra função, chamou uma <strong><a href="/en-US/docs/Glossary/Callback_function">Função Callback</a>.</strong> <em><code>sayHello</code> é uma Função Callback.</em></p>
</div>
<h2 id="Exemplo_Retornar_uma_função">Exemplo | Retornar uma função</h2>
<h3 id="JavaScript_3">JavaScript</h3>
<pre class="brush: js">function sayHello() {
return function() {
console.log("Hello!");
}
}
</pre>
<p>Neste exemplo; Precisamos retornar uma função de outra função - <em>Podemos retornar uma função porque tratamos função em JavaScript como um</em><em> </em><em><code>valor</code></em><em>.</em></p>
<div class="note">
<p>Uma função que retorna uma função é chamada de <strong>Higher-Order Function</strong></p>
</div>
<p>De volta ao nosso exemplo; Agora, precisamos chamar a função <code>sayHello</code> e a <code>Função anônima</code> retornada. Existem duas maneiras para fazermos isso:</p>
<h3 id="1-_Usando_uma_variável">1- Usando uma variável</h3>
<pre class="brush: js">const sayHello = function() {
return function() {
console.log("Hello!");
}
}
const myFunc = sayHello();
myFunc();
</pre>
<p>Dessa maneira, ela retorna a mensagem <code>Hello!</code>.</p>
<div class="note">
<p>Você tem que usar outra variável. Se você fosse chamar <code>sayHello</code> diretamente, ela retornaria a função em si <strong>sem chamar a função retornada</strong>.</p>
</div>
<h3 id="2-_Usando_parênteses_duplo">2- Usando parênteses duplo</h3>
<pre class="brush: js">function sayHello() {
return function() {
console.log("Hello!");
}
}
sayHello()();
</pre>
<p>Estamos usando parênteses duplo <code>()()</code> pra chamar também a função retornada.</p>
<h2 id="Saiba_mais">Saiba mais</h2>
<h3 id="Conhecimento_geral">Conhecimento geral</h3>
<ul>
<li>{{Interwiki("wikipedia", "First-class_function", "First-class functions")}} na Wikipedia</li>
</ul>
|
