====== JavaScript 関数の定義 ======

 --- //[[http://www.y2sunlight.com/water|y2sunlight]] 2021-04-05//

===== 関数の定義 =====

以下による定義方法がある。
  * function文
  * Functionコンストラクタ
  * 関数リテラル
  * アロー関数[[js:top#ECMAScript|*2015]]
\\

===== function文 =====

<code javascript>
function 関数名(引数, ･･･) {
    // 本体
    return 戻り値;
}
</code>

<sxh javascript;title:Example>
console.log(getArea(10, 20));    // 結果：200
function getArea(height, width) {
    return height * width;
}
</sxh>
\\

===== Functionコンストラクタ =====

<code javascript>
var 変数名 = new Function(引数, ･･･, 関数本体);
</code>

<sxh javascript;title:Example>
var func1 = new Function('height', 'width', 'return height * width');
var func2 = new Function('height, width', 'return height * width');
// どちらの形式でも良い
console.log(func1(10, 20));  // 結果：200
console.log(func2(10, 20));  // 結果：200
</sxh>
\\

===== 関数リテラル =====

<code javascript>
var 変数名 = function(引数, ･･･) {
    // 関数本体
    return 戻り値;
};
</code>

<sxh javascript;title:Example>
var func = function(height, width) {
    return height * width;
};
console.log(func(10, 20));  // 結果：200
</sxh>

関数リテラルは、無名関数又は匿名関数とも呼ばれる。
\\ \\

===== アロー関数 =====
<sup>[[js:top#ECMAScript|*2015]]</sup>

<code javascript>
var 変数名 = (引数, ･･･) => {
    // 関数本体
    return 戻り値;
};
</code>

<sxh javascript;title:Example>
var func = (height, width) => {
    return height * widht;
};
console.log(func(10, 20));
</sxh>

<sxh javascript;title:Example 括弧の省略>
var area = r => Math.PI * r * r;
console.log(area(10));
</sxh>

<sxh javascript;title:Example 引数無し>
var sayHello = () => console.log('Hello');
sayHello();
</sxh>
\\

===== 第１級オブジェクト =====

JavaScriptの関数は第１級オブジェクトである。
  * 変数へ格納できる
  * 引数にできる
  * 戻り値にできる
  * コンストラクタできる
  * 独自の存在をもつ（無名可能）

<sxh javascript;title:Example>
function func1(height, width){return height * width}
        
var func2 = new Function('height, width', 'return height * width');
var func3 = function(height, width){ return height * width };
var func4 = (height, width) => { return height * width };
        
function callFunc(height, width, func){
    console.log(func(height, width));
}
        
callFunc(1, 10, func1);  // 結果：10
callFunc(2, 10, func2);  // 結果：20
callFunc(3, 10, func3);  // 結果：30
callFunc(4, 10, func4);  // 結果：40
</sxh>