자바스크립트로 알아보는 함수형 프로그래밍

자바스크립트로 알아보는 함수형 프로그래밍

(69개의 수강평)

5270명의 수강생

무료

유인동
평생
초급
수료증
22개 수업, 총 6시간 32분
madforre 프로필

인자명인 predicate에 대해서 질문드립니다. madforre 1일 전

안녕하세요 강사님 제가 헷갈리는 부분이 있는데요. 강의중에 함수의 인자 명으로 말씀하신 predicate 의 뜻에 대해 찾아봤는데 인자로 받은 함수가 불린 값을 리턴하는 것이라고 나오는거 같아서요.. 역할을 위임한다는 면에서 인자 이름이 delegate가 더 적당한게 아닌가 해서 여쭤봅니다.

3
송승윤 프로필

일급함수 - 함수에 인자를 함수로 넣을 때... 송승윤 2일 전

함수에 인자를 함수로 넣을 때 

var example1 = (function(){

return {

  }

})();

이 것도 함수에 인자를 함수로 넣은 것인가요??

 

 

1
Eun Shick Bae 프로필

혹시 글로 정리해서 공개로 올려놓아도 괜찮을까요? Eun Shick Bae 6일 전

좋은 강의 감사드립니다~!!

혹시 실례가 안된다면 출처와 함께 블로그에 공개글로 정리해서 올려두어도 괜찮을까요?

3
이이도경 프로필

grep function 만들기 오류 이이도경 7일 전

제가 jquery에 grep함수를 최대한 함수형 프로그래밍스럽게 바꾸고 있습니다.

제가 지금까지 시도한 결과는 아래와 같은데 이상하게 

```

my_grep([0,1,2,3], function(k){return k<3}, true)

```

이렇게 실행해보면   

```
evalmachine.<anonymous>:16 matches.push( elems[ p ] ); ^ TypeError: matches.push is not a function
```

이런 오류를 뱉어내는데, 이유를 도무지 모르겠습니다. 제 코드는 아래와 같습니다

```
function my_grep(elems, callback, invert) { var callbackInverse, matches = [], i = 0, length = elems.length, callbackExpect = !invert; let fun = matches => { let r = R.range(0,length); let modify = R.curry( p=>{ let callbackInverse = !callback( elems[ p ], p ); if ( callbackInverse !== callbackExpect ) { matches.push( elems[ p ] ); } } ); R.map(modify,r); return matches; }; fun(length); }
```

원래 동작의 의도는 invert가 true면 callback인자의 조건이 false인 배열을 elems중에서 걸러내서 리턴하는 것 같습니다.

1
이이도경 프로필

jquery 함수들을 완전한 함수형 프로그래밍으로 바꾸려고 합니다. 이이도경 8일 전

jquery 함수들을 완전한 함수형 프로그래밍으로 바꾸려고 합니다.

for loop같은 것들도 모두 함수로 고쳐보고 싶은데 제가 바꾸려는 것이   

 

  each: function( obj, callback ) {

            var length, i = 0;

 

            if ( isArrayLike( obj ) ) {

                length = obj.length;

                for ( ; i < length; i++ ) {

                    if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {

                        break;

                    }

                }

            } else {

                for ( i in obj ) {

                    if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {

                        break;

                    }

                }

            }

 

            return obj;

        },

이 함수인데 제가 생각하기엔 

 

  each: function( obj, callback ){

length = obj.length;

let fisrt_if = R.curry( 

    i=> {

        R.range(0,length).some(function(i){

                    if ( callback.call( obj[ i ], i, obj[ i ] ) === false )

                        return i;

                    }

                );

    });

 

let first_else = R.curry(

    i=>{

          R.keys(obj).some(function(i){

                    if ( callback.call( obj[ i ], i, obj[ i ] ) === false )

                        return i;

                        }

                );

    }

);

 

let arraylike = obj =>{

    if ( isArrayLike( obj ) ) 

        return true;

    else

        return false;

}

let main = 

    R.ifElse(

    x=> arrayLike(obj),

        first_if,

        first_else

    )

}

 

밑에 함수가 그럴싸해보이는데 어디가 틀린건지 알 수 있을까요 ?ㅠㅠ

3
송이준 프로필

_curry 에서 질문 또 있어요 송이준 1달 전

function _curry(fn){

return function(a, b){

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

}

}

var add = _curry(function (a, b){

return a + b;

});

var add10 = add(10);

console.log(add10); ---> function(b){ return fn(a,b); }

console.log(add10(5)); ---> 15

