blob: 682e94731c951547f879e60e0823fabeede172da (
plain)
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
|
---
title: 일급 함수
slug: Glossary/First-class_Function
tags:
- 1급객체
- 1급함수
- CodingScripting
- Glossary
- JavaScript
- 일급객체
translation_of: Glossary/First-class_Function
---
<p>함수를 다른 변수와 동일하게 다루는 언어는 <strong>일급 함수</strong>를 가졌다고 표현합니다. 예를 들어, 일급 함수를 가진 언어에서는 함수를 다른 함수에 매개변수로 제공하거나, 함수가 함수를 반환할 수 있으며, 변수에도 할당할 수 있습니다.</p>
<h2 id="예제_변수에_함수_할당">예제 | 변수에 함수 할당</h2>
<h3 id="JavaScript">JavaScript</h3>
<pre class="brush: js">const foo = function() {
console.log("foobar");
}
// 변수를 사용해 호출
foo();
</pre>
<p>익명함수를 변수에 할당한 다음, 그 변수를 사용하여 끝에 괄호 <code>()</code>를 추가하여 함수를 호출했습니다.</p>
<div class="note">
<p><strong>함수가 이름을 가지고 있더라도</strong> 할당한 변수 이름을 사용해 함수를 호출할 수 있습니다. 이름을 지정하면 코드를 디버깅할 때 유용합니다. 하지만 호출하는 방식에는 영향을 미치지 않습니다.</p>
</div>
<h2 id="예제_함수를_인자로_전달">예제 | 함수를 인자로 전달</h2>
<h3 id="JavaScript_2">JavaScript</h3>
<pre class="brush: js">function sayHello() {
return "Hello, ";
}
function greeting(helloMessage, name) {
console.log(helloMessage() + name);
}
// `sayHello`를 `greeting` 함수에 인자로 전달
greeting(sayHello, "JavaScript!");
</pre>
<p><code>sayHello()</code> 함수를 <code>greeting()</code> 함수의 인자로 전달했습니다. 이것이 함수를 어떻게 변수처럼 다루는지 보여주는 예시입니다.</p>
<div class="note">
<p>다른 함수에 인자로 전달된 함수를 {{glossary("Callback function", "콜백 함수")}}라고 합니다. <em><code>sayHello</code>는 콜백 함수입니다.</em></p>
</div>
<h2 id="예제_함수_반환">예제 | 함수 반환</h2>
<h3 id="JavaScript_3">JavaScript</h3>
<pre class="brush: js">function sayHello() {
return function() {
console.log("Hello!");
}
}
</pre>
<p>함수가 함수를 반환하는 예제입니다. <em>JavaScript에서는 함수를 변수처럼 취급하기 때문에 함수를 반환할 수 있습니다.</em></p>
<div class="note">
<p>함수를 반환하는 함수를 <strong>고차 함수</strong>라고 부릅니다.</p>
</div>
<p>다시 예제로 돌아갑시다. <code>sayHello</code> 함수를 호출했을 때 반환하는 익명함수를 호출하려면 두 가지 방법이 있습니다.</p>
<h3 id="1-_변수_사용">1- 변수 사용</h3>
<pre class="brush: js">const sayHello = function() {
return function() {
console.log("Hello!");
}
}
const myFunc = sayHello();
myFunc();</pre>
<p>이렇게 하면 <code>Hello!</code> 메시지가 출력됩니다.</p>
<div class="note">
<p>만약에 <code>sayHello</code> 함수를 직접 호출하면, <strong>반환된 함수를 호출하지않고</strong> 함수 자체를 반환합니다. 그러므로 반환된 함수를 다른 변수에 저장하여 사용해야합니다.</p>
</div>
<h3 id="2-_이중_괄호_사용">2- 이중 괄호 사용</h3>
<pre class="brush: js">function sayHello() {
return function() {
console.log("Hello!");
}
}
sayHello()();
</pre>
<p>이중 괄호 <code>()()</code>를 사용해 반환한 함수도 호출하고 있습니다.</p>
<h2 id="더_배우기">더 배우기</h2>
<h3 id="일반_지식">일반 지식</h3>
<ul>
<li>위키백과 {{Interwiki("wikipedia", "일급 객체")}}</li>
</ul>
|
