함수형 자바스크립트 기본기 정리

함수형 자바스크립트에서의 기본기

평가란?

• 코드가 계산(Evaluation) 되어 값을 만드는 것

// 🌱 평가(Evaluation)하기
const log = console.log;

log(1); // 1로 평가
log(1 + 2); // 3으로 평가
log(3 + 4); // 7로 평가
log([1, 2]); // 배열 [1, 2]로 평가
log([1, 2 + 3]); // 배열 [1, 5]로 평가
log([1, 2, [3, 4]]); // 배열 [1, 2, [3, 4]]로 평가
log([1, 2, ...[3, 4]]); // 배열 [1, 2, 3, 4]로 평가

일급이란?

• 값으로 다룰 수 있다.
• 변수에 담을 수 있다.
• 함수의 인자로 사용될 수 있다.
• 함수의 결과로 사용될 수 있다.

// 🌱 일급이란?
// 값으로 다룰 수 있다. 따라서
const a = 10; // 변수에 담을 수 있고
const add10 = a => a + 10; // 함수의 인자로, 함수의 결과(20 리턴)로 사용될 수 있다.
const r = add10(a);

console.log(r); // 20

일급 함수란?

• 함수를 값으로 다룰 수 있다.
• 조합성과 추상화의 도구

// 🌱 일급 함수란?
const log = console.log;

// 함수를 값으로 다룰 수 있다. 따라서
// 1. 변수에 담을 수 있다.
const add5 = a => a + 5; 

// 2. 함수(log)의 인자로 함수(add5)가 사용될 수 있다. 
log(add5); // a => a + 5

// 3. 평가한 후 결과로 만들어서(10) 다른 함수(log)에 전달할 수 있다.
log(add5(5)); // 10

// 4. 함수의 결과값으로 함수가 사용될 수 있다.
// f1이라는 함수를 실행했을 때, 다시 함수를 리턴할 수 있다.
const f1 = () => () => 1;
log(f1()); // () => 1

// 5. 다른 변수에 담을 수 있다.
const f2 = f1();
log(f2); // () => 1

// 6. 원하는 시점에 평가를 할 수 있다.
log(f2()); // 1

고차 함수란?

• 일급 함수의 개념을 이용하여 함수를 값으로 다루는 함수
• 크게 두 가지의 고차 함수가 있다.

1. 함수를 인자로 받아서 실행하는 함수

• apply1
• times

// 🌱 apply1 고차 함수
const log = console.log;
// 함수가 함수를 받아서 내부에서 실행 됨 -> 함수를 인자값으로 받는다.
const apply1 = f => f(1);
const add2 = a => a + 2;

log(apply1(add2)); // 3
// apply1 함수는 add2 함수를 인자로 받아서
// 내부에서 실행했다. -> (a => a + 2)(1)

// 🌱 times 고차 함수
const times = (f, n) => {
  let i = -1;
  while (++i < n) {
    f(i);
  }
};

times(log, 3);
// 0
// 1
// 2
times(a => log(a + 10), 3);
// 10
// 11
// 12

// times 함수는 함수를 값으로 받고(f), 다른 값도(n) 받아서
// 내부에서 실행했다. -> (console.log)(i), (a => log(a + 10))(i)
// times 함수같은 경우 내부에서 실행하면서 원하는 인자를 적용하는 함수이다.
// 이러한 프로그래밍을 Applicative programming이라고도 한다.

2. 함수를 만들어 리턴하는 함수 (클로저를 만들어 리턴하는 함수)

• addMaker

// 🌱 addMaker 고차 함수
const log = console.log;
const addMaker = a => b => a + b;
const add10 = addMaker(10);

log(add10); // b => a + b, 함수가 실행되었을 때, 함수가 리턴되었다.
log(add10(5)); // 15
log(add10(10)); // 20

위의 addMaker 함수에서 b => a + b 함수에서 a(10)의 값을 기억하고 있다. 해당 함수가 만들어질 때의 환경인 a와 함수 b => a + b 자체의 객체의 조합을 클로저라고 한다. 

 

따라서 addMaker 함수는 클로저를 리턴하는 함수이며, 함수가 함수를 만들어 리턴할 때는 결국 클로저를 만들어 사용하게 된다.

---

함수형 프로그래밍과 JavaScript ES6+

함수형 프로그래밍과 JavaScript ES6+ - 인프런 | 강의