함수형 프로그래밍 #3 - 기능에 따른 콜백의 여러가지 이름

 

이 포스팅은 아래 강의를 수강하며 정리한 글입니다.

 

https://www.inflearn.com/course/%ED%95%A8%EC%88%98%ED%98%95-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D

자바스크립트로 알아보는 함수형 프로그래밍 (ES5) - 인프런

 

프로그램을 함수형으로 작성한다면, 하나의 함수는 고차함수로서 또다른 함수를 값(인자)으로 전달하게 된다.

 

이렇게 내부의 인자로 전달되어 고차함수보다 먼저 종료되는 함수를 "콜백함수"라고 하는데, 함수형 프로그래밍에서는 그 콜백함수의 이름을 기능에 따라 달리 부른다.

 

• predi(predicate) : 조건을 return
• iter(iterate) : for문처럼 반복을 담당
• mapper(mapping) : 데이터의 속성이 가진 각 값을 return

 

함수형 프로그래밍에서 각 함수가 서로의 영향을 받지 않고 독립적으로 존재할 수 있도록 해주는 것은, 바로 각 함수 내부에서 개발자가 구현하는 위 3개의 콜백함수다.

 

함수형 프로그래밍을 잘하려면, 배열 또는 배열과 유사한 순회성이 있는 데이터라면 어떤 것이든 그 값을 추출할 수 있도록 잘 설계해야 한다.

 

예를 들어 document.querySelectorAll()은 배열처럼 생겼지만, 배열은 아니고 NodeList라는 데이터타입이다.

여기서 "배열이 아니다"라는 개념이 중요하다.

즉 우리가 잘 아는 filter, map은 JavaScript에서 배열이라는 객체에만 존재하는 메서드이기 때문에, NodeList에는 사용할 수 없다는 뜻이다.

 

그래서 우리는 유연한 개발을 위해서 함수형 프로그래밍이 더욱 필요하다고 할 수 있다.

document.querySelectorAll()을 함수형 프로그래밍으로 해결하면 다음과 같다.

function _each(list, iter) {
    for (let i=0; i < list.length; i++) {
        iter(list[i]);
    }
    return list;
}

function _map(list, mapper) {
    const newList = [];
    _each(list, function (val) {
        newList.push(mapper(val));
    });
    return newList;
}

console.log(
    _map(document.querySelectorAll('*'), function (node) {
        return node.nodeName;
    })
);