JavaScript 関数の種類とサンプル

JavaScriptの関数の種類とサンプルです。

目次

関数の種類 関数宣言(function declaration)
  関数宣言の巻き上げ(hoisting)
  関数式(function expression)
  巻き上げ(hoisting)は不可
  Functionコンストラクタ
注意ポイント 関数内の変数のスコープ
  同じ関数名が2つあった場合
  関数の中に関数がある場合
  関数の中のthisが指す対象

関数宣言(function declaration)

関数宣言のサンプルです。

<script>
    function logTest(num1,num2) {
        return (num1 + num2 + 3);
    }
    const a = logTest(1,2);
    console.log(a); // 6が表示される
</script>

2~4行目は、関数です。
2行目は、functionというキーワードがあります。logTestは関数名です。numは引数(仮引数)です。引数は複数指定できます。引数なしも可能です。
3行目は、returnというキーワードがあります。値を呼び出し元に返します。戻り値や返り値と呼ばれます。returnが実行されると、関数内のそれ以後の処理は実行されません。
5行目は、関数名に引数を指定して実行し戻り値を変数のaに代入しています。
6行目は、console.logでブラウザのコンソールに値を表示します。

関数宣言の巻き上げ(hoisting)

<script>
    const a = logTest(1, 2);
    console.log(a); // 6が表示される
    function logTest(num1, num2) {
        return(num1 + num2 + 3);
    }
</script>

2行目は、関数の宣言の前に関数を実行しています。
これは実行できます。この仕様は巻き上げ(hoisting)と呼ばれています。

関数式(function expression)

関数式のサンプルです。

<script>
    const log1 = function logTest(num1,num2) {
        return(num1 + num2 + 3);
    }
    const a = log1(1,2);
    console.log(a); // 6が表示される
</script>

2~4行目のfunction以降を変数log1に代入しています。
関数名は、logTestです。
5行目は、変数に引数を指定して関数を実行しています。

関数式は、関数リテラルとも呼ばれます。
関数式で関数名を省略したものを無名関数といいます。
JavaScript 関数式と無名関数と即時関数

巻き上げ(hoisting)は不可

<script>
    const a = log1(1, 2);
    console.log(a); // 6が表示される
    const log1 = function logTest(num1, num2) {
        return (num1 + num2 + 3);
    }
</script>

2行目は、関数式の前に関数を実行していますが、これはエラーになり実行できません。
関数式では巻き上げはできません。

Functionコンストラクタ

Functionコンストラクタのサンプルです。

<script>
    const log1 =  new Function(
        'num1','num2','return num1 + num2 + 3');

    const a = log1(1, 2);
    console.log(a); // 6が表示される
</script>

2行目は、new FunctionでFunctionオブジェクトを生成しています。
3行目は、コンストラクタの引数です。引数の1,2番目は関数の引数で、3番目は関数の処理部分です。
5行目は、変数に引数を指定して実行しています。3行目の引数の内容で処理が行われます。
Functionコンストラクタはパフォーマンス的に良くないとされています。

以下は、MDNのFunctionのリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function

関数内の変数のスコープ

関数内の変数のスコープのサンプルです。

<script>
    //"use strict";
    var a = 1; //グローバル変数
    function test1() {
        const b = 2; //ローカル変数
        c = 3; // グローバル変数
        console.log(a); //1
    }
    test1();
    //console.log(b); //エラー b is not defined
    console.log(c); //3
</script>

3行目は関数の外で変数を宣言しています。グローバル変数です。
5行目は関数の中で変数を宣言しています。ローカル変数です。
6行目は関数の中で変数を宣言していますが、const,let,varをつけていないのでグローバル変数になります。2行目のコメントを外してstrictモードを有効にするとエラーになります。「c is not defined」

7行目は、3行目のグローバル変数にアクセスできます。
10行目は、関数の外から5行目のローカル変数にアクセスを試みますがエラーになります。「b is not defined」
11行目は、関数の外から6行目の変数にアクセスします。グローバル変数なのでアクセスできてしまいます。

同じ関数名が2つあった場合

同じ関数名が2つあった場合のサンプルです。

<script>
function test1(){
	console.log("前");
}
function test1(){
	console.log("後");
}

test1(); //後

</script>

2,5行目は、同じ関数名です。
9行目は、後の関数が実行されます。

関数の中に関数があるサンプル

関数の中に関数があるサンプルです。

<script>
function test1(a){

	function test2(a){
		return a + 2;
    };
	return test2(a);
}
console.log(test1(1));// 3 
</script>

2行目が外側の関数で4行目が内側の関数です。
9行目は、2行目の関数を呼んでいます。
7行目は、内側の関数test2を実行後、return文で結果を9行目に返しています。
実行順序は、9→2→7→4→5→7→9です。

関数の中のthisが指す対象

関数の中のthisが指す対象のサンプルです。

<script>
    //"use strict";
    var a = 1; //グローバル変数
    function test1() {
        const a = 3;
        console.log(this.a); //1が出力される
    }
    test1();
</script>

6行目のthis.aは3行目のグローバル変数を指します。
2行目のコメントを外してstrictモードを有効にするとエラーになります。
「Uncaught TypeError: Cannot read property 'a' of undefined」

関連の記事

JavaScript 関数式と無名関数と即時関数
JavaScript クロージャのサンプル
JavaScript 引数/戻り値が関数のサンプル(高階関数)

△上に戻る