JavaScript問題集

JavaScript問題集

今日もこちらの問題集をすすめていきました。Q12-15
https://gist.github.com/kenmori/1961ce0140dc3307a0e641c8dde6701d

デフォルト引数について

デフォルト引数・・・引数に対して何も値を渡さなかったときにデフォルトで初期化される引数のこと。

developer.mozilla.org

function def(a = 5, b = 7) {
     return a + b;

def(1);　結果:8

関数defに１を引数と渡してあげるとaは１となり、
bは何も値を渡していないのでデフォルト値の7となる。その結果a+b = 8

function def(a = 5, b = 0) {
    return a + b;
}

def(); <span style="color: #ff0000">結果:5</span>

デフォルト値にb=0設定することで値が無い場合も0となる。
デフォルト引数を使うメリットはnullとundefinedチェックが不要となりそう。

Q.13 next()を実行しただけ返り値が1増える関数を定義してください

答え

var count = 0;
function next() {
    return ++count;
}

next(); 結果:1
next(); 結果:2

グローバルな値として変数countを宣言して、
next関数を呼ぶたびにcountがインクリメントされる。

模範解答

const setUp = function () {
    let count = 0;
    return function () {
        return ++count;
    }
};

const next = setUp();
next(); 結果:1
next(); 結果:2

1つ目の無名関数にてcountを宣言して、
内部の2つ目の無名関数でcountをインクリメントした結果を返す。
内部で変数countを宣言しているためnext関数をいくら呼んでも1のままに見えますが、
クロージャにより内部変数を永続化することによりインクリメントされるようです。
グローバル変数として宣言していくと、どこの処理に変数を使ったかわからなってくるので、
宣言した変数を他の処理で使いまわしをしない(1度しか使わない)場合に役に立ちそうな書き方。

無名関数

その名の通り、名前が無い関数。1度しか使わない場合に用いられる。
何度も同じソースコードや記述したり、名前を付ける必要が無くなる。
名前が無いため他の変数に代入しないと使えない。

error

function () {
    return "hello";
}

名前が無いためエラーが出ます。

ok

var greet = function () {
    return "hello";
}

名前をつけたのでOK

無名関数の中で無名関数をよぶ場合

var greet = function () {
    return function () {
        return "hello";
    }
}

var greet = greet();

2つ目の無名関数にも名前をつけると表示される。

クロージャ

内側の関数から外側の関数のスコープへのアクセスができる。
メリットは変数の永続化と隠ぺい。
変数の永続化により、外側で宣言したcountに内側からアクセスし、インクリメントした結果を返す。通常なら内部の宣言した変数countをインクリメントしても永続化できないはずなので、できた理由はクロージャによるものです。