제가 이해가 안가는 부분은 _curry 함수에서 전달받는 매개변수가 두개가 아닌 경우에

항상 function(b){ return fn(a,b); } 가 실행되니까, a + b 라는 최종적으로 실행하게 될 연산에 대해 계속해서 b 라는 변수에만 값을 할당해주게 되는데, 어떻게 10 + 5라는 연산이 되는지 모르겠어요.

add(10)의 최종 결과는 a + 10이 되고 , 여기서 add(10)을 add10 이라는 변수에 담고 다시

add10(5)를 실행하게 되면....어떻게 되는건지 상상이 안되요.

3
송이준 프로필

_curry 에서 질문있습니다. 송이준 1달 전

``` function _curry(fn){

return function(a, b){

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

}

}

var add = _curry(function (a, b){

return a + b;

});

var add10 = add(10);

여기서 위의 _curry 함수에서요..삼항 연산자 뒤에 부분인

function(b){ return fn(a, b); }; 이 부분에서,

function(a){ return fn(a, b); }; 이렇게 하면 결과가 이상하게 나올까요...?

전자의 경우 최종적인 결과가 a + 10 이 되는것이고,

후자의 경우 최종적인 결과가 10 + b 가 되는것인데... 둘다 매개변수 하나는 비어있는 값인 것 아닌가요?

1
송이준 프로필

=== 대신 == 를 쓰는 이유 . (함수형 자바스크립트) 송이준 2달 전

``` // 2. _get 만들어 좀 더 간단하게 하기

function _get(obj, key){

return obj == null ? undefined : obj[key];

}

var user1 = users[0];

console.log(user1.name);

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

// console.log(users[10].name); <-- 에러가 난다. 없는 값이므로.

console.log(_get(users[10], 'name'));

위에서 return obj === null ? 이 아니라 obj == null 이라고 쓰는 이유가 있으신거 같은데,

전 자바스크립트 배울때 항상 === 이렇게 세개를 사용하라고 배웠거든요.

고급 수준 이상이 되면 == 와 ===의 차이를 이용해서 코딩을 하기도 한다고 들었는데..

위의 _get 함수를 === 세개짜리를 사용해서 동일하게 작동하도록 하려면 어떻게 코딩 해야할까요?

1
이이도경 프로필

filter 함수 만드실때 변수에 할당을 하셨는데 함수형 프로그래밍은 할당이라는 개념이 없지 않나요? 이이도경 2달 전

filter 함수 만드실때 변수에 할당을 하셨는데 함수형 프로그래밍은 할당이라는 개념이 없지 않나요?

for(var i =0 ....)이런식으로 쓰신 부분에서요

1
이이도경 프로필

클로저 내용을 공부하다가 궁금해서 만든코드인데 이렇게는 못쓰나요? 이이도경 2달 전

'''

function add7(a){

return function(b){

return function(c){

return a+b+c;

}

}

}

'''

강의에는 내부함수가 하나만 있던데 이렇게 두번 쓰면 어떻게 하나요?

내부함수가 하나인 경우 그러니까

'''

'''

function add_maker(a){

return function(b){

return a+b;

}

}

'''

이런 경우엔

'''

var k = add_maker(3);

console.log(k(4));

