함수형 프로그래밍과 JavaScript ES6+

함수형 프로그래밍과 JavaScript ES6+

(25개의 수강평)

799명의 수강생
55,000원
지식공유자 · 유인동
71회 수업 · 총 8시간 7분 수업
평생 무제한 시청
수료증 발급 강좌
수강 난이도 '초급, 중급'
J C 프로필

왜 recur함수를 즉시 실행시켜야 하나요? J C 15일 전

recur 함수 안에서 재귀를 이미 부르고 있는데 

recur 맨 뒤 () 가 필요한 정확한 이유가 무엇일까요? 

const take = curry((l, iter) => {
  let res = [];
  iter = iter[Symbol.iterator]();
  return function recur () {
    let cur;
    while (!(cur = iter.next()).done) {
      const a = cur.value;
      if (a instanceof Promise) {
        return a
        .then(a => (res.push(a), res).length == l ? res : recur())
        .catch(e => e == nop ? recur() : Promise.reject(e));
      }
      res.push(a);
      if (res.length == l) return res;
    }
    return res;
  }();
});

1
J C 프로필

L.deepFlat function J C 17일 전

L.deepFlat function expression 에서  *f 가 제네레이터 함수이름도 아니고 어떻게 작동하는지 잘 이해가 안갑니다.

1
Kim jae-eok 프로필

map , filter , reduce 등의 함수를 정의할때 매개변수 순서가 이전하고 상이한것 같습니다. Kim jae-eok 19일 전

이전 강좌였던 "자바스크립트로 알아보는 함수형 프로그래밍" 에서 사용되는 라이브러리와 underscode , lodash 에서는

f( 리스트 , 함수 ) 이렇게 정의했었는데 ,

이번강의에서는 f(함수 , 리스트) 이렇게 정의하고 있어서

어떤의미로 순서가 바뀌었는지 알고 싶습니다.

감사합니다.

2
J C 프로필

Devtool 질문 J C 23일 전

강의에서 쓰시는 code tool들이 궁금합니다.

콘솔 창이 바로 옆에 있는 것도 편리해 보이네요!

더불어 console.log 대신 log 만 써도 되는건

확장 프로그램 때문인가요? 

1
gogosssing95 프로필

코드 질문드립니다. gogosssing95 1달 전

