함수형 프로그래밍 D3

배열이든 유사배열이든 상관없이 순회하는 순수함수

document.querySelector('*').map(item => console.log(item));

querySelector는 배열이 아닌 NodeList를 리턴하게 된다.
이 NodeList는 배열이 아니므로 map 메서드를 갖고 있지 않다.

이게 객체지향과 함수형 프로그래밍이 다른 부분이다.

객체지향에서 메서드는 클래스에 종속되어있기 때문에 클래스가 메서드를 구현하지 않으면 사용할 수 없다.

하지만 함수형 프로그래밍에서는 함수를 구현하고 만들어져있는 함수에 데이터를 입력하여 처리하기때문에 프로그래밍할때 어떤 메서드가 없어서 기능을 구현하지 못하는 일은 없다.

위 객체지향에서는 문제가 되던 부분이 아래 함수형 프로그래밍에서는 순수 함수들을 이용하여 문제를 해결 할 수 있게 됐다.

function _each(list, iter) {
  for (let i = 0; i < list.length; i++) {
    iter(list[i]);
  }
}
function _map(list, mapper) {
  const temp_list = [];
  _each(list, function (item) {
    temp_list.push(mapper(item));
  });
  return temp_list;
}

_map(document.querySelector('*'), function (node) {
  return node.nodeName;
})

커링 기법의 응용

const _curryr = (fn) => function (a, b) {
    return arguments.length === 2 ? fn(a, b) : (b) => fn(b, a);
};

const _get = _curryr((obj, key) => obj === null ? undefined : obj[key]);

const user = {name: 'kim'};
const device = {maker: 'apple'};

const userName = _get(user, 'name');
console.log(userName);

const _getName = _get('name');
const _getUserName = _getName(user);
console.log(_getUserName);

const _getMaker = _get('maker');
const deviceMaker = _getMaker(device);
console.log(deviceMaker);

_get 함수를 들고다니면서 여러 종류의 객체들을 집어넣고 2가지 방식으로 집어넣어진 객체들의 프로퍼티 값을 추출할 수 있게 되었다.

초기 memo가 있어야만하는 reduce 함수 제작

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

const _reduce = (list, iter, memo) => {
    _each(list, function (val) {
        memo = iter(memo, val);
    });
    return memo;
};

const add = (a, b) => a + b;
console.log(
    _reduce([1, 2, 3], add, 10)
    )

초기 memo가 없어도 되는 reduce 함수 제작

// 새로운 함수 _rest 추가
const _rest = (list, num) => {
  return Array.prototype.slice.call(list, num || 1);
}

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

function _reduce (list, iter, memo) => {
  	if (arguments.length === 2) {
      memo = list[0];
      list = _rest(list);
    }
    _each(list, function (val) {
        memo = iter(memo, val);
    });
    return memo;
};

const add = (a, b) => a + b;
console.log(
    _reduce([1, 2, 3], add, 10)
    )