JavaScript 基礎 ～関数編～

・関数の定義方法

・関数宣言による定義

　　関数宣言で関数を定義する場合は、functionの後に関数名を記述します。引数は ( )内記述します。

JavaScript

    function exFunc ( exVal1, exVal2, ...) {
        //処理を書く

        //戻り値がある場合
        return 戻り値
}

　

・関数宣言による関数の実行

JavaScript

    //戻り値がある場合
    let exValuable(戻り値を格納する変数) = exFunc ( exVal1, exVal2, exVal3...){
        exVal1 + exVal2;
};

    //戻り値がない場合
    exFunc ( exVal1, exVal2, ...);

//関数で定義した引数(仮引数)と、実行文で定義した引数(実引数)が一致しない場合は、実引数の分だけ実行する。

    function add(val1, val2, val3, val4) {
        return val1 + val2 + val3 + val4;
}

    let addResult = add(10, 20);
    console.log(addResult);
    > val3とval4は無視されて、val1とval2を足した30という結果が出る。

・関数式による関数定義

　　関数式は、関数を変数に代入する方法である。

JavaScript

    const functionName = function (val1, val2 ...) {
        //処理を書く

        //戻り値がある場合。
        return 戻り値;
}

　

・関数式による関数の実行

JavaScript

    const add = function(val1, val2) {
        return val1 + val2;
}

let addResult = add ( 30, 10 );

console.log( addResult );
> 40

・関数宣言と関数式の違い

　・関数名が重複した時
　　　関数宣言は、関数名が重複している場合、上書きされる。
　　　関数式は、関数名が重複した場合、エラーが発生する。

※ES Modulesを有効にすると関数宣言においても重複を許さないようにできる。

　・実行文の記述位置
　　　関数宣言の場合、関数の定義文よりも前に実行文を記述できる。
　　　関数式の場合、関数の定義文よりも前に実行文を記述するとエラーになる。

・Functionコンストラクタによる関数定義

JavaScript

    const add = new Function(val1, val2[引数], "return val1 + val2;[処理を書く]" );
    const addResult = add(10, 20);

    console.log(addResult);
    > 30

eval関数で直接文字列をコードとして実行することができるが、セキュリティ上、あまり使うべきではない。

例eval("console.log (1 + 2);"); -> 3

・関数を使いこなす

・デフォルト引数

　関数実行時に値が渡されなかった場合、デフォルト引数という初期値を設定できる。

JavaScript

    function add ( val1 = 5, val2 = 10 ) {
        return val1 + val2;
    }

console.log( add(1) ) ;
> 11//val1 は設定した１、　val2は引数を渡していないのでデフォルト引数に設定されている10が設定されて計算される。

・オブジェクトに引数をあてる

　JavaScriptでは、引数の名前を指定して値を渡すことができない。そのため引数が大量になると、文が冗長になったり、引数の順番を間違えると、バグが発生してしまう。
⇒保守などに問題が発生。

その問題に対処するために、オブジェクトに引数をあてる、引数をオブジェクトとしてまとめる。

JavaScript

    function fn ( value1 = "default1", value2 = "default2") {
        console.log(value1, value2);
}

fn (value1 = undefined, value2 = 30);
=>このように、引数の名前を指定して値を渡すことができない。

引数をオブジェクトとしてまとめると

JavaScript

        function functionName( obj ) {
            obj.arg1 ??= "default1";
            obj.arg2 ??= "default2";
            console.log( obj.arg1, obj.arg2 );
    }

    const params = { args: "引数2"; };
    functionName (params);
 > default1   引数2

このようにobjというオブジェクトにarg1, arg2という引数をあてる。
obj.arg1 ??= "default1";は、Null合体演算子である。
使い方としては、A ?? B　のように"??"を使って表す。
左のオペラント(A)がnullまたはdefinedの場合、Bの値を返すというものである。

Null演算子

    let val = null;

    //valはnullなのでdefaultが返される。
    val = val ?? "default";

    //テンプレートリテラル
    console.log (`val [ ${ val }` ] );
    > val [ default ]
    
    let num = 0;
    //numはnullでもdefinedでもないのでそのままnumの値が返される。
    num = num ?? 30;
    console.log(`num [ ${ num } ]`);
    > num [ 0 ]

すると今回の場合は、

JavaScript

        function functionName( obj ) {
            obj.arg1 ??= "default1";
            obj.arg2 ??= "default2";
            console.log( obj.arg1, obj.arg2 );
    }

obj.arg1 ??= "default1"; ⇒ obj.arg1がnullまたはdefinedの場合は、default1が、
obj.arg2 ??= "default2"; ⇒ obj.arg2がnullまたはdefinedの場合は、default2が返される。

・コールバック関数

　コールバック関数とは、他の関数に引数として渡す関数のことである。

・関数とオブジェクトの関係

　結論から述べると、関数とは、実行可能なオブジェクトのことである。関数はオブジェクトの１種であり、オブジェクト{ }と異なるのは、「実行可能である」という点である。そのため、オブジェクト同様に関数にもプロパティ、メソッドの設定、あとからの追加をすることができる。(ドット記法などによって)

コールバック関数の書き方

       function functionName ( callback ) {
            //処理を書く
 
        //コールバック関数の実行
        let result = callback ( [val1, val2(引数がある場合は引数)] );
}

コールバック関数の例

        //コールバック関数を受け取る関数
        function greeting( callback ) {

        //コールバック関数の実行
        const result = callback();
        console.log( `${result}、　ヒルルクさん!` );

        function goodMorning() {
        return "おはようございます!";
}

        function hello() {
        return "こんにちは!";
}

        //コールバック関数を呼ぶときは()を付けない。
        greeting ( goodMorning );
        > おはようございます! 、ヒルルクさん!

        greeting ( hello );
        > こんにちは!、ヒルルクさん!

・アロー関数

　アロー関数とは、無名関数の省略記法のことである。

無名関数とアロー関数の比較

    //無名関数
    setTimeout( function() {
                console.log("こんにちは");
    }, 1000);

    //アロー関数
    setTimeout ( () => console.log("こんにちは"), 1000);

・アロー関数の記法

　①引数がない場合

() => { 関数の本文; };

※無名関数の場合

function() { 関数の本文; }

　②引数が１つの場合

引数 => { 関数の本文; }

※無名関数の場合

function( 引数 ) { 関数の本文; }

　③引数が複数の場合

( 引数1, 引数2, ...) => { 関数の本文; }

※無名関数の場合

function ( 引数1, 引数2, ...) { 関数の本文; }

　関数の実行文（本文）が１行の場合

( 引数1, 引数2, ... ) => 関数の本文;

無名関数の場合

    function( 引数1, 引数2, ... ) {
        return 関数の本文;
}

　⑤関数の実行文(本文)が複数行の場合

実行文が複数行

        (引数1, 引数2, ... ) => {
         関数の本文;
         return 戻り値;
}

無名関数の場合

    function(引数1, 引数2, ...) {
        関数の本文;
        return 戻り値;
}

　⑥関数の実行文（本文）が1行かつ戻り値がオブジェクトの場合

(引数1, 引数2, ...) => ( { プロパティ1: 値1, プロパティ2: 値2 } )

無名関数の場合

    function( 引数1, 引数2, ...) {
        return { プロパティ1: 値1, プロパティ2: 値2 }
}