const join = curry((sep = ','iter=>
    reduce((ab=> `${a}${sep}${b}`iter));

sep = ',' 이부분에 왜 =',' 가 작성되는것인가요?

저 코드가 어떻게 동작하는지 이해가 잘 가지않습니다.

=','가 없을때도 똑같이 동작하는데 그렇다면 없어도 되는것일까요? 제가 코딩공부를 시작한지 얼마되지않아서 이것저것 질문을 많이 남기네요 ㅎㅎ.. 

1
gogosssing95 프로필

products가 사라지는 부분 gogosssing95 1달 전

다른분이 질문한것에서 저도 의문이 생겼는데 답변을 봐도 이해가 잘되지않습니다. 

curry함수에 의해서

products =>filter(p=>p.price <20000, products)가

products ⇒ filter(p⇒p.price <2000)(products)로 변화되고

filter(p⇒p.price <2000)  이렇게 축약되었을때 어떻게 같게 작동하는지 모르겠습니다.

a => f(a) 라는 함수는 그냥 f와 하는일이 같다는 말이 이해가 잘안됩니다. 조금만 더 풀어서 설명부탁드립니다.

1
gogosssing95 프로필

5분 34초부분 질문입니다. gogosssing95 1달 전

마지막 부분에서 log(reduce(add, [1,2,3,4,5])) 부분에서 초기값 0을 없애준것인데

어떻게해서 위쪽에 조건문을 실행시킬때 if(!iter) 와같이

이터러블이 없을때를 조건으로 하는것인가요?

초기값을 없앤것이면 !acc로해야되는게 맞는것같은데 그렇게하면 또 누적값을 못하구고... 

1
Daniel Lee 프로필

리스트가아닌 오브젝트 데이터는 어떻게 처리하여야 하나요? Daniel Lee 1달 전

안녕하세요.

수업에서 진행한 대부분의 예제들처럼 리스트를 파이프라인을 통과하며 필요한 작업을 수행하는것들 이외에 일반 객체(ex. 유저 프로필)를 파이프라인을 통과시키며 필요한 로직을 수행하려 할 시 함수형프로그래밍에서 어떻게 처리하는것이 일반적인가요?

좋은수업 감사합니다.

1
류명한 프로필

Javascript array method에 대한 질문입니다. 류명한 1달 전

수업을 통해서 자바스크립트 함수형 프로그래밍을 배우고 나서 Array를 다룰 일이 생길 경우에는 거의 항상 함수형으로 map, forEach, filter 등을 사용하고 있는데요. D3에서 데이터 처리를 하는 부분 코드를 작성하다가 제가 이해한 것을 바탕으로 예상한 것과 다르게 작동하는 부분이 있어서 여쭤보려고 합니다. 

dataSet = await d3.json("./USAir97.json").then(data => {
    let columnsWithNumbers = ["id", "latitude", "longitude", "x", "y"];

    data.nodes.map(row => {
      // external effect happens.. why?
      columnsWithNumbers.forEach(c => {
        row[c] = +row[c];
      });
      return row;
    });
    return data;
  });

불러오는 json파일의 경우는 { "nodes": [ { id: 1, "latitude": "123123", "longitude": "123123"}, ...], "links": [ ...]}

이런 형식이고요. 그런데 여기에서 return row; 부분을 생략해도 dataSet에 저장되는 데이터가 string으로 되어 있는 columnsWithNumbers에 해당하는 값들이 숫자로 바뀌어있더라고요. 함수형 프로그래밍에 대해서 배운 대로라면 map 함수에서 row를 가지고 와서 row에 어떤 일을 하더라도 그 row를 리턴해주지 않으면 row의 갯수만큼의 undefined가 들어있는 Array가 리턴이 되어야할 것 같은데 이 경우는 그렇지 않아서 이상하게 느껴집니다. 

게다가 또 한 가지 이상한 점은 map 함수는 data.nodes에 대해서 호출하였는데 이것을 return하는 것이 아니라 data를 return 했는데 data.nodes에 대해서 호출한 map함수의 연산 결과가 data에 반영이 되어 있는 것입니다. data.nodes 함수를 리턴하고 싶어도 d3.json 함수의 특성인 건지 다른 걸 리턴하면 값이 깨지는 게 생기더라고요. 작동이 안 되는 것보다는 잘 되고 있는 건 다행이겠습니다만 이런 식으로 제가 생각했던 것과는 다른 식으로 작동하는 것에 대해서 어떻게 이해해야할까요? 

그리고 함수형 프로그래밍 코드를 짜려고 하다보니 for-loop은 코드에서 전혀 사용하지 않게 되고, 그러다보니 왠지 괜히 forEach도 쓰기가 꺼려지는데 좋은 방향인 것인지 궁금합니다. 위의 코드처럼 전체 데이터에서 일부분에 해당하는 키들을 가져와서 그것에 대해서만 부분적으로 row에서 처리를 해줄 때 위처럼 Array에 해당하는 키값들을 저장하고 이에 대해서 forEach를 호출하는 식으로 많이 처리했는데요. 혹시 함수형 프로그래밍의 관점에서 더 깔끔하게 짤 수 있는 방법이 있을까요? 

질문이 많은 것 같은데, 마지막으로 혹시 3편 강의는 언제쯤 올라오는지도 궁금합니다.

감사합니다.

1
Einere 프로필

async/await를 이용할 수는 없나요? Einere 2달 전

L.reduce를 async함수로 리팩토링하려고 하고 있습니다.

다음은 제가 구현한 코드입니다.

L.filter = L.curry(function* (f, iterable) {
    // for (const e of iterable) if (f(e)) yield e;
    for (const e of iterable) {
        const result = L.branch(e, f);
        if (result instanceof Promise) yield result.then((val) => val ? e : Promise.reject(L.nop));
        else if (result) yield e;
    }
});

L.reduce = L.curry(async (f, acc, iter) => {
    if (!iter) {
        iter = acc[Symbol.iterator]();
        acc = await iter.next().value;
    }

    for (const e of iter) {
        try {
            acc = await f(acc, await e);
        } catch (err) {
            if (err === L.nop) acc = await f(acc, e);
            if (err !== L.nop) return Promise.reject(err);
        }
    }

    return acc;
}) 

위 코드를 이용해 영상의 예제를 다음과 같이 실행하면 결과가 다음과 같이 나옵니다.

const L = require("./myUtils.js");

L.go(
    [Promise.resolve(1), Promise.resolve(2), Promise.resolve(3), Promise.resolve(4), Promise.resolve(5), Promise.resolve(6)],
    L.filter(val => !(val % 2)),
    L.reduce((acc, val) => acc + val),
    console.log
).catch(console.log);

// 출력 : 2[object Promise]4[object Promise]6

  어떻게 수정하면 좋을까요..?

 

 

1
pulp fiction 프로필

Go Function은 항상 구현하여 사용해야하는 함수인가요? pulp fiction 3달 전

go Function은 Iterator 객체나 특정 객체에 Prototype에 전혀 들어가지 않고 항상 따로 구현해야하는 함수인가요?

1
Jade Stern 프로필

파이어폭스에서는 L.range가 더 느리게 나오는데 혹시 그 이유가 있을까요? Jade Stern 3달 전

왼쪽이 파이어폭스, 오른쪽이 크롬입니다.

 

 

 

1
oscar 프로필

3개 이상의 인자가 있는 함수의 경우 처리 oscar 3달 전

지금 구현한 curry 는 3개 이상의 인자가 있을 때, 첫 번째 인자만 고정하고, 나머지 인자를 한 번에 넘겨서 호출해야만 처리가 가능한데요. 이게 의도하신건가요? 원래 커링은 여러 개의 인자가 있을 때, 변수를 하나 씩 고정하는 함수열로 만드는 거라고 알고 있어서요. 

예를 들어, const test = curry((a,b,c) => a+b+c) 에서 console.log(test(1)(2)) 하면 NaN 이 나옵니다. 

1
Woo  Sangin 프로필

안녕하세요 Woo Sangin 4달 전

질문이 있는데..

파이참 쓰시는거 같은데 혹시 파이참에서 컨솔창 어떻게 여는지 알려주실수 있을까요?

감사합니다..

1
후리덤 프로필

a instanceof Promise 후리덤 4달 전

fxjs 와 mql 를 애용하는 개발자입니다.

 

최근 사용한 어떤 모듈에서 parameter 수에 따라 비동기 처리에 대한 응답을

callback 패턴과 Promise 패턴 모두 지원하는 함수가 있었습니다.

 

go 함수를 통해 값을 다루어왔기 때문에 당연히 Promise 패턴을 생각하고 코딩을 했습니다.

그런데 예상과는 다르게 동작했고, 무엇보다 go 함수 결과에 catch 메소드 자체가 존재하지 않았습니다.

 

알고보니 해당 모듈의 함수에서 bluebird Promise 를 사용하고 있어서

fxjs 내부의 a instanceof Promise 부분에 걸려들지 않았던 것입니다.

그래서 메소드 전체를 new Promise 로 감싸고 callback 함수에서 resolve/reject 처리하여 진행하였습니다.

 

그런데 문득, Promise 값인지 아닌지를 판단하는 a instanceof Promise 부분까지도,

함수로 받게끔 할 수 있다면 어떨까 하는 생각이 들었습니다.

is_promise = a => a instanceof Promise

대신 is_promise = a => a instanceof Promise || a instanceof blue_bird_Promise

 

물론 함수를 사용할 때마다 해당 함수를 넘기는 것이 아니라,

fxjs 내부에 is_promise = a => instanceof Promise 부분은 이미 정의되어 있고,

fxjs 초기 설정시 is_promise 함수를 다른 함수로 대체하여 사용할 수 있도록 허용하는 것을 의미합니다.

1
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강좌들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스