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
100
101
102
103
104
105
106
107
108
109
110
111
112
|
---
title: Funcion de primera clase
slug: Glossary/First-class_Function
translation_of: Glossary/First-class_Function
original_slug: Glossary/Funcion_de_primera_clase
---
<p>Un lenguaje de programación se dice que tiene <strong>Funciones de primera clase </strong>cuando las funciones en ese lenguaje son tratadas como cualquier otra variable. Por ejemplo, en ese lenguaje, una función puede ser pasada como argumento a otras funciones, puede ser retornada por otra función y puede ser asignada a una variable.</p>
<h2 id="Ejemplo_Asignar_función_a_una_variable">Ejemplo | Asignar función a una variable</h2>
<h3 id="JavaScript">JavaScript</h3>
<pre class="brush: js">const foo = function() {
console.log("foobar");
}
// Invocación usando una variable
foo();
</pre>
<p>Asignamos una <strong>Función Anónima</strong> a una {{glossary("Variable")}}, la cual utilizamos para invocar la función añadiendo paréntesis <code>()</code> al final.</p>
<div class="note">
<p><strong>Aunque la función no sea anónima (función nombrada),</strong> se puede utilizar la variable para invocarla. Nombrar las funciones puede ser útil cuando estamos depurando el código. <em>Pero no afectará como invocamos a la función.</em></p>
</div>
<h2 id="Ejemplo_Pasar_la_función_como_argumento">Ejemplo | Pasar la función como argumento</h2>
<h3 id="JavaScript_2">JavaScript</h3>
<pre class="brush: js">function diHola() {
return "Hola ";
}
function saludar(saludo, nombre) {
console.log(saludo() + nombre);
}
// Pasamos `diHola` como argumento de la función `saludar`
saludar(diHola, "JavaScript!");
</pre>
<p>Pasamos nuestra función <code>diHola()</code> como argumento de la función <code>saludar()</code>, esto explica como tratamos la función como un <strong>valor</strong>.</p>
<div class="note">
<p>Una función que pasamos como argumento a otra función, se llama <strong>{{glossary("Callback function")}}</strong>. <em><code>diHola</code> es una función Callback.</em></p>
</div>
<h2 id="Ejemplo_Devolver_una_función">Ejemplo | Devolver una función</h2>
<h3 id="JavaScript_3">JavaScript</h3>
<pre class="brush: js">function diHola() {
return function() {
console.log("¡Hola!");
}
}
</pre>
<p>En este ejemplo; Necesitamos devolver una función desde otra función - <em>Podemos devolver una función porque JavaScript trata la función como un <strong>value</strong>.</em></p>
<div class="note">
<p>Una función que devuelve una función se llama <strong>Higher-Order Function</strong>.</p>
</div>
<p>Volviendo al ejemplo; Ahora, necesitamos invocar la función <code>diHola</code> y su <code>Función Anónima</code> devuelta. Para ello, tenemos dos maneras:</p>
<h3 id="1-_Usando_una_variable">1- Usando una variable</h3>
<pre class="brush: js">const diHola = function() {
return function() {
console.log("¡Hola!");
}
}
const miFuncion = diHola();
miFuncion();
</pre>
<p>De esta manera, devolverá el mensaje <code>¡Hola!</code>.</p>
<div class="note">
<p>Debes usar otra variable para que devuelve el mensaje. Si invocas <code>diHola</code> directamente, devolvera la función en si misma <strong>sin invocar a la función devuelta</strong>.</p>
</div>
<h3 id="2-_Usando_paréntesis_doble">2- Usando paréntesis doble</h3>
<pre class="brush: js">function diHola() {
return function() {
console.log("¡Hola!");
}
}
diHola()();
</pre>
<p>Usamos parétesis dobre <code>()()</code> para invocar también a la función retornada.</p>
<ul>
</ul>
<h2 id="Aprender_más">Aprender más</h2>
<h3 id="Conocimiento_general">Conocimiento general</h3>
<section id="Quick_links">
<ol>
<li>{{Interwiki("wikipedia", "First-class_function", "First-class functions")}} on Wikipedia</li>
<li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a>
<ul>
<li>{{glossary("Callback function")}}</li>
<li>{{glossary("Function")}}</li>
<li>{{glossary("Variable")}}</li>
</ul>
</li>
</ol>
</section>
|
