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
|
---
title: Funktion erster Klasse
slug: Glossary/Funktion_erster-Klasse
translation_of: Glossary/First-class_Function
---
<p>Funktionen, die wie jede andere Variable behandelt werden, bezeichnet man als <strong>Funktionen erster Klasse</strong>.</p>
<p>In einer Programmiersprache, die über <strong>Funktionen erster Klasse</strong> verfügt, kann so eine Funktion als Argument anderen Funktionen übergeben werden, als Wert einer Variable zugewiesen, oder von einer anderen Funktion zurückgegeben werden.</p>
<h2 id="Beispiel_Zuweisung_einer_Funktion_an_eine_Variable">Beispiel | Zuweisung einer Funktion an eine Variable</h2>
<h3 id="JavaScript">JavaScript</h3>
<pre class="brush: js">const foo = function() {
console.log("foobar");
}
// Aufruf der Funktion über die Variable.
foo();
</pre>
<p>Wir weisen der Variable '<em>foo</em>' eine <code>anonyme Funktion</code>, die den String "<em>foobar</em>" in der Konsole ausgibt, zu. Dann rufen wir diese Funktion über die Variable auf, indem wir ein Paar Klammern an das Ende hinzufügen. </p>
<div class="note">
<p><strong>Auch wenn die Funktion benannt ist, </strong>kann der Name der Variable, der sie zugewiesen ist, benutzt werden, um die Funktion aufzurufen. Funktionen zu benennen <em>wirkt sich nicht auf die Weise, wie sie aufgerufen wird aus</em>, kann aber beim Debuggen hilfreich sein</p>
</div>
<h2 id="Beispiel_Übergeben_einer_Funktion_als_Argument">Beispiel | Übergeben einer Funktion als Argument</h2>
<h3 id="JavaScript_2">JavaScript</h3>
<pre class="brush: js">function sagHallo() {
return "Hallo, ";
}
function gruessen(gruss, name) {
console.log(gruss() + name);
}
// Übergebe `sagHallo` als Argument an die `gruessen` Funktion.
gruessen(sagHallo, "JavaScript!");
</pre>
<p>Wir übergeben unsere <code>sagHallo()</code> Funktion als ein Argument an die <code>gruessen() </code>Funktion. Auf diese Art behandeln wir die Funktion als <code>Wert</code>.</p>
<div class="note">
<p>Die Funktion, die wir als Argument einer anderen Funktion übergeben wird als <strong><a href="/en-US/docs/Glossary/Callback_function">Callback function</a> </strong>bezeichnet. sagHallo() ist eine <em>Callback function.</em></p>
</div>
<h2 id="Example_Return_a_function">Example | Return a function</h2>
<h3 id="JavaScript_3">JavaScript</h3>
<pre class="brush: js">function sayHello() {
return function() {
console.log("Hello!");
}
}
</pre>
<p>In this example; We need to return a function from another function - <em>We can return a function because we treated function in JavaScript as </em><em>a </em><em><code>value</code></em><em>.</em></p>
<div class="note">
<p>A function that returns a function called <strong>Higher-Order Function</strong></p>
</div>
<p>Back to our example; Now, we need to invoke <code>sayHello</code> function and its returned <code>Anonymous Function</code>. To do so, we have two ways:</p>
<h3 id="1-_Using_a_variable">1- Using a variable</h3>
<pre class="brush: js">const sayHello = function() {
return function() {
console.log("Hello!");
}
}
const myFunc = sayHello();
myFunc();
</pre>
<p>This way, it returns the <code>Hello!</code> message.</p>
<div class="note">
<p>You have to use another variable. If you invoked <code>sayHello</code> directly, it would return the function itself <strong>without invoking its returned function</strong>.</p>
</div>
<h3 id="2-_Using_double_parentheses">2- Using double parentheses</h3>
<pre class="brush: js">function sayHello() {
return function() {
console.log("Hello!");
}
}
sayHello()();
</pre>
<p>We are using double parentheses <code>()()</code> to invoke the returned function as well.</p>
<h2 id="Learn_more">Learn more</h2>
<h3 id="General_knowledge">General knowledge</h3>
<ul>
<li>{{Interwiki("wikipedia", "First-class_function", "First-class functions")}} on Wikipedia</li>
</ul>
|
