JavaScript_Basics의 함수형 프로그래밍 기본 가이드

소개

JavaScript는 강력하지만 오해를 받는 프로그래밍 언어입니다. 어떤 사람들은 이것이 객체지향 프로그래밍 언어라거나 함수형 프로그래밍 언어라고 말하기를 좋아합니다. 다른 사람들은 이것이 객체지향 프로그래밍 언어가 아니다거나 함수형 프로그래밍 언어가 아니라고 말하기를 좋아합니다. 다른 사람들은 이것이 객체지향 언어와 함수형 언어의 특성을 모두 가지고 있거나 객체지향적이지도 함수형 언어도 아니라고 생각합니다. 이제 그러한 주장은 접어두겠습니다.

JavaScript 언어 범위 내에서 가능한 한 많은 기능적 프로그래밍 원리를 사용하여 프로그램을 작성하는 임무를 공유한다고 가정해 보겠습니다.

먼저 우리 마음 속에 있는 함수형 프로그래밍에 대한 오해를 바로잡을 필요가 있습니다.

JS세계에서 (심각하게) 오해받고 있는 함수형 프로그래밍

분명히 함수형 패러다임에서 JavaScript를 하루 종일 사용하는 개발자가 꽤 있습니다. 나는 여전히 그 가식의 진정한 의미를 실제로 이해하지 못하는 JavaScript 개발자가 더 많다고 말하고 싶습니다.

이러한 상황은 서버측에서 사용되는 많은 웹 개발 언어가 C 언어에서 파생된 것이며, C 언어는 분명히 함수형 프로그래밍 언어가 아니기 때문에 발생한다고 확신합니다.

혼란에는 두 가지 수준이 있는 것 같습니다. 첫 번째 수준의 혼란을 설명하기 위해 jQuery에서 자주 사용되는 다음 예를 사용하겠습니다.

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

자, 잘 보세요. JavaScript 세계에서는 "콜백" 함수로 알려진 익명 함수를 매개변수로 전달합니다.

정말 이것이 함수형 프로그래밍이라고 생각하는 사람이 있나요? 별말씀을요!

이 예는 함수형 언어의 주요 기능인 매개변수로서의 함수를 보여줍니다. 반면에 이 3줄 예제는 거의 모든 다른 함수형 프로그래밍 패러다임에도 어긋납니다.

두 번째 수준의 혼돈은 좀 더 미묘합니다. 이 글을 읽고 트렌드를 추구하는 일부 JS 개발자들은 은밀하게 생각하고 있습니다.

알았어, 젠장! 하지만 나는 이미 함수형 프로그래밍에 관해 알아야 할 모든 것을 알고 있습니다. 나는 모든 프로젝트에서 Underscore.js를 사용합니다.

Underscore.js는 어디에서나 사용되는 인기 있는 JavaScript 라이브러리입니다. 예를 들어, 단어 세트가 있고 세트의 각 요소가 각 단어의 처음 두 글자인 세트를 가져와야 합니다. Underscore.js를 사용하여 이를 구현하는 것은 매우 간단합니다.

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

보세요! JavaScript 마법사를 참조하세요. 저는 _.map 및 _.first와 같은 고급 기능 응용 프로그램 기능을 사용하고 있습니다. 더 하고 싶은 말은 없나요, 릴랜드?

하이라이트와 _.map과 같은 함수는 함수형 패러다임의 매우 귀중한 부분이지만, 이 예에서 사용된 것과 같이 코드가 구성되는 방식은... 장황하고 이해하기 너무 어려워 보입니다. 정말 이렇게 해야 하나요?

조금 더 "기능적" 사고로 생각하기 시작하면 위의 예를 다음과 같이 변경할 수 있습니다.

// ...一点魔法
var firstTwoLetters = map(first(2));

잘 생각해 보세요. 한 줄의 코드에는 위의 다섯 줄의 코드와 동일한 정보가 포함되어 있습니다. 단어와 단어는 단지 매개변수/자리표시자일 뿐입니다. 이 방법의 핵심은 맵 함수, 첫 번째 함수, 상수 2를 보다 명확하게 결합하는 것입니다.

JavaScript는 함수형 프로그래밍 언어인가요?

