函数式 JavaScript 简介：澄清常见误区与核心概念

函数式JavaScript简介与目标

假设当前有一个任务目标：尝试遵循函数式语言的原则来编写JavaScript代码。

接下来的系列文章将带领大家开启这段学习旅程。首先，我们需要纠正脑海中可能存在的关于函数式语言的错误认知。

在JavaScript中，函数式编程的概念常被严重误解。

显然，有部分开发者每天在使用JavaScript的函数式范式。但我认为，仍有大量JavaScript开发者并未真正理解其核心内涵。

造成这种现象的原因在于，大多数用于Web服务器端的开发语言源自C语言，而这些语言本身并非函数式语言。

函数式编程的常见误解

这种困惑通常体现在两个层面。第一层涉及以下示例中的用法，这在jQuery开发中非常普遍：

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

在上述代码中，我们传递了一个匿名函数作为参数，这就是JavaScript中著名的回调函数。请问这些函数会被立即调用吗？答案是否定的。

这个例子展示了函数式语言的一个关键特征：函数可以作为参数传递。然而，仅用三行代码却违反了几乎所有函数式编程的范式原则。

深入理解函数式范式

第二层的困惑更为微妙。看看这种心态：只有少数前卫的JavaScript开发者会这样看待自己：

听起来不错！但我已经掌握了函数式编程，我在所有项目中都使用了Underscore.js。

Underscore.js是一个著名且广泛使用的JavaScript库。举例来说，假设有一组单词，我需要获取每个单词的前两个字母。使用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));

仔细分析，这一行代码与之前的五行代码效果相同。许多词只是参数或占位符。真正的逻辑在于以有意义的方式将map函数、first函数和常量2组合在一起。

有些人可能会问：这个例子中的神奇之处在哪里？毕竟，声称任何例子都神奇似乎有些吹嘘之嫌，对吧？

我打算在接下来的两篇文章中解释上述示例究竟神奇在何处，如果你感兴趣，请继续阅读。

系列文章展望

这一系列博客旨在帮助大家将函数式编程的美妙之处应用到JavaScript代码中。

在下一节中，我将讨论JavaScript语言中函数式及非函数式的多种元素。掌握这些知识后，我们可以通过整合这些元素，逐步在脑海中构建起函数式编程的完整体系，并理解它们在JavaScript中的具体表现。