JavaScript ES6 - 1. 함수형 자바스크립트 기본기


유인동님의 함수형 프로그래밍과 JavaScript ES6+ 인프런 강의를 듣고 개인적으로 정리한 내용입니다.
함수형 프로그래밍과 JavaScript ES6 기본기 평가와 일급, 일급 함수, 고차 함수 에 대해서 설명한다.

평가

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

예를 들어 1 + 2에 대한 결과 값이 3으로 평가 되었다고 한다.

일급

  • 값으로 다룰 수 있다.
  • 변수에 담을 수 있다.
  • 함수의 인자로 사용될 수 있다.
  • 함수의 결과로 사용될 수 있다.
1
2
3
4
const a = 10;
const add10 = a => a + 10;
const r = add10(a);
console.log(r);
console
1
> 20

일급 함수

  • 함수를 값으로 다룰 수 있다.
  • 조합성과 추상화의 도구
1
2
3
4
5
6
7
8
9
10
const add5 = a => a + 5; // a라는 변수에 함수를 값으로 다뤄서 담을 수 있다.
console.log(add5); // 함수로 전달
console.log(add5(5)); // 함수는 평가를 해서 결과로 리턴

const f1 = () => () => 1;
console.log(f1()); // f1의 함수의 결과는 함수를 전달

const f2 = f1(); // f1의 함수를 다른 변수(f2)에 담는다.
console.log(f2);
console.log(f2()); // f2함수 평가
console
1
2
3
4
5
> a => a + 5
< 10
> () => 1
> () => 1
< 1

고차 함수

함수를 값으로 다루는 함수

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 1. apply1 함수
const apply1 = f => f(1); // apply1은 f(함수)를 받아서 f(함수)에 1을 적용 한다.(함수가 함수를 받는다.)
const add2 = a => a + 2;
console.log(apply1(add2)); // f => (a => a + 2)(1)
console.log(apply1(a => a - 1));

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

times(console.log, 3);

times(a => console.log(a + 10), 3); // 함수(a => console.log(a + 10))를 times 함수의 인자값f로 받음.
console
1
2
3
4
5
6
7
8
9
10
> 3
> 0

> 0
> 1
> 2

> 10
> 11
> 22

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

1
2
3
4
const addMaker = a => b => a + b; // 함수를 리턴하는 함수(클로저 함수)
const add10 = addMaker(10); // add10라는 또 다른 함수를 생성
console.log(add10(5));
console.log(add10(10));
console
1
2
> 15
> 20

클로저 함수란 b => a + b함수가 계속 인자값 a를 기억하고 있다는 뜻이다. 즉, b => a + b함수는 a기억하는 함수이자 클로저 함수이다.

함수형 자바스크립트 기본기 소스코드

참조