[강의노트] 자바스크립트로 알아보는 함수형 프로그래밍 2

** ⚠ priv | 강의노트 카테고리에 있는 내용은 발행이 목적이 아니기 때문에 전혀 정제되어있지 않습니당.**

 

🌞 컬렉션 중심 프로그래밍

1. 수집하기 - map, values, pluck 등
2. 거르기 - filter, reject, compact 등
3. 찾아내기- find, find_index, some, every
4. 접기 - reduce, min_by, max_by, group_by, count_by, 조합

각 유형의 대표함수

map filter find reduce

얘네가 가장 추상화 레벨이 높고
대표함수 가지고 각 유형의 특화함수를 만들 수 있다.

가공할 데이터

var users = [
    { id: 11, name: "멍", age: 20 },
    { id: 22, name: "냥", age: 22 },   
    { id: 33, name: "짹", age: 27 },
    { id: 44, name: "꽥", age: 30 }
];

🔸 1. 수집하기 - map, values, pluck

🔷map

_map(users, user=>user.name);

🙄 _identity

function _identity(val) {
    return val;
}

얜 어따 쓰는거임?

걍 들어온값 그대로 내뱉는건데? values 함수를 보면됨

🔹 values

function _values(data){
    return _map(data, val=>val);
}

function _values(data){
    return _map(data,  _identity);
}

values 의 mapper 보조함수를 _identity 로 했기때문에

값들만 출력할 수 있음

이런식으로 다른 모듈이랑 조합해서 쓰려고 있는거임

실행 결과

console.log(users[0]);      // { id: 11, name: '멍', age: 20 }
console.log(_keys(users[0]));   // [ 'id', 'name', 'age' ]
console.log(_values(users[0])); // [ 11, '멍', 20 ]

🔹 pluck

특정 키값들만 싹 모음

function _pluck(data, key) {
    return _map(data, obj => obj[key]);
}

실행 결과

console.log(_pluck(users, 'age')); // [ 20, 22, 27, 30 ]
console.log(_pluck(users, 'name')); // [ '멍', '냥', '짹', '꽥' ]

🔸 2. 거르기 - filter, reject, compact

🔷filter

_filter(list, predi)

🔹 reject

predi(val)이 false 인 것만 거르기

function _reject(data, predi) {
    return _filter( data, val => !predi(val) );
}

저 predi 결과 뒤집는것도 모듈화할수있음

_negate(func)

function _negate(func){
    return !func(val);
}

🔹 compact

truthy 찾는거

var _compact = _filter(_identity);

filter 의 predi 를 identity 로 한다

값을 그대로 넣어서 if(값) 이 true 일때만 push

실행 결과

console.log(_compact([1, 2, 0, false, null, {}, "", "a"])); 
// [ 1, 2, {}, 'a' ]

🔸 3. 찾아내기- find, find_index, some, every

🔷find

var _find = _curryr(function(list, predi) {
  var keys = _keys(list);
  for (var i = 0, len = keys.length; i < len; i++) {
    var val = list[keys[i]];
    if (predi(val)) return val;
  }
});

predi를 만족하는 애를 처음 만나면 바로 뱉음 return val;

사용 예) id 나 이름이 일치하는 애 하나를 찾을 때

console.log(_find(users, user=>user.name === "멍"));
// { id: 11, name: '멍', age: 20 }

🔹 find_index

var _find_index = _curryr(function(list, predi) {
  var keys = _keys(list);
  for (var i = 0, len = keys.length; i < len; i++) {
    if (predi(list[keys[i]])) return i;
  }
  return -1;
});

predi를 만족하는 애를 처음 만나면 그 인덱스를 뱉음 return val;

실행 결과

log(_find_index(users, user => user.name === "짹"));    // 2
log(_find_index(users, user => user.name === "윙"));    // -1

조합해서 써보기

_go(users,
    // users 중에서 id 가 11인애 거름
    _find(user => user.id === 11),
    // 걔의 key가 name인가거가져옴
    _get("name"),
    // 출력함
    console.log
)   // 멍

🔹 some

predi 조건을 만족하는 애를 찾는데

그게 하나라도 잇으면 true

function _some(data, predi){
    return _find_index(data, predi) !== -1;
}

find index 가 -1 만 아니면됨

🔹 every

every는 그걸 죄~~다 만족해야지만 true

function every(data, predi) {
    return _find_index(data, _negate(predi)) !== -1;
}

    // return _find_index(data, val => !predi(val)) !== -1;

predi 에 값을 넣었는데 false 가 나오는 애가 있는지 찾기

아무것도 못찾으면 모두 true 임

응용

console.log(_some([null, false, "", 0], _identity));    // false
console.log(_some([null, false, "", 0, 1], _identity)); // true
console.log(_every([1, true, "a"], _identity));         // true

_find_index(data, predi || _identity) != -1;

형태로 바꾸면

predi 가 없을때 _identify 로 작동함

사용예

console.log(
    _some(users, user => user.age < 30)
);  // true


console.log(
    _every(users, user => user.age >= 20)
);  // true

🔸 4. 접기 - reduce, min_by, max_by, group_by, count_by, 조합

🔷reduce

find 와 다른 점은 하나만 찾는게 아니라 모두 탐색함

평가 순서와 관계없이 같은 값을 내뱉도록 프로그래밍하는 것이 중요함

[1, 2, 3] 이렇게 들어오나 [3, 2, 1] 이렇게 들어오나 같은 값을 뱉어야함!

reduce를 단순히 for문을 대체하는 식으로 사용하는게 아니라

🔹 min

_min([1, 2, 3, 4, 10, 5, -4]);    // -4

function _min(data){
    return _reduce(data, function(a,b) {
        return a < b ? a : b;    // 둘 중 작은 값을 뱉는다
    });
}

🔹 max

_max([1, 2, 3, 4, 10, 5, -4]);    // 10

function _max(data){
    return _reduce(data, function(a,b) {
        return a > b ? a : b;    // 둘 중 작은 값을 뱉는다
    });
}

🔹 min_by, max_by

보조함수를 받아서 값을 가공한 이후에 min 값을 구하지만

return값은 원본값임 (원본 배열 또한 변하지 않음)

_min_by([1, 2, 3, 4, 10, 5, -4], Math.abs);

function _min_by(data, iter) {
    return _reduce(data, function (a, b) {
        return iter(a) < iter(b) ? a : b;
    })
}


function _max_by(data, iter) {
    return _reduce(data, function (a, b) {
        return iter(a) > iter(b) ? a : b;
    })
}

🔹 group_by

function _push(obj, key, val) {
    (obj[key] = obj[key] || []).push(val);
    return obj;
}

var _group_by = _curryr(function (data, iter) {
    return _reduce(data, function (grouped, val) {
        return _push(grouped, iter(val), val);
    }, {});
});

🔹 count_by

var _inc = function (count, val) {
    var key = iter(val);
    count[key] ? count[key]++ : count[key] = 1;
    return count
}

var _count_by = _curryr(function (data, iter) {
    return _reduce(data, function (count, val) {
        return _inc(count, iter(val));
    });
});