Ecma Internationalのもとで標準化手続きなどが行われている、ECMAScript6(ECMAScript 2015)では、JavaScriptの関数機能が拡張されています。その1つであるアロー関数について、GoogleのFirebaseを通して学習しましょう。

Firebaseの無名関数をアロー関数に書き直す

Firebaseのガイドにコレクションから複数のドキュメントを取得する(新しいタブで開く)というページがあります。

db.collection("cities").where("capital", "==", true)
    .get()
    .then(function(querySnapshot) {
        querySnapshot.forEach(function(doc) {
            // doc.data() is never undefined for query doc snapshots
            console.log(doc.id, " => ", doc.data());
        });
    })
    .catch(function(error) {
        console.log("Error getting documents: ", error);
    });

スクリプトをそのまま引用させていただきました。

db.collection("cities").where("capital", "==", true)
    .get()
    .then( querySnapshot 　=> {
        querySnapshot.forEach(function(doc) {
            // doc.data() is never undefined for query doc snapshots
            console.log(doc.id, " => ", doc.data());
        });
    })
    .catch( error => {
        console.log("Error getting documents: ", error);
    });

このスクリプトをアロー関数で書き直すとこんな感じになります。アロー関数とは無名関数の省略記法のことを指します。

無名関数の省略方法について

var f = function(x) { return x*x; };
var f = (x) => { return x*x; };
var f = x => { return x*x; };

Firebaseを使わずにもっと単純な関数にすると1行目と、2・3行目の関数はほぼ等価です。2行目の省略記法は最も典型的な省略記法です。無名関数内に1つ以上の引数がある場合、”function”の代わりに、”=>（アロー）”を記述することができます。

また無名関数内の引数が1つしかない場合は、”function”に加えて”()（丸かっこ）”も省略できます。

アロー関数と無名関数

上述したようにアロー関数と無名関数は、全く同じではありません。以下の点について両者は異なります。

• thisの値について
• arguments変数について
• コンストラクタについて
• yieldキーワードについて

詳細はMDNのリンク(新しいタブで開く)にまとめらています。興味のある方はぜひ参考にしてください。