Functional JavaScript 入門 (1)_JavaScript スキル

今、タスクを完了する必要があると仮定してみましょう。可能な限り関数型言語の原則に従って JavaScript コードを作成します。

以下の一連の記事は、私と一緒にそのような旅を始められるように設計されています。まず、関数型言語について皆さんの頭の中にあるかもしれないいくつかの誤解を正す必要があります。

JS 言語の関数式は深刻な誤解を受けています。

明らかに、JavaScript の関数型パラダイムを毎日使用している開発者はかなりの数います。 JavaScript 開発者の大部分はこれらのことを実際には理解していないと思います。

その理由は、Web サーバーで使用される開発言語のほとんどが C から派生したものであり、これらの言語が関数型言語ではないことを誰もが知っているからだと思います。

混乱には一般に 2 つのレベルがあります。最初のレベルは、次の例の使用法についてです。これは、jQuery で非常に一般的な使用法です:

$(".signup").click(function(event){
    $("#signupModal").show();
    event.preventDefault();
});

上記のコードでは、匿名関数をパラメーターとして渡します。これは、JavaScript の悪名高いコールバック関数です。これらの関数は呼び出されますか?全くない！

上の例は、関数型言語の重要な特徴を示しています。関数はパラメーターです。一方、この例は、わずか 3 行のコードで違反できるほぼすべての関数型プログラミング パラダイムに違反しています。

2 番目のレベルの混乱はさらに微妙です。これを見てください: これは、一握りのトレンディーな JS 開発者だけが自分自身をどのように見ているかです:

うーん、それはすごいですね！しかし、私はすでに関数型プログラミングを完全に理解しており、すべてのプロジェクトで Underscore.js を使用しています。

Underscore.js は、非常に有名でユビキタスな JavaScript ライブラリです。たとえば、一連の単語があり、各単語の最初の 2 文字が必要だとします。これは、Underscore.js を使用して非常に簡単に記述できます:

var firstTwoLetters = function(words){
    return _.map(words,function(word){
        return _.first(word,2);
    });
};

この JavaScript の例を見てください。関数型スタイルのエレガントで実用的な関数、_.map と _.first を使用しました。これについてどう思いますか？

underscore.js や _.map などの関数は関数パラダイムの有用な例ですが、この例のようにそれらをまとめるのは少しわかりにくいです。本当にこれを行う必要がありますか?

もっと「機能的」にする方法を考え始めると、上の例を次のように書き換えることができるかもしれません:

// ...a little bit of magic
var firstTwoLetters = map(first(2));

よく考えてみると、このコード行は上記の 5 行と同じ効果があります。多くの単語は単なるパラメーターまたはプレースホルダーです。本当のロジックは、map 関数、first 関数、および定数 2 を意味のある方法で組み合わせることにあります。

皆さんの中には、この例の何が魔法なのかと考えている人もいるかもしれません。結局のところ、どんな例も魔法だと言うのは、ちょっと自慢しているようなものですよね？

次の 2 つの記事で上記の例の魅力を説明する予定です。興味があれば読み続けてください。

このブログ シリーズは、関数型プログラミングの美しさを JavaScript コードに適用するのに役立ちます。

次のセクションでは、JavaScript 言語のさまざまな機能要素と非機能要素について説明します。この知識があれば、これらの要素を統合して頭の中で関数型プログラミングの完全なシステムをゆっくりと形成し、JavaScript でのパフォーマンスを理解できるようになります。