JavaScritで関数型プログラミング

初めに

最近の学習はfreeCodeCampで基礎を見直しています。そこで普段何気なく使用している関数（function, アロー関数）について1つの関数に複数の役割を持たせていることに気付いたので、関数の役割を1つの定めるようにしました。

今回のプログラムを説明すると、

「昨日お酒を何杯呑みましたか？」の質問に対して入力したお酒の杯数分「🍺」が描画されるプログラムです。

ソースコード

修正前

// ビールの個数を受け取って、ビールの配列を返す
function getBeers(numOfCups) {
    const beers = [];

    for (let cups = 1; cups <= numOfCups; cups +=1) {
        beers.push(prepareBeer());
    }
    //HTMLに描画
    beers.map((beer) => {
        let div = document.createElement('div');
        div.textContent = beer;
        beerBox.appendChild(div);
    })
};

ビールを取得するgetBeers関数でHTMLの描画まで行っています。このように1つの関数に複数の役割を持たせると結局は1つの大きな関数となって、関数型の優位性が失われてしまいます。

リファクタリング

// ビールの個数を受け取って、ビールの配列を返す
function getBeers(numOfCups) {
    const beers = [];

    for (let cups = 1; cups <= numOfCups; cups +=1) {
        beers.push(prepareBeer());
    }
    return beers;
};

// ビールの配列をHTMLに描画する
function renderBeers(beers) {
    beerBox.textContent = beers.join("");
}

ソースコードの一部を切り取っての説明で申し訳ございません。

getBeers()関数は純粋にビールの配列を返すだけ。関数の役割が1つに定まる。renderBeers()関数でHTMLに描画する。このようにHTML関連部分を切り分けています。

終わりに

関数型で1つの関数に役割を持たせることで誰が見ても読みやすいプログラムを書けることを学べました。