함수형 프로그래밍으로 생각하기
오늘 학습한 내용은 함수형 프로그래밍을 실전에서 응용이다. 오늘 학습을 통해 나는 명령형 프로그래밍을 선언형프로그래밍(함수형 프로그래밍)으로 바꾸는 것을 계속 연습을 했다.
명령형 프로그래밍을 선언형 프로그래밍으로 만들기 위한 생각 길잡이(‼모든 상황에 해당하는 건 아님!)
- if의 조건문은 filter함수를 통해 제어해준다.
- 값을 변화 시킨 후 변수를 할당한다면 map함수를 통해 값을 변형 시켜준다.
- for, while문에서 어느 시점에서 break를 한다면 take 함수를 통해 멈춰준다.
- 축약 및 합산은 reduce로 대체 선언한다.
- for, while문은 range함수를 사용해서 루프를 돌린다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
//변경전
function f1(limit, list) {
let acc = 0;
for (const a of list) {
if (a % 2) {
const b = a * a;
acc += b;
if (--limit === 0) break;
}
}
console.log(acc);
}
//변경후
function f2(limit, list) {
const add = (a, b) => a + b;
console.log(
_.reduce(
add, //4번
L.take(
limit, //3번
L.map(
(a) => a * a, //2번
L.filter((a) => a % 2, list)
)
)
)
); //1번
}
//파이프함수를 써서 변경
function f3(limit, list) {
_.go(
list,
L.filter((a) => a % 2),
L.map((a) => a * a),
L.take(limit),
_.reduce(add),
console.log
);
}
또한 pipe함수를 사용한다면 더욱 직관적으로 코드가 읽히게 된다.😎
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//명령형 프로그래밍 변경전
function f3(end) {
let i = 1;
while (i < end) {
if (i % 2) console.log(i);
i += 2;
}
}
//함수형 프로그래밍 변경후
function f4(end) {
_.each(console.log, L.range(1, end, 2));
}
//go함수 사용해서 보기 좋게
function f4(end) {
_.go(L.range(1, end, 2), _.each(console.log));
}
Callback vs Promise
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// callback
function add10(a, callback) {
setTimeout(() => callback(a + 10), 100);
}
add10(5, (res) => {
add10(res, (res) => {
add10(res, (res) => {
console.log(res);
});
});
});
// Promise
function add20(a) {
return new Promise((resolve) => setTimeout(() => resolve(a + 20), 100));
}
add20(5).then(add20).then(add20).then(console.log);
Callback 함수는 함수가 계속 연결되기 때문에 가독성이 많이 떨어진다. 하지만 Promise를 사용하게 되는 값을 비동기적으로 보낼 수도 있고 then을 통해 상태를 받아 풀어줄 수도 있다.
객체를 이터러블 프로그래밍으로 다루기
객체(key-value)를 이터러블로 다루려면 배열로 바꿔 줘야 한다. 하지만 객체의 모든 요소들을 거쳐 배열로 만드는 과정은 비효율적이다. 그래서 객체를 변화 시킬 때 Fxjs라이브러리를 활용해서 동시적이고 지연적으로 다뤄보는 학습을 하게 됐다.
가장 중요하게 느낀 것은 이터러블로 다룰 때 데이터를 어떻게 변하게 될 것인지 상상하면서 코드를 작성하는 것이다. 나는 이번 실습에서 객체를 배열로 만들 때 객체의 요소를 배열 요소로 만들어주고 배열 요소들을 하나의 배열에 넣는 과정을 통해 데이터가 어떻게 변하는지를 알게 됐다.