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

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

 

🌞 함수형 프로그래밍

순수함수

항상 input이 같으면 output도 같다
부수효과가 없다(외부에 영향을 끼치거나 받지 않음 ex)외부변수를 변형,이용하지않는다. console.log 등도 부수효과)

모듈화와 조합
동시성
비동기에 유리

일급함수

함수형 프로그램의 대표적 예제 add_maker

🔸 명령형을 함수형으로 전환하기

user들의 name, age를 가진 객제를 특정 조건으로 분류
응용형 (적용형)프로그래밍 : 함수를 인자를 받아서 원하는 시점에 평가해서 로직을 완성
filter ->응용형(적용형) 응용형 함수
고차함수이기도함 (함수를 인자로 받거나 함수를 리턴)

filter로 리팩토링

_filter(users, predicate)

function _filter(list, predi){
    let new_list = [];
    for(let i=0; list.length; i++){
        if(predi(list[i])){
            new_list.push(list[i]);
        }
    }
    return new_list;
}

사용 예

filter(users, function(user) { return user.age >= 80 });
filter([1,2,3,4], function(num) { return num%2 });
filter([1,2,3,4], function(num) { return !(num%2) });

어떤 값이 배열에 들어있던지 걸러낼 수 있는 재활용성이 높은 함수가 된다.

map 으로 리팩토링

function _map(list, mapper){
    let new_list = [];
    for(let i=0; list.length; i++){
            new_list.push(mapper(list[i]));
    }
    return new_list;
}

이렇게 만들어진 함수들을 사용할 땐

대입문을 사용하는게 아니라 코드를 중첩하는 식으로 사용하는게 좋다.

_map(
    _filter(users, (users) => user.age >= 30),
    (user) => user.name
)

age=30 인 유저를 걸러내고,
그것들의 name 만 mapping 해서 리턴

_each

_filter 와 _map 에도 중복된 부분(컬렉션 길이만큼 loop)이 있다.

그 부분을 _each 로 모듈화 할 수 있음

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

list를 그대로 리턴하는 이유는,
_each 함수는 부수효과(side effect)가 있는 함수이기 때문이다.

_each 함수의 부수효과는 내부의 값에 직접적인 변화를 주는 일(함수를 실행)을 한다는 것이다.

함수형 프로그래밍에서
이와같이 전달한 인자와 같은 값이 나오는경우 부수효과가 있음을 암시할 수 있다.

_map 에 적용

function _map(list, mapper){
    let new_list = [];

    _each(list, (val) => { new_list.push(mapper(val)); });

    return new_list;
}

_filter 에 적용

function _filter(list, predi){
    let new_list = [];

    _each(list, (val) => {
        if(predi(val)) new_list.push(val); 
    })

    return new_list;
}

🔸 다형성

map 이나 filter 같은 함수들은 이미 js 에 있는 애들인데 왜 만들어 쓸까?

걔네는 사실 메서드이다. (객체지향)

메서드는 해당 클래스의 인스턴스에만 사용 할 수 있다.

그 말은 즉슨 Array.prototype.map 메서드는 Array 에만 사용 가능

ex) document.querySelectorAll()은 배열이 아니라 ArrayLike (NodeList) 라서 map 메서드가 사용 불가능

그치만 _map은 쓸수있쥐

_map( document.querySelectorAll("*"), (node) => node.node.Name);

데이터 타입과 관계없이 (=Array가 아니어도) 사용할 수 있고,

함수 자체가 혼자 먼저 존재하기때문에 객체가 혹은 인스턴스가 존재하지 않아도 쓸 수있다.

평가시점이 상대적으로 유연해짐

predi / iter / mapper

함수형 프로그래밍에서 콜백함수보다는 보조함수의 이름을 역할에 따라 다른 이름으로 부른다

Array, ArrayLike, Object와 같은 애들을 다 돌릴 수 있다는건 외부적 다형성에 대한 이야기고

보조함수가 사용하고 뱉는 애들의 데이터타입을 직접 개발자가 지정할 수 있다는건 내부다향성에 대한 이야기이다

🔸 커링

Currying은 여러 개의 인자를 가진 함수를 호출 할 경우,

파라미터의 수보다 적은 수의 파라미터를 인자로 받으면
누락된 파라미터를 인자로 받는 기법을 말한다.

즉 커링은 함수 하나가 n개의 인자를 받는 과정을
n개의 함수로 각각의 인자를 받도록 하는 것이다.

부분적으로 적용된 함수를 체인으로 계속 생성해 결과적으로 값을 처리하도록 하는 것이 그 본질이다.

_curry, _curryr

function _curry(fn){
    return function(a, b) {
        if (arguments.length == 2) return fn(a, b); 
        // 인자를 하나만 받았다면 한번 더 받는 함수를 리턴
        return function(b) {
            return fn(a, b);
        }
    }
}

const add = _curry(function(a, b){
    return a + b;
});

const add10 = add(10);
console.log( add10(5) );    // 15

console.log( add(5)(3) );    // 8

