🤔

03-22-2020

퍼스트클래스와 포인트프리

0.

요즘 Mostly Adequate Guide for Functional Programming 이라는 책을 보고 있다. 위트있게 FP에 대해 알려주는 책인데, 초반에 아래 코드를 보여준다. (괄호 및 번역은 나)

// ignorant(무지한 상태)
const getServerStuff = callback => ajaxCall(json => callback(json));

// enlightened(계몽된 상태)
const getServerStuff = ajaxCall;

위와 아래가 같다는 것인데, 어떻게 같지? 하는 생각이 처음엔 든다. 차근차근 알아보자.

1. 퍼스트클래스

먼저, 아래 코드를 보자.

const hi = name => `Hi ${name}`;
const greeting = name => hi(name);

name을 받아 Hi name을 반환하는 hi 함수를 가지고 greeting 함수를 만들었다. 그런데 위 코드는 아래와 같이 바꿀 수 있다.

const greeting = hi;

왜나면 자바스크립트에서 함수는 퍼스트클래스이기 때문에 변수에 할당하는 것이 가능하기 때문이다. hi를 콘솔에 찍어보면 결과는 아래와 같다.

console.log(hi) // name => `Hi ${name}`

그리고 아래 코드를 실행해보면 true를 반환한다.

hi.toString() === (name => `Hi ${name}`).toString() // true

다시 말해, 함수 hiname을 받아 Hi ${name}을 반환하는 익명 함수가 hi라는 변수에 할당되어있는 것일 뿐이고, 그렇기 때문에,

const greeting = hi

라고 해도 같은 결과를 얻게 되는 것이다. 일반화 해보면,

어떤 함수가 arg => f(arg)의 형태라면, 변수나 인자로 넘길 때 f만 넘겨도 결과는 같다.

는 얘기.

2. 포인트프리

다시 처음의 getServerStuff으로 돌아가보면, 그래서 아래 라인은

ajaxCall(json => callback(json))

아래와 같고,

ajaxCall(callback)

그 결과로 얻은 아래 라인은

const getServerStuff = callback => ajaxCall(callback);

최종적으로 아래와 같다.

const getServerStuff = ajaxCall

그리고 위와 같이, 함수가 다루고 있는 데이터가 변수 등의 형태(json => callback(json)에서의 json 이라던지)로 눈에 드러나지 않는 코딩 스타일을 일컬어 포인트프리라고 한다.

3. 실습

간단한 코드로 실습을 해보자. 일단 x를 받아 2를 곱해 반환해주는 함수를 만들어보자.

const double = x => x * 2

그리고 이걸 Array.prototype.map()에 넣어보자.

[1,2,3].map(double) // [2, 4, 6]

잘 동작한다. Array.prototype.filter()도 해보자.

const odd = x => x % 2

[1,2,3].filter(odd) // [1, 3]

역시 잘 된다. Array.prototype.reduce()는?

const add = (x, y) => x + y

[1,2,3].reduce(add) // 6

역시 잘 된다.

4. console.log

심심해서 console.log 도 넣어보았는데,

[1,2,3].map(console.log)

아래와 같은 결과가 나온다.

1 0 [ 1, 2, 3 ]
2 1 [ 1, 2, 3 ]
3 2 [ 1, 2, 3 ]
[ undefined, undefined, undefined ]

console.log는 반환값이 없으므로 반환된 배열이 [undefined, undefined, undefined]인 것은 당연해 보인다. 그런데 위에 찍힌 값들은 뭘까?

그것은 console.log(...args)를 받아 args를 모두 콘솔에 뿌려주는 함수이고, Array.prototype.map()은 콜백 함수에 currentValue, index, array를 넘기기 때문에,
1 0 [1,2,3], 2 1 [1,2,3], 3 2 [1,2,3]이 차례로 콘솔에 찍히게 되는 것.

(끝)


©2021 Sehyun Chung