함수형 프로그래밍과 JavaScript ES6+ 강의를 듣고 정리한 내용입니다.
✅ 평가
코드가 계산되어 값을 만드는 것을 말한다.
1 + 3이라는 코드가 평가되어 4라는 값이 나오는 것과 2 * 4라는 코드가 평가되어 8이라는 값이 나오는 것을 볼 수 있다.
✅ 일급
값으로 다룰 수 있고 변수에 담을 수 있다.
함수의 인자로 사용될 수 있으며 함수의 결과로 사용될 수 있다.
const num = 10
const add10 = a => a + 10;
const result = add10(num);
console.log(result)
// Output: 20
여기서 num이라는 변수에 10이라는 값이 저장되고 add10이라는 함수의 인자로 num이 전달되었다.
그리고 add10(num)의 결과가 result라는 변수에 저장된다.
✅ 일급함수
함수의 결과값으로 함수를 사용할 수 있다.
즉, 함수를 값으로 다룰 수 있다.
const f1 = () => () => 1;
const f2 = f1();
console.log(f1());
console.log(f2);
console.log(f2());
/*
Output: () => 1
() => 1
1
*/
여기서 f1이라는 함수는 1을 값으로 가지는 함수를 값으로 가진다.
따라서 f1을 실행한 결과를 출력하면 1을 리턴하는 함수인 () => 1이 출력되는 것을 볼 수 있다.
f2는 f1이라는 함수를 값으로 가진다.
따라서 f2를 평가한 결과는 1이 된다.
✅ 고차함수
함수를 값으로 다룰 수 있으며 함수를 인자로 받아서 실행하거나 함수를 만들어 리턴할 수 있다.
✅ 고차함수 - 함수를 인자로 받아서 실행하는 함수
const num1 = f => f(1)
const add2 = a => a + 2
console.log(num1(add2))
console.log(num1(a => a - 2))
/*
Output: 3
-1
*/
num1은 함수를 받아서 함수에 1을 적용하는 함수이다.
add2는 a라는 인자를 받아서 a에 2를 더하는 함수이다.
첫번째 로그에서는 num1의 인자로 add2라는 함수가 넘어가게 된다.
num1의 안에서 add2의 함수가 실행되고 인자값으로 1을 적용함에 따라 결과값은 3이 된다.
같은 맥락으로 num1의 인자로 a => a - 2 라는 함수를 넘겨주었을 경우 결과값은 -1이 출력된다.
const times = (f, n) => {
let i = 0;
while(++ i < n) f(i);
}
times(console.log, 5)
times(a => console.log(a+10), 5)
/*
Output: 1
2
3
4
11
12
13
14
*/
times는 f라는 함수와 n이라는 값을 인자로 받으며 while문을 통해 1부터 n까지의 수를 f 함수의 인자로 넣는다.
따라서 times에 console.log라는 함수와 5라는 값을 넣으면 i가 1부터 5 미만이 될 때 까지 console.log(i)라는 함수를 실행하고 결과값으로 1, 2, 3, 4가 출력된다.
✅ 고차함수 - 함수를 만들어 리턴하는 함수
const addMaker = a => b => a + b;
const add10 = addMaker(10);
console.log(add10);
console.log(add10(5));
/*
Output: b => a + b
15
*/
addMaker는 a를 받고 b를 받은 후 a + b의 값을 리턴한다.
addMaker에 10이라는 값을 넣으면 add10이라는 또 다른 함수가 만들어지게 된다.
add10을 출력해보면 b => a + b라는 함수가 출력된다.
이후 add10의 인자값으로 5를 넣으면 결과값으로 15라는 값이 출력된다.
이를 해석해보자면 add10은 addMaker(10)이라는 함수를 받았을 때 이미 a의 값으로 10을 받았음을 기억하게 된다.
즉, add10은 함수이자 a를 기억하고 있는 클로저가 되며 addMaker는 클로저를 만들어 리턴하는 고차함수가 된다.
'JavaScript' 카테고리의 다른 글
[FP&ES6+] 제너레이터 (0) | 2021.12.01 |
---|---|
[FP&ES6+] 리스트 순회와 이터러블, 이터레이터 (0) | 2021.10.29 |
ES6 문법 정리 (0) | 2021.07.24 |
검색화면만들기(MVC) - 추천 검색어 탭 구현 (0) | 2021.07.02 |
검색화면만들기(MVC) - 탭 구현 (0) | 2021.07.02 |
댓글