#【JavaScript】【初学者向け学習法】関数、無名関数、即時関数の違い、書き方を覚えるために実施したこと

私と同じようにこれからJavaScriptを学習する/している方向けの記事です。
タイトルの通り、関数、無名関数、即時関数を理解するために実施した学習方法です。
もし同じレベル感でお悩みの方の参考になれば幸いです。

背景：
プログラミング学習には、手を動かすのが大切と言われます。
動画を見ながらエディタで手を動かすのですが、動画の速度に追いつかず、タイピングもどきで終わることがありました。タイピングに終始していると理解が追いつきません。
そんな自分の学習効率を改善するために考えた方法です。

やったこと：
事前準備：
・事前に解説動画を見る
・一緒に画面の処理をタイピングするが、追いつかない場合は解説の理解に集中する
・正解を複写し、コメントアウトで控えておく

①模写した正解を見ながらエディタに式を書く
②Google Chromeのデベロッパーツールで表示させる
③なぜ表示されたのかを自分に説明する。できないうちは①②の複写を繰り返す
④①の内容を変えて書き、以降繰り返し

①は手を動かすことで記憶する
③は自分への説明で記憶を定着させる
④は変化を与えることで学習効果を高める
ということをしています。

具体例です。


    function hello(name){
        var Hello = "hello " + name;
        return Hello;
    }

    var result = hello("Tom");
    console.log(result);

ここで①②を実行し、結果を確かめたうえで、③で自分に説明します。
模写で精いっぱいだと説明できないので①②を繰り返します。

模写を見ないでできるようになると、処理内容を考える余裕が生まれます。
そうすると③の自分への説明に進めます。
この場合だと3つに分けて説明しました。

・hello関数は関数内でローカル変数Hello変数の処理内容を作り、returnで内容を出力する
・result変数はhello関数から処理のバトンを受けとった
・console.logでresult変数を表示した

※声に出した場合は、音声情報として記憶の定着効果が高まります
次に④である変化として無名関数で処理してみました。


    var hello = function(name){
        var Hello = "hello " + name;
        return Hello;
    }

    var result = hello("rachel cook");
    console.log(result);

①②で模写ができるようになっているので、改変する余裕があります。
こちらも自分に説明できたら、次は変化の幅を変えて、別の処理内容を書きます。
文字列の表示から四則演算に変えました。

    function add(a,b){
        var Add = a + b;
        return Add;
    }
    var result = add(1,2);
    console.log(result);

次の変化は引数の数を増やした無名関数Ver.
ローカル変数名に計算を意味するcalcutlationと命名し、英語学習も兼ねました。

    var add = function(x,y,z){
        var calculation = x + y + z;
        return calculation;
    }
    var result = add(10,11,12);
    console.log(result);

次は関数と即時関数の変化を書きました。

    function hello(){
        console.log("hello");
    };
    hello();


    (function hello(){
        console.log("hello there.");
    })();

ここに至るまでに関数の形を手が覚えているので、()で括る箇所も理解して使うことができました。

そして学習フローをこのように記事にすることで、自分の理解度を確認。
関数以外の学習にも応用できるようにと考えた次第です。
こうした方が効率が良い、という知恵がありましたら、コメントをお寄せ頂けますと幸いです。