이전 글에서 작성한 코드와 비교했을 때 pipe와 go 함수를 이용하면 가독성이 얼마나 증가하는지 설명하겠다.
pipe
pipe 함수는 여러 함수를 인자로 받아 함수를 반환하는 함수이다. 이때 반환하는 함수는 객체를 인자로 받아 객체를 첫 번째 함수에 전달하고 결과 값을 반환받아 다음 함수로 전달하며 최종적인 결과값을 반환하는 함수이다.
function pipe() {
let funcList = arguments;
return function (arg) {
return reduce(funcList, function (arg, func) {
return func(arg)
}, arg);
}
}
pipe 함수를 사용하면 이전의 예제를 다음과 같이 작성한다.
const userList = [
{ age: 10, name: '홍길동' },
{ age: 20, name: '김민수' },
{ age: 30, name: '이민지' }
]
funcUserNameOver10 = pipe(
userList => filter(userList, user => user.age > 10),
userList => map(userList, get('name')),
console.log
)
funcUserNameOver10(userList); // [ '김민수', '이민지' ]
pipe가 반환한 함수에 userList를 인자로 전달하면 첫 번째 함수에 인자로 전달하고 결과값을 다음 함수에 인자로 전달하여 최종적인 결과값을 반환한다. 이전보다 더 직관적이고 가독성이 높은 코드를 작성하였다.
go
pipe 함수는 함수를 반환하는 함수라면 go 함수는 객체를 받아 바로 실행한 결과를 반환하는 함수이다. 원리는 pipe 함수와 같다. pipe에 funcList라는 배열 자체를 넣지 않고 인자로 차례로 넣기 위해 apply를 이용하였다.
function go(arg) {
let funcList = Array.prototype.slice.call(arguments, 1) ;
pipe.apply(null,funcList)(arg);
}
go 함수를 이용하면 이전의 예제를 다음과 같이 작성한다.
const userList = [
{ age: 10, name: '홍길동' },
{ age: 20, name: '김민수' },
{ age: 30, name: '이민지' }
]
go(
userList,
userList => filter(userList, user => user.age > 10),
userList => map(userList, get('name')),
console.log
) // [ '김민수', '이민지' ]
go에 다음과 같이 객체와 함수들을 인자로 전달하면 usetList를 각 함수에 인자로 전달하고 결과값을 다음 함수에 인자로 전달하며 최종적인 결과값을 반환한다. 이전보다 더 직관적이고 가독성이 높은 코드를 작성하였다.
'개발 공부 > JavaScript 공부' 카테고리의 다른 글
[JavaScript] Promise.all (0) | 2020.11.22 |
---|---|
[JavaScript] call, apply, bind (0) | 2020.07.30 |
[JavaScript] 함수형 프로그래밍(2) (0) | 2020.07.05 |
[JavaScript] 함수형 프로그래밍(1) (0) | 2020.06.30 |
[JavaScript] generator (0) | 2020.05.27 |