console.log( add(5, 3);    // 8

a 만 받았다면 함수를 뱉는다 => b를 받은 후에야 fn을 실행

a,b 를 한번에 받았으면 바로 fn 실행

파라미터를 다 받을 때 까지 평가시점을 미룬다

_curry 삼항연산자로

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

_curryr

curry right 파라미터를 오른쪽부터

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

const sub = _curryr(function(a,b) {
    return a - b;
});

console.log( sub(10, 5) );    // 10-5 = 5

const sub10 = sub(10);
console.log( sub10(5) );    // 5 -10 = -5

subtraction

_get

function _get(obj, key){
    return obj == null ? undefined : obj[key];
}

console.log(_get(user1, "name"));

특정 key 를 가진 value 추출

_curryr이용

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

const getName = _get("name");

console.log( getName(user1) );
console.log( getName(users[0]) );

위에서 보여줬던 예도 _get(key)로 간결하게 표현가능

_map(
    _filter(users, (users) => user.age >= 30),
    _get("name")
)

🔸 reduce

_reduce([1,2,3], add, 0);

// 아래와 같이 동작한다
add( add( add(0,1), 2 ), 3)

_reduce 구현

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

    return memo;
}

세번째 인자 memo 가 생략 될 때

function _rest(list, num){
    return Array.prototype.slice.call(list, num || 1);
}

Array.prototype.slice 은 Array 만 사용 가능하므로

call(this,..)를 통해 AraryLike 객체도 사용할 수 있게함

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;
}

🔸 파이프라인, _go, _pipe, 화살표 함수

function _pipe(){
    var fns = arguments;
    return function(arg){
        return _reduce(fns, (arg, fn) => fn(arg), arg);
    }
}

var f1 = _pipe(
    function(a) { return a+1 },    // 1+1
    function(a) { return a*2 }    // 2*2
)

console.log( f1(1) );

함수를 인자로 받아서 연속적으로 실행

함수를 리턴하는 함수

memo val

fns[0](arg), fns[1]

fns[1]( fns[0](arg) )

memo val

fns[1]( fns[0](arg) ), fns[2]

fns[2]( fns[1]( fns[0](arg) ) )

reduce는 맨 처음 만난 memo 값한테 차례대로 함수를 하나씩 붙여주는거

_go( 1, 
    function(a) { return a + 1 },
    function(a) { return a * 2 },
    function(a) { return a * a },
    consol.log
   );

첫번째 받은 값을 차례대로 함수들한테 쭉쭉쭉 넣고 마지막에 콘솔로그

function _go(arg){
    var fns = _rest(arguments);
    return _pipe.apply(null, fns)(arg);
}

_filter, _map 한테 _curryr 걸어서 아래와 같이 쓸 수도 있음

_go(users,
    _filter( user => user.age < 30 ),
    _map( _get("age") ),
    console.log
   )

🔸 다형성 높이기, _keys, 에러

_each 의 외부 다형성 높이기

1. _each 에 null 을 넣어도 에러 안나게

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

// 위가 원래 _each

var _length = _get("length");    // _get 함수는 null 을 걸러냄

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

_each(null, console.log); >> 돌릴만한 데이터가 없어서 아무것도 안함

_map(null, v => v); >> 빈배열 리턴

_filter(null, v => v); >> 빈배열 리턴

null값을 흘려보내야 함수를 연속적으로 실행해도 문제가 안되니까

특별한 타입체크를 하지않고

try, catch를 사용하지않고

그냥 주르르륵

2. _keys 만들기 : object 인지 검사해서 null 에러 안나게

Object.keys( Object.keys( obj ) )

obj의 key들만 모아서 배열에 담는 메서드

null을 넣으면 에러남 -> 이걸 고치는거임 에러안나고 빈배열 뱉도록!

function _is_object(obj){
    return typeof obj == 'object' && !!obj;    
    // null 이 들어오면 !!null 즉 false 를 반환
    // 찐 object 가 들어와야지만 true 반환
}

function _keys(obj){
    return _is_object(obj) ? Object.keys(obj) : [];
}

3. _each 외부 다형성 높이기

_each({
    13: "A",
    19: "BB",
    21: "CCC",  
    50: "DDDD",
}, name => console.log(name) )

원래의 _each는 요거 작동안함 >> 배열이 아니니까!!!!

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

// null 값 흘려보내려고

function _each(list, iter){
    var _is_object = (obj) => typeof obj == 'object' && !!obj;
    var keys = _is_object(list) ? Object.keys(list) : [];
    for( var i = 0; i< keys.length; i++){
        iter(list[keys[i]]);
    }
    return list;
}

!!!!!!!!!!!Array/Object 둘다 사용가능하게!!!!!!!!!!!

var obj = { 
    a: "one", 
    b: "two", 
    c: "three" 
};

var arr = ["ㄱ","ㄴ","ㄷ"]

 Object.keys(obj) ----> ["a", "b", "c"]
 Object.keys(arr) ----> ["0", "1", "2"]


// array, object 둘다 동작하도록 & null 값 흘려보내기X
function _each(list, iter){
    var keys = Object.keys(list);
    for( var i = 0; i< keys.length; i++){
        iter(list[keys[i]]);
    }
    return list;
}

와우.. 우아우앙 아름답다!!!!!!!