'''

이렇게 해서 3+4 결과값을 출력하게 하는데 3개일때는 어떻게 해봐도 안되더군요 이런경우는 어떻게 해야하나요?

2
송이준 프로필

함수형 자바스크립트 프로그래밍 filter 질문있어요 !!!!!!!! 송이준 2달 전

자바스크립트 배우고 있는 초보입니다

함수형 자바스크립트 프로그래밍
섹션2 에서 _filter 함수를 만드는 과정인데요.

function _filter(list,predi){

var new_list = [];

for(var i = 0; i < list.length; i++){

if(function(user){return user.age >= 30;}(list[i])){

new_list.push(list[i]);

}

}

return new_list;

}

위 코드에서

function(user){return user.age >= 30;}(list[i])

이 부분이 이해가 안가네요.

이 함수의 작동방식이..

list[i] 가 매개변수 user 로 넘겨지고 곧바로 함수가 실행되어서 list[i].age 를

리턴하는것 맞나요?

IIFE가 아닌 다른 방식의 곧바로 실행되는 함수 형태인가요?

제가 알고있는 IIFE 함수 형태를 사용하면,
if( ( function( list[i] ) {return list[i].age >= 30 ; } )( ) )
이렇게 코드가 작성되야 하는거 아닌가 해서요...

1
ryu sin 프로필

(grouped[key] = grouped[key] || []).push(val) 부분에서 ()는 뭔가요? ryu sin 3달 전

안녕하세요. 정말 좋은 강의 잘 듣고 있습니다. 너무 재미있습니다 ㅎㅎ;

내용은 이해가 가지만, 처음 보는 형식이라서 질문 올립니다.

(grouped[key] = grouped[key] || []).push(val)

이 부분인데요, grouped[key] 등이 괄호로 쌓여 있습니다.

grouped[key]에 해당하는 밸류가 있으면 넣고, 아니면 빈 리스트를 출력하라는 것은 알겠는데

if 문을 사용한 것도 아니고, var를 이용해서 옵젝트를 저장해서 업데이트를 한것도 아닌데

한번에 저렇게 괄호를 써서 계산을 해 버려도 되는지요.

저렇게 표현하는 방식의 명칭이 따로 있는 건가요?
아니면 일종의 grouping인가요?

var _group_by = _curryr(function(data, iter){ <p>    return _reduce(data, function(grouped, val){</p><p>    var key = function(){ return iter(val)};</p><p>            (grouped[key] = grouped[key] || []).push(val)</p><p>            return grouped;</p><p>        }, {}); </p><p>  })</p>

1
ryu sin 프로필

curryr 부분이 이해가 잘 안 갑니다. ryu sin 3달 전

안녕하세요. 좋은 강의 잘 듣고 있습니다.

강의에 따르면, curryr은 fn(a, b) 부분의 인자 순서를 fn(b, a)로 바꿔서 실행 값을 변화시킨다고 설명해 주셨습니다. 실제로도 결과가 그렇게 나옵니다.

그러나 저로서는 아무리 봐도 이해가 안가는게, 결국 인자의 순서와 별게로 값을 만드는 것은 함수의 실행부, 다시 말해 {} 이 중괄호 안의 부분이 결정하는데, 인자의 순서와 별계로 괄호 안의 실행부는

return a-b 인데 어째서 다른 결과를 가져오는지 이해가 가지를 않습니다 ㅜ.ㅜ

function _curryr(fn) {

return function(a, b) { //인자가 a, b 라고 해도 다 받아야 하는 것은 아니다. a 부터 순서대로 한 개씩만 받아도 된다.

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

}

}

var sub = _curryr(function(a, b){

return a - b;

})

console.log(sub(10, 5));

var sub10 = sub(10);

console.log(sub10(5));

2
ryu sin 프로필

_each의 콜백 부분의 처음 'val'은 어디서 오는 걸까요? ryu sin 3달 전

명강의 잘 듣고 있습니다! 계속 반복해서 들어도 이해가 안가는 부분 있어서 질문합니다. 제 머리로는 한계네요 :(

function _reduce(list, iter, memo) {

if (arguments.length == 2) {

memo = list[0];

list = _rest(list);

}

_each(list, function(val) { // 여기서 val 부분

console.log(val);

memo = iter(memo, val);

});

return memo;

}

_each의 콜백에서 첫번째 인자인 val은 어디서 오는 걸까요?

저게 'list' 안에 있는 각각의 요소인것은 알겠습니다. 그런데 val을 넣어주기 위해서는 우선

_each 펑션이 한번 돌아서 첫번째 인자를 저기에 쏴 줘야 하는데, 처음에 리스트를 돌기 전에 콜백의 'val' 부분에 인자를 넣어주는 녀석은 누구인지 궁금합니다.

혹시 콜백으로 들어온 함수는 바로 실행되는게 아니라,

  1. _each(list, callback(a)) 에서, list를 순회 먼저 하고 각각의 인자들에 callback을 나중에 대입하거나,

  2. list를 한번 돌고, 콜백에 인자 대입, 그다은 한버더 돌고, 그다음 콜백에 인자 한번 더 대입.

    이런 식인가요?

이런 강의 들어서 행운이라고 생각합니다. : )

2
임다혜 프로필

max_by와 min_by에 대한 질문입니다. 임다혜 5달 전

안녕하세요 너무 즐겁게 강의를 듣고 있는 학생입니다.

만약에 데이터가 [20, -20]으로 들어가게 된다면

_max_by를 사용해도 -20이 출력되던데 왜 20이 아닌 -20이 출력이 되는지 궁금합니다.

아니면 _min_by나 _max_by를 사용하기 위해서는 데이터의 절대값이 중복되는지를 먼저 검사해야 하는건가요..?

2