언어가 "기능적" 언어인지 여부를 결정하는 마법의 공식은 없습니다. 다른 언어가 분명히 기능하지 않는 것처럼 일부 언어는 분명히 기능적이지만 모호한 중간 어딘가에 속하는 언어가 많이 있습니다.

여기에는 기능적 언어에서 일반적으로 사용되며 중요한 "구성요소"가 있습니다(JavaScript에서는 굵은 기호를 사용할 수 있음)

• 함수는 '일급 시민'입니다.
• 함수는 함수를 반환할 수 있습니다
• 문학적 클로저 지원
• 함수는 "순수"해야 합니다
• 신뢰할 수 있는 재귀
• 변이 상태 없음

이 목록은 결코 독점적인 목록은 아니지만, 최소한 기능적인 방식으로 프로그램을 작성할 수 있게 해주는 Javascript의 가장 중요한 세 가지 기능을 하나씩 논의하겠습니다.

각 항목을 자세히 살펴보겠습니다.

함수는 '일류 시민'입니다.

이것은 아마도 모든 구성 요소 중에서 가장 명백하며 아마도 많은 현대 프로그래밍 언어에서 가장 일반적일 것입니다.

JavaScript의 지역 변수는 var 키워드를 통해 정의됩니다.

var foo = "bar";

JavaScript에서 함수를 지역 변수로 정의하는 것은 매우 쉽습니다.

var add = function (a, b) { return a + b; };
var even = function (a) { return a % 2 === 0; };

이것들은 모두 사실이고 변수입니다. 변수 add와 변수는 값을 할당하여 함수 정의와 참조 관계를 설정하기도 합니다. 이 참조 관계는 필요할 경우 언제든지 변경할 수 있습니다.

// capture the old version of the function
var old_even = even; 
 
// assign variable `even` to a new, different function
even = function (a) { return a & 1 === 0; };

물론 특별한 일은 아닙니다. 그러나 "일류 시민"이 되는 중요한 특징은 함수를 매개변수로 다른 함수에 전달할 수 있다는 것입니다. 예:

var binaryCall = function (f, a, b) { return f(a, b); };

这是一个函数，他接受了一个二元函数f，和两个参数a，b，然后调用这个二元函数f，该二元函数f以a、b为输入参数。

add(1,2) === binaryCall(add, 1, 2); 
// true

这样做看起来有点笨拙，但是当把接下来的函数式编程“配料”合并考虑的时候，牛叉之处就显而易见了…

函数能返回函数（换个说法“高阶函数”）

事情开始变的酷起来。尽管开始比较简单。函数最终以新的函数作为返回值。举个例子：

var applyFirst = function (f, a) { 
 return function (b) { return f(a, b); };
};

这个函数（applyFirst）接受一个二元函数作为其中一个参数，可以把第一个参数（即二元函数）看作是这个applyFirst函数的“部分操作”，然后返回一个一元（一个参数）函数，该一元函数被调用的时候返回外部函数的第一个参数（f）的二元函数f(a, b)。返回两个参数的二元函数。

让我们再谈谈一些函数，例如mult(乘法)函数：

var mult = function(a, b) { return a * b; };

依循mult(乘法)函数的逻辑，我们可以写一个新的函数double(乘方)：

var double = applyFirst(mult, 2);
 
double(32); 
// 64
double(7.5); 
// 15

这就是偏函数，在FP中经常会用到。（译注：FP全名为 Functional Programming 函数式程序设计 ）

我们当然可以像applyFirst那样定义函数：

var curry2 = function (f) {
 return function (a) {
  return function (b) {
   return f(a, b);
  };
 };
};

现在，我想要一个double（乘方）函数，我们换种方式做：

var double = curry2(mult)(2);

这种方式被称作“函数柯里化”。有点类似partial application（偏函数应用），但是更强大一点。

准确的说，函数式编程之所以强大，大部分因于此。简单和易理解的函数成为我们构筑软件的基础构件。当拥有高水平的组织能力、很少重用的逻辑的时候，函数能够被组合和混合在一起用来表达出更复杂的行为。

高阶函数可以得到的乐趣更多。让我们看两个例子：

