JavaScript 関数宣言と関数式のサンプル

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

目次

サンプル 関数宣言(function declaration)
  関数式(function expression)
注意点 関数内の変数のスコープ
  同じ関数名が2つあった場合
  関数の中に関数がある場合
  関数の中のthisが指す対象
参考 Functionコンストラクタ

関数宣言(function declaration)

function 関数名([引数[ ,引数]]){
 [return 値];
}
  • functionというキーワードがあります。
  • 引数は複数指定できます。引数省略も可能です。仮引数と呼ばれます。
  • returnは、値を呼び出し元に返します。戻り値や返り値と呼ばれます。
  • returnが実行されると、関数内のそれ以後の処理は実行されません。
  • returnは省略可能です。

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

<script>
    function logTest(num1,num2) {
        return (num1 + num2 + 3);
    }

    const a = logTest(1,2); //aは6
</script>

2~4行目は、関数です。
6行目は、関数を実行しています。引数を指定して戻り値を変数のaに代入しています。

関数を実行するコードが、関数より前の場合

<script>
    const a = logTest(1, 2);

    function logTest(num1, num2) {
        return(num1 + num2 + 3);
    }
</script>

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

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/function

 

関数式(function expression)

変数 = function 関数名([引数[ ,引数]]){
 [return 値];
  • 関数式は、「関数リテラル」とも呼ばれます。
  • 関数を変数に代入します。
  • 関数の実行は、変数とかっこ()で行います。
  • 関数式で関数名を省略したものを無名関数といいます。
    JavaScript 関数式と無名関数と即時関数

関数式のサンプルです。

<script>
    const log1 = function logTest(num1,num2) {
        return(num1 + num2 + 3);
    }

    const a = log1(1,2); //aは6
</script>

2~4行目は、関数式です。
6行目は、関数を実行しています。

関数を実行するコードが、関数より前の場合

<script>
    const a = log1(1, 2);

    const log1 = function logTest(num1, num2) {
        return (num1 + num2 + 3);
    }
</script>

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

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/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つあった場合

<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行目の関数を呼んでいます。
実行順序は、9→2→7→4→5→7→9です。(数値は行数)
7行目は、内側の関数test2を実行後、return文で結果を9行目に返しています。

関数の中の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」

Functionコンストラクタ

new Function([引数[,引数]])
  • new FunctionでFunctionオブジェクトを生成します。
  • 引数は、コンストラクタの引数です。
  • 実行時にコンパイルされます(動的に生成される)。
  • ほぼ使用されません。

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

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

    const a = log1(1, 2); //aは6
</script>

2,3行目は、Functionコンストラクタです。
3行目は、引数の1,2番目は関数の引数で、3番目は関数の処理部分です。
5行目は、変数に引数を指定して実行しています。3行目の引数の内容で処理が行われます。

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

関連の記事

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

△上に戻る