함수 합성 코드 작성
앞서 flatten에 대해서 배웠는데 이 flatten을 활용해 아래와 같이 함수를 합성하여 활용하곤 한다. 예를 들면 아래와 같다.
go(arr,
L.flatten,
L.filter(a => a % 2),
L.map(a => a * a),
take(4),
reduce(add),
log);
위와 같은 함수를 매우 많이 사용하게 되는데, 실무적인 데이터를 사용해서 더 명확하게 이해할 수 있다.
지연성 / 이터러블 중심 프로그래밍 실무적인 코드
const user = [
{ name: 'a', age: 21, family: [
{ name: 'a1', age: 53 }, { name: 'a2', age: 47 },
{ name: 'a3', age: 16 }, { name: 'a4', age: 15 },
] },
{ name: 'b', age: 24, family: [
{ name: 'b1', age: 58 }, { name: 'b2', age: 51 },
{ name: 'b3', age: 19 }, { name: 'b4', age: 22 },
] },
{ name: 'c', age: 31, family: [
{ name: 'c1', age: 64 }, { name: 'c2', age: 62 },
] },
{ name: 'd', age: 20, family: [
{ name: 'd1', age: 42 }, { name: 'd2', age: 42 },
{ name: 'd3', age: 11 }, { name: 'd4', age: 7 },
] },
];
go(users,
L.map(u => u.family),
L.flatten,
console.log);
// { name: 'a1', age: 53 },
// { name: 'a2', age: 47 },
// { name: 'a3', age: 16 },
// { name: 'a4', age: 15 },
// { name: 'b1', age: 58 },
// { name: 'b2', age: 51 },
// { name: 'b3', age: 19 },
// { name: 'b4', age: 22 },
// { name: 'c1', age: 64 },
// { name: 'c2', age: 62 },
// { name: 'd1', age: 42 },
// { name: 'd2', age: 42 },
// { name: 'd3', age: 11 },
// { name: 'd4', age: 7 },
처음 map과 flatten함수만 사용하면 위와 같다.
그 다음 filter를 통해 user의 나이가 20일 미만인 경우를 거쳐서 이름을 뽑아내어 4명만 뽑아내고자 한다면 아래와 같이 사용할 수 있다.
go(users,
L.map(u => u.family),
L.flatten,
L.filter(u => u.age < 20),
L.map(u => u.name),
take(4),
console.log);
// (4) ["a3", "a4", "b3", "d3"]
이름 말고 나이를 뽑고자 해도 쉽게 바꿀 수 있다.
go(users,
L.map(u => u.family),
L.flatten,
L.filter(u => u.age < 20),
L.map(u => u.age),
take(4),
console.log);
// (4) [16, 15, 19]
함수를 어떻게 조합하고 어떻게 구성하느냐에 따라서 데이터를 변경하고 원하는 값을 얻어낼 수 있다.
즉, 함수형 프로그래밍은 데이터를 어떻게 구성할지를 먼저 만들어내고 프로그래밍을 하는 것이 아니라, 조합되어 있는 함수에 맞는 데이터를 구성하는 식으로 작성하는 것이다.
객체지향 프로그래밍은 데이터를 우선적으로 정리를 하고 메서드를 그 이후에 만들어서 작성해나가지만, 함수형 프로그래밍은 이미 만들어진 함수 조합이 있다면 그 함수 조합에 맞는 데이터를 구성하는 식으로 작성하기 때문에 함수를 조금 더 우선순위에 두는 프로그래밍이다.
프로퍼티가 어떻게 바뀌든 혹은 변수명이 어떻게 바뀌든지간에 함수 조합에 따라서 가공할 수 있다. 추상적으로 a -> b -> c를 하겠다는 생각으로 보조함수를 조합해 하나의 고차 함수를 만들며 데이터를 다루는 것이다.
'프론트엔드 > JS' 카테고리의 다른 글
[JavaScript] L.flatMap, flatMap (0) | 2023.05.10 |
---|---|
[JavaScript] L.flatten, flatten, L.deepFlat 함수 만들기 (0) | 2023.05.09 |
[JavaScript] L.map, L.filter로 map과 filter 만들기 (0) | 2023.05.09 |
[JavaScript] 함수 합성을 통해 find 함수 만들기 (0) | 2023.05.08 |
[JavaScript] Array.prototype.join 보다 다형성 높은 join 함수 (0) | 2023.05.08 |