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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
|
---
title: 関数宣言
slug: Web/JavaScript/Reference/Statements/function
tags:
- Function
- JavaScript
- Language feature
- Statement
translation_of: Web/JavaScript/Reference/Statements/function
---
<div>{{jsSidebar("Statements")}}</div>
<p><strong>関数宣言</strong> (関数文) は、指定された引数を使用して関数を定義します。</p>
<p>また、 {{jsxref("Function")}} のコンストラクターと{{jsxref("Operators/function", "関数式", "", 1)}}を使用して関数を定義することもできます。</p>
<div>{{EmbedInteractiveExample("pages/js/statement-function.html","shorter")}}</div>
<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
<h2 id="Syntax" name="Syntax">構文</h2>
<pre class="syntaxbox notranslate">function <var>name</var>([<var>param</var>[, <var>param</var>,[..., <var>param</var>]]]) {
[<var>statements</var>]
}
</pre>
<dl>
<dt><code><var>name</var></code></dt>
<dd>関数の名前です。</dd>
</dl>
<dl>
<dt><code><var>param</var></code> {{optional_inline}}</dt>
<dd>関数に渡す引数の名前です。引数の最大数はエンジンによって異なります。</dd>
</dl>
<dl>
<dt><code><var>statements</var></code> {{optional_inline}}</dt>
<dd>関数の本体を構成する文です。</dd>
</dl>
<h2 id="Description" name="Description">解説</h2>
<p>関数宣言で作成された関数は <code>Function</code> オブジェクトであり、<code>Function</code> オブジェクトのすべてのプロパティ、メソッド、動作を備えています。関数の詳細については {{jsxref("Function")}} を参照してください。</p>
<p>関数は式を使用して作成することもできます ({{jsxref("Operators/function", "関数式", "", 1)}}を参照)。</p>
<p>既定では、関数は <code>undefined</code> を返します。他の値を返すには、関数に返す値を指定する {{jsxref("Statements/return", "return")}} 文が必要です。</p>
<h3 id="Conditionally_created_functions" name="Conditionally_created_functions">条件付きで作成される関数</h3>
<p>関数は条件付きで宣言できます。つまり、関数文を <code>if</code> 文の中に入れ子にすることができますが、結果は実装によって一貫性がないので、このパターンを本番コードでは使用すべきではありません。条件付きの関数の作成には、代わりに関数式を使用してください。</p>
<pre class="brush: js notranslate">var hoisted = "foo" in this;
console.log(`'foo' name ${hoisted ? "is" : "is not"} hoisted. typeof foo is ${typeof foo}`);
if (false) {
function foo(){ return 1; }
}
// In Chrome:
// 'foo' name is hoisted. typeof foo is undefined
//
// In Firefox:
// 'foo' name is hoisted. typeof foo is undefined
//
// In Edge:
// 'foo' name is not hoisted. typeof foo is undefined
//
// In Safari:
// 'foo' name is hoisted. typeof foo is function
</pre>
<p>真と評価される条件でも結果はまったく同じです。</p>
<pre class="brush: js notranslate">var hoisted = "foo" in this;
console.log(`'foo' name ${hoisted ? "is" : "is not"} hoisted. typeof foo is ${typeof foo}`);
if (true) {
function foo(){ return 1; }
}
// In Chrome:
// 'foo' name is hoisted. typeof foo is undefined
//
// In Firefox:
// 'foo' name is hoisted. typeof foo is undefined
//
// In Edge:
// 'foo' name is not hoisted. typeof foo is undefined
//
// In Safari:
// 'foo' name is hoisted. typeof foo is function
</pre>
<h3 id="Function_declaration_hoisting" name="Function_declaration_hoisting">関数宣言の巻き上げ</h3>
<p>JavaScript の関数宣言は、それを囲む関数やグローバルスコープの先頭に巻き上げられ、関数を宣言する前に使うことができます。</p>
<pre class="brush: js notranslate">hoisted(); // logs "foo"
function hoisted() {
console.log('foo');
}
</pre>
<p>{{jsxref("Operators/function", "関数式", "", 1)}}は巻き上げられないことに注意してください。</p>
<pre class="brush: js notranslate">notHoisted(); // TypeError: notHoisted is not a function
var notHoisted = function() {
console.log('bar');
};
</pre>
<h2 id="Examples" name="Examples">例</h2>
<h3 id="Using_function" name="Using_function">function の使用</h3>
<p>以下のコードは、商品 <code>a</code>, <code>b</code>, <code>c</code> の販売個数が与えられた場合に、販売個数の合計を返す関数を宣言しています。</p>
<pre class="brush: js notranslate">function calc_sales(units_a, units_b, units_c) {
return units_a * 79 + units_b * 129 + units_c * 699;
}
</pre>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<p>{{Compat("javascript.statements.function")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li>{{jsxref("Function")}}</li>
<li>{{jsxref("Operators/function", "関数式", "", 1)}}</li>
<li>{{jsxref("Statements/function*", "function* 文", "", 1)}}</li>
<li>{{jsxref("Operators/function*", "function* 式", "", 1)}}</li>
<li>{{jsxref("Functions/Arrow_functions", "アロー関数", "", 1)}}</li>
<li>{{jsxref("GeneratorFunction")}}</li>
<li>{{jsxref("Statements/async_function", "非同期関数", "", 1)}}</li>
<li>{{jsxref("Operators/async_function", "非同期関数式", "", 1)}}</li>
</ul>
|