1.翻转二元函数参数顺序

// flip the argument order of a function
var flip = function (f) {
 return function (a, b) { return f(b, a); };
};
 
divide(10, 5) === flip(divide)(5, 10); 
// true

2.创建一个组合了其他函数的函数

// return a function that's the composition of two functions...
// compose (f, g)(x) -> f(g(x))
var compose = function (f1, f2) {
 return function (x) {
  return f1(f2(x));
 };
};
 
// abs(x) = Sqrt(x^2)
var abs = compose(sqrt, square);
 
abs(-2); 
// 2

这个例子创建了一个实用的函数，我们可以使用它来记录下每次函数调用。

var logWrapper = function (f) {
 return function (a) {
  console.log('calling "' + f.name + '" with argument "' + a);
  return f(a);
 };
};

var app_init = function(config) { 
/* ... */
 };
 
if(DEBUG) {
 
// log the init function if in debug mode
 app_init = logWrapper(app_init);
}
 
// logs to the console if in debug mode
app_init({
 
/* ... */
});

词法闭包+作用域

我深信理解如何有效利用闭包和作用域是成为一个伟大JavaScript开发者的关键。
那么…什么是闭包？

简单的说，闭包就是内部函数一直拥有父函数作用域的访问权限，即使父函数已经返回。61bc4fd3a408f9b7fe12fc5564f7379b
可能需要个例子。

var createCounter = function () {
 var count = 0;
 return function () {
  return ++count;
 };
};
 
var counter1 = createCounter();
 
counter1(); 
// 1
counter1(); 
// 2
 
var counter2 = createCounter();
 
counter2(); 
// 1
counter1(); 
// 3

一旦createCounter函数被调用，变量count就被分配一个新的内存区域。然后，返回一个函数，这个函数持有对变量count的引用，并且每次调用的时候执行count加1操作。

注意从createCounter函数的作用域之外，我们是没有办法直接操作count的值。Counter1和Counter2函数可以操作各自的count变量的副本，但是只有在这种非

常具体的方式操作count（自增1）才是被支持的。

在JavaScript，作用域的边界检查只在函数被声明的时候。逐个函数，并且仅仅逐个函数，拥有它们各自的作用域表。（注：在ECMAScript 6中不再是这样，因为let的引入）

一些进一步的例子来证明这论点：

// global scope
var scope = "global";
 
var foo = function(){
 
// inner scope 1
 var scope = "inner";
 var myscope = function(){
  
// inner scope 2
  return scope;
 };
 return myscope;
};
 
console.log(foo()()); 
// "inner"
 
console.log(scope); 
// "global"

关于作用域还有一些重要的事情需要考虑。例如，我们需要创建一个函数，接受一个数字（0-9），返回该数字相应的英文名称。

简单点，有人会这样写：

// global scope...
var names = ['zero','one','two','three','four','five','six','seven','eight','nine'];
var digit_name1 = function(n){
 return names[n];
};

但是缺点是，names定义在了全局作用域，可能会意外的被修改，这样可能致使digit_name1函数所返回的结果不正确。
那么，这样写：

var digit_name2 = function(n){
 var names = ['zero','one','two','three','four','five','six','seven','eight','nine'];
 return names[n];
};

这次把names数组定义成函数digit_name2局部变量.这个函数远离了意外风险，但是带来了性能损失，由于每次digit_name2被调用的时候，都将重新为names数组定义和分配空间。换个例子如果names是个非常大的数组，或者可能digit_name2函数在一个循环中被调用多次，这时候性能影响将非常明显。

// "An inner function enjoys that context even after the parent functions have returned."
var digit_name3 = (function(){
 var names = ['zero','one','two','three','four','five','six','seven','eight','nine'];
 return function(n){
  return names[n];
 };
})();

这时候我们面临第三个选择。这里我们实现立即调用的函数表达式，仅仅实例化names变量一次，然后返回digit_name3函数，在 IIFE (Immediately-Invoked-Function-Expression 立即执行表达式)的闭包函数持有names变量的引用。
这个方案兼具前两个的优点，回避了缺点。搞定！这是一个常用的模式用来创建一个不可被外部环境修改“private”（私有）状态。