55,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결함수형 프로그래밍과 JavaScript ES6+
pipe함수
안녕하세요. f(0) 이게 초기값으로 할당할 수 있는 이유를 생각해봤는데요이해한대로 말해보자면 pipe함수가 리턴하는 익명함수를 변수 f가 할당받고 이제 pipe함수가 리턴한 익명함수는 pipe함수의 렉시컬 스코프를 참조할 수 있고 중간다리 역할을 합니다.즉 익명함수를 할당받은 f는 클로저입니다. 그럼 f(0) => go (a: 0 , ...fs) 이런식으로 됩니다f는 상위 스코프를 기억할 수 있는 클로저이니까(익명함수를 f로 바꿔 표현한것입니다. 정확히 클로저는 익명함수입니다.)스코프 체인을통해 ...fs를 참조할 수 있습니다....가 제가 이해한건데 맞을까요??
- 미해결함수형 프로그래밍과 JavaScript ES6+
Identity 함수
ES5, ES6 강의 모두 들었는데요.. Identity 함수에 대한 설명을 들었던게 기억이 나는데 이 함수에 대한 강의가 어디있는지 기억이 안납니다. 어떤강의 어떤 주제에서 Identity 함수에 대한 설명을 하셨나요?
- 미해결함수형 프로그래밍과 JavaScript ES6+
함수형 프로그래밍이란
함수형 프로그래밍이 프로그래밍적 함수를 수학적 함수의 개념을 차용해 코딩하는 방법같다는 생각이 드는데, 맞을까요? 그렇게 차용하기 위해 순수함수, 참조 투명성 등이 필요한 거고!
- 미해결함수형 프로그래밍과 JavaScript ES6+
reduce 예제 코드 제안!
const reduce = (f, iter, acc) => { if (acc === undefined) { iter = iter[Symbol.iterator]() acc = iter.next().value } for (const v of iter) { acc = f(acc, v) } return acc }console.log(reduce(add, [1, 2, 3, 4, 5], 0)) console.log(reduce(add, [1, 2, 3, 4, 5]))강의 언제나 즐겁게 듣고 있습니다!reduce 파트 듣다가 js reduce에 가까운 구현은 이쪽이 아닐까 싶습니다!초기 값이 존재하지 않을 때, 배열의 첫번째 요소를 사용하는 사례를 더 잘 표현한 것 같습니다.
- 미해결함수형 프로그래밍과 JavaScript ES6+
fxts를 배워보려고 합니다.
안녕하세요. 이번에 회사에서 함수형 프로그래밍을 해보려고 하는데, fxts를 사용하려고 합니다.이 강의는 fxjs를 다루고 있는데, fxts를 사용하려 할때도 도움이 될까요?감사합니다.
- 미해결함수형 프로그래밍과 JavaScript ES6+
flatMap 관련 질문드립니다~
안녕하세요 선생님~~지금까지 모르는거 있어도 그냥 계속 반복해서 보고, log 찍어보면서 해결했는데flatMap 부분에서 도저히 이해 안 가는 부분이 있어서 이렇게 질문드립니다 ㅠㅠ.. 우선 왜 map을 먼저하는지 모르겠습니다..중첩배열을 먼저 평탄화 시켜주고 그 다음 map을 했을때에는 예상치 못한 결과나 에러가 발생하지 않았는데요.map을 먼저 하게 되면 중첩 배열을 받아서 전달된 함수를 실행하는 부분에서 계속 결과값이 이상해 집니다... ㅠㅠ사실 당연한 결과인데 map이든 L.map이든 [1,2,[3,4],[5]] 이런 중첩배열을 받아서 순회를 하고a => a+10 이런 함수를 실행하면 당연히 결과 값이 이상해지는데 선생님 코드에서는 어떻게 제대로 작동 되는 건지 궁금합니다...;;만약 L.flatMap(a => a, [1, 2, [3, 4], [5]]) 이런식으로 하면 그냥 a를 반환만 하니까 중첩배열이 반환 되고 L.flatten 에서 평탄화 되니까 별문제 없는데 a =>a +10 이런식의 함수를 넘겨주면 결과값이 이상해집니다...ㅠ 뭐가 문제 인지 힌트 부탁드립니다~ const curry = fn => (a, ...args) => args.length ? fn(a, ...args) : (...args) => fn(a, ...args); const reduce = (fn, iter, acc) => { if (!acc) { iter = iter[Symbol.iterator](); acc = iter.next().value; } for (const a of iter) { acc = fn(acc, a); } return acc; } const L = {}; L.map = curry(function* (fn, iter) { for (const a of iter) { yield fn(a) } }); const isIterable = (a) => a && a[Symbol.iterator] L.flatten = function* (iter) { for (const a of iter) { if (isIterable(a)) { yield* a } else yield a } } const map = curry((fn, iter) => { const res = []; for (const a of iter) res.push(fn(a)) return res; }) const take = curry((limit, iter) => { const res = []; for (const a of iter) { res.push(a) if (res.length === limit) return res; } return res; }); const go = (...args) => reduce((a, fn) => fn(a), args); const pipe = (f, ...fn) => (...args) => go(f(...args), ...fn); // L.flatMap L.flatMap = curry(pipe( L.map, L.flatten )); const iter = L.flatMap(a => a + 10, [1, 2, [3, 4], [5]]) console.log(...iter) // 결과값 11 12 3 , 4 1 0 5 1 0
- 미해결함수형 프로그래밍과 JavaScript ES6+
다용성이 높은 L.flatMap
안녕하세요! 정말 좋은 강의를 남겨주셔서 감사합니다!현재 강의에서 소개해주신 L.flatMap은 제가 생각하기에 L.map을 바탕으로 돌아가기 때문에 주어진 배열에 이터러블이 아닌 값이 들어가있으면 사용할 수 없어서 다용성을 높이고자 L.map에서 여러가지 삽질들을 해보면서 다용성을 높이려고 했지만 제 결과물들은 살짝아쉽더라구요!! 혹시 const it = [[1, 2], 3, 4, [5, 6, 7]] 이러한 배열에서도 사용할 수 있는 다용성 높은 L.flatMap을 어떤식으로 구현해야할지 궁금하여 질문드립니다!!
- 미해결함수형 프로그래밍과 JavaScript ES6+
변수에 재 할당 금지~
함수형 프로그램밍 기법을 배우고자 이 강의를 듣고 있습니다. 제가 사용하는 프로그램은 언어적인 차원에서 프로그래밍 언어가 아니고 함수들 만으로 데이터를 처리합니다.최근 들어 이 함수에서 변수를 지원하는 LET, VAR를 사용하는데 실제 값을 재 할당하는 변수가 아니라 재 할당이 금지된 상수 차원에서 변수입니다.이 강의를 들으면서 느낀 건데 이렇게 변수를 재 할당 금지 시킨것이 순수 함수를 구현하기 위함일까요?익명 함수로 lambda를 사용하는데 변수에 재할당이 금지되어서 클로저를 제대로 사용 못하는것 같습니다.변수에 재 할당이 금지되면 클로저에서 함수를 호출할때 마다 1씩 증가 시키는 클로저를 사용하지 못하는 건가요?
- 미해결함수형 프로그래밍과 JavaScript ES6+
DevTools라고 옆에 결과 확인하는거 어떻게 하나요?
이전 무료 강좌에선 그냥 크롬창에서 결과 확인했는데...영상에서 보니 DevTools라고 나오는데 확장에서 Redux DevTools를 말하는 건가요? 이거 검색해봐도 초보자인 저는 어떻게 사용하는지 읽어봐도 전혀 모르겠습니다.
- 해결됨함수형 프로그래밍과 JavaScript ES6+
소요시간에 관해서 질문드립니다
console.time("지연평가"); go( users, L.map((u) => u.family), L.flatten, L.filter((u) => u.age < 20), L.map((u) => u.name), take(3), log ); console.timeEnd("지연평가"); console.time("프로토타입"); const res = users .map((e) => e.family) .flat() .filter((e) => e.age < 20) .map((e) => e.name); const result = []; for (let i = 0; i < 3; i++) { result.push(res[i]); } log(result); console.timeEnd("프로토타입");같은 동작을 하는 코드를 이터러블 / js 프로토타입 으로 코드를 작성했을 때js 기본 프로토타입을 사용한 코드가 소요시간이 조금 더 적게 걸리던데혹시 제가 놓치고 있는 부분이 있거나 효율부분에서는 프로토타입 사용하는게 더 나은건가요?
- 해결됨함수형 프로그래밍과 JavaScript ES6+
join에 대한 내용이 궁금증이 해결되지 않아서 질문드립니다!
const join = curry((seperator = ",", iter) => reduce((a, b) => `${a}${seperator}${b}`, iter) ); function* a(){ yield 10; yield 11; yield 12; yield 13; }강의 중 작성하신 join 함수는 이렇게 돼있는데log(join(a())) 이렇게 했을 경우 [function (anonymous)] 가 출력이 됩니다array.prototype.join() 처럼 파라미터를 주지 않았을 때 기본으로 ',' 가 되게 하려면 다른 방식으로 join 함수를 선언해야하나요?혼자 생각해봤을 땐 log(join(a())()); 이렇게 했을 경우와 log(join(undefined,a()))) 이렇게 했을 경우 default parameter인 쉼표로 join이 됐는데 log(join(a())) 로 했을 때에도 기본 파라미터를 활용할 수 있는 방법이 궁금합니다..!
- 미해결함수형 프로그래밍과 JavaScript ES6+
reduce에 L.range를 사용할 때
안녕하세요.섹션6 - range와 느긋한 L.range 마지막 부분에서 range같은 경우엔 만든 어레이를 다시 이터레이터로 만들고 순회하는데, L.range는 실행됐을때 만들어진 이터레이터 (자기자신)이 있으므로 이터레이터를 만드는 과정을 생략한다고 하셨는데요.reduce 코드의 어떤 부분이 생략되는 건가요?
- 미해결함수형 프로그래밍과 JavaScript ES6+
[이해내용 공유] Lazy 에서 C.reduce가 병렬 효과를 내는 이유
주요 전제:프로미스는 객체가 생성됨과 동시에 콜백을 실행 시킵니다.then()으로 생성된 프로미스 객체는 로깅하던(자신이 지켜보는) 프로미스가 해결되면 microtaskQueue에 담깁니다. 예시go([1,2], L.map(a=>delay1000(a*a), L.map(a=>delay1000(a*a), C.reduce(add), log)위와 같은 코드가 있다고 할 때, 각 함수층에서 생성하는 프로미스를 다음과 같이 표현해보았습니다.*화살표는 각 프로미스가 로깅하는 자신의 앞의 프로미스를 가리킵니다. ( p1 이 resolve 되면 p2 실행 )*각 함수와 같은 행에 있는 값은 해당 함수가 생성한 값을 가리킵니다. C.reduce가 전개연산자를 활용하여 제너레이터의 모든 값을 받아올 때, 제너레이터는 순차적으로 값을 내뱉을 것입니다.C.map은 바로 위의 L.map 으로부터 값을 받아오려 합니다. 그러나 2층의 L.map도 제너레이터를 받아서 돌아가는 제너레이터이므로, 바로 자신의 위인 3층의 L.map으로부터 값을 받아오려합니다.3층의 Lmap은 자신이 받아오는 제너레이터인 [1,2]에서 1을 받아오고, 함수를 실행시킵니다. 함수는 프로미스를 생성하므로, 프로미스 p1의 콜백이 백그라운드에서 즉시 실행됩니다. Lmap은 자신이 아래층에 생성한 프로미스 객체 p1을 2층의 Lmap에게 내려줍니다.3층에서 내려준 프로미스 객체를 받은 2층 Lmap은 프로미스가 resolve 되면 자신의 함수를 실행 시킬 것이라는 새로운 프로미스 p2를 생성하여 1층의 C.reduce로 내려줍니다.C.reduce는 전개연산자로 값을 배열에 다 모을 때까지 프로미스가 들어오든말든 개의치 않습니다. 일단 2층에서 받은 프로미스객체를 배열에 담아둡니다.C.reduce는 첫번째 값을 받았으니, 다시 2층에게 두번째 값을 요청합니다. 아까와 같은 방식으로 맨 위층에서부터 2를 받고 p4를 내려주고, p4를 받고 p5를 내려주는 형태로 일단은 C.reduce에는 [p2, p5]가 담길 것입니다. 이제 C.reduce는 전개연산자로 필요한 값을 다 받았으니, reduce로 모두 더할 차례입니다. 그런데 첫번째 값을 보니 프로미스입니다 (p2). reduce~go1 에 따라 p2가 완료되면 함수를 실행하겠다는 프로미스 p3를 생성하고 reduce 값으로 반환됩니다.reduce가 반환된 값이 go에 전달되고 최종적으로 콜 스택은 비워집니다. microtaskQueue를 보니, 아까 p1,p4가 실행한 자신의 콜백이 완료되어 p2의 콜백과 p5의 콜백이 담겨있니다. 콜 스택이 비워져 있으므로, p2와 p5의 콜백이 순차적으로 실행됩니다.p2가 실행되고 완료됨에 따라 microtaskQueue에는 p3의 콜백이 추가됩니다.이어서 p3 가 실행됩니다. p3는 첫번째 값의 프로미스가 해결되기를 기다리는 객체였습니다. 이어서 2번째 값을 다루려고 보니 이 역시 프로미스 (p5) 입니다. 따라서 완료되면 사용하겠다는 프로미스 p6를 생성하고 리턴합니다. (p6에는 go2와 recur에 의해 체이닝이 2개지만 일단 p6로 봅니다)microtaskQueue 에는 p6가 담기고, 콜 스택이 비워졌으므로 즉시 실행됩니다.go 함수가 마지막 까지 진행되고 결과값이 출력됩니다. 여기서 볼 수 있는 점은 생성한 프로미스의 객체가 resolve 되는 순서에 의해, 체이닝된 프로미스들의 콜백이microtaskQueue에 추가되는 시점이 다르다는 것입니다.프로미스가 생성된 순서는 p1,p2,p3,p4,p5,p6 순이지만,자신의 선행된 프로미스가 누구냐에 따라 실행되는 순서가 다르고,그로인해 실행순서는 p1,p4, p2,p5, p3,p6 순 임에 주목해야합니다.즉, 맨 위에 있는 프로미스가 resolve 되기 전까지,그 아래층에 있는 프로미스의 콜백은 microtaskQueue 에 추가 될 수 없습니다. 이런 원리는 한 행이 병렬적으로 수행되도록 만들어 내는 것입니다.
- 미해결함수형 프로그래밍과 JavaScript ES6+
제가 이해한 C.Reduce와 Reduce의 동작 차이 정리
Concurrency Reduce와 Strict Reduce의 동작 차이 정리_.reduce 와 C.reduce의 차이는 [...iter]로 제너레이터를 한번에 돌려 프로미스들을 동시에 평가 ( 프로미스의 평가 == 프로미스 객체 반환, 콜백함수 즉시실행 ) 하는데에 있다. _.reduce만약 [... ]형태로 전개하지 않는다면 reduce의 while문에서 next()를 하여 yield 로 반환하는 값을 하나씩 빼 올 것이고,이 과정에서 프로미스는 뽑힌다면 (=평가된다면) 뽑히는 과정에서 비로소 콜백을 실행 할 것이다. 그러나 전개하지 않은 상태에서는 이런 뽑히는 과정이 순차적이므로, '프로미스를 뽑아서 콜백을 실행 시켜준 후, reduce 자체를 return 하여 콜백이 완료될 때 까지 기다리고 다시 recur 재귀함수를 통해 이어서 진행하는 과정' 을 프로미스가 뽑힐 때마다 해주어야 하는 것이다.C.Reduce반면에 [...] 형태로 전개하여 사용하면, yield로 반환될 모든 값이 배열에 담긴다. 이 과정에서 뽑힌 프로미스는 콜백이 바로 실행될 것이고, 만약 제너레이터에 여러 프로미스들이 존재한다면 제너레이터의 next()가 연속적으로 동작함에 따라 콜백도 주르륵 병렬되게 실행 될 것이다.이런 프로미스를 포함한 배열을 받은 reduce는 then()을 통해서 reduce를 종료하고 프로미스를 반환한다. 콜백이 완료되면 then(recur)에 의해 재 실행된다. 여러 프로미스들이 거의 동시에 자신의 콜백을 실행시켰기 때문에, reduce 입장에서는 전체 시간이 가장 오래걸리는 놈 만큼만 소요다는 것이다. 마치 Promise.all() 이 동작하는것 처럼 말이다
- 해결됨함수형 프로그래밍과 JavaScript ES6+
go, pipe 함수 관련하여 질문 드립니다.
안녕하세요 선생님 강의도 여러번 돌려보고 혼자서 이해해보려고 했는데, 도저히 이해가 되지 않아 질문 드립니다.혹시 아래 total_quantity 함수와 total_price 함수를 작성하는거 까지는 이해가 가는데,그 후에 products => go(products, 부분을 빼고 pipe 함수로 감싸는 부분이 이해가 되지 않습니다. pipe, go에 대해 제가 아직 미숙한거 같긴한데.. pipe함수가 함수를 받아 두고 그 이후에 다시 함수가 실행되면 받아둔 함수를 이후에 받은 매개변수를 넣어 실행하는 함수라고 생각을 했는데요. 혹시 해당 부분에서 pipe를 사용하신 이유가 있으실까요?? 어떻게 products => go(products,부분만 보고 바로 pipe 함수를 사용해도 된다고 생각하신건가요?? 추가로, total_price에서 products => 부분을 지우고 go(products,map(p=>p.price * p.quantity),reduce((a,b)=>a+b)) 로 작성해도 문제 없이 값이 나타나는거 같은데요 혹시 products를 미리 받은 이유가 있을까요?? 제가 너무 이해가 미숙하여 질문도 미숙할 수 있겠지만..확인 한번 부탁 드리겠습니다!const total_quantity = products => go(products, map(p => p.quantity), reduce((a,b)=> a + b)); console.log(total_quantity(products)) const total_price = products => go(products, map(p=>p.price * p.quantity), reduce((a,b)=>a+b)); console.log(total_price(products))
- 미해결함수형 프로그래밍과 JavaScript ES6+
안녕하세요 강사님!
fxjs로 프로젝트를 해보려하는데 폴더구조를 어떤식으로 짜고 함수명을 관리해주는게 협업에 도움이 될지 고민이라 질문남깁니다...!!
- 해결됨함수형 프로그래밍과 JavaScript ES6+
fxts에 go가 없는 이유?
안녕하세요!저는 현재 비동기 파트를 수강중 입니다.제시해주신 함수들이 너무 매력적이라 사용하고 싶어 fxts를 찾아봤는데, go 가 API 문서에 없네요?!pipe를 호출한 값을 전달하면 되기때문인걸까?변수에 할당하는 것이 부작용을 일으킬 가능성이 크기때문에 go의 사용을 지양하는 것일까? 등등 허접한 짐작만하다가 질문 올려봅니다.go가 fxts에 없는 이유가 무엇일까요?
- 해결됨함수형 프로그래밍과 JavaScript ES6+
비동기 관련 질문입니다!
안녕하세요! 강의 잘 듣고 있습니다. 덕분에 함수형 프로그래밍에 대해 많은 관심을 가지게 되었고, 또한 실제로 회사 프로젝트 내에서도저는 fxjs를 적극 활용하여 사용하고 있습니다. 강의를 여러번 돌려 보고는 있지만 DB를 오가며 사용하는 비동기 상황에는 미흡하고 궁금해 질문 드립니다.아래는 Node.js 서비스 함수 안에서 사용 하고 있으며 DB(mysql)에 접근해 update하는 로직입니다. fn: async() => { _.go( 배열, _.map(로직), _.each(async(num) => await MemberBookmark.update({ where: { target_id: num } })), ); } map으로 가공된 배열을 활용하여 each에서 DB를 업데이트 하는 로직으로 위와 같이 작성 하였는데 문제는 없을지 모르겠습니다. 일단 작동은 제대로 하는데each함수 내에서 async(num) => await Model 업데이트 이런 식으로 비동기적인 작업을 해도 괜찮을지 궁금합니다!
- 미해결함수형 프로그래밍과 JavaScript ES6+
질문 있습니다.
안녕하세요. 수업 중 이해를 잘 못한것 같아 질문 드립니다.const value = [[1, 2], [3, 4], [6, 7, 8]]; L.flatMap = curry(pipe( L.map, L.flatten, )); let it = L.flatMap(map(a => a * a), value) log(...it)위 코드가 돌아가는 과정을 한눈에 이해하기 어렵네요. 제가 생각한 흐름은 아래와 같은데 봐주실수 있을까요??L.flatMap을 만든다. L.flatMap은 인자를 받을 준비를 하는 함수로 인자를 받으면 L.map과 L.flatten을 차례로 실행시켜 준다. L.flatMap의 내부 함수 pipe를 curry로 감싸긴 했지만 실행시 인자 2개를 같이 넣어줄 것이기 때문에 의미 없다. L.flatMap을 실행시켜준다. 첫번째 인자로 map(a => a a) 두번째 인자로 value 값을 넣는다. 넣은 값은 L.map으로 간다. \L.map과 L.flatMap의 인자로 들어온 인자(a => a a, value)는 L.map과 합성된다. 하지만 L.map 안에 log가 바로 찍히지 않는다. 왜냐면 제너레이터는 값이 필요해질 때(next()) 코드가 실행된다. 첫 번째 값이 필요 없다면 아예 실행되지 않고 map(a => a a)와 value가 들어간 상태로 대기?한다. 그 후 L.flatMap 함수를 평가해 값을 하나씩 가져오게 되면 L.flatten으로 가서 값을 만드려 하는데 iter 값이 없으므로 L.map으로 간다. L.map 으로 가서 값을 만드는데 이터러블한 데이터를 하나 가져와서 3번에서 인자로 받은 map(a => a a)을 이용해 값을 다룬 후 yield로 보내준다.차례대로 값을 가져온다.다시 앞으로 돌아가서 천천히 복습해보는게 좋을까요? 아니면 일단 들어보면서 이해해보는게 좋을까요? 어렵지만 강의와 강의 내용은 너무 재밌습니다. 감사합니다.
- 해결됨함수형 프로그래밍과 JavaScript ES6+
강의 중 혼란스러운 부분이 생겨 질문 드립니다.
안녕하세요 강의 중 혼란스러운 부분이 생겨 질문 드립니다.const queryStr2 = pipe( Object.entries, L.map(([k, v]) => `${k}=${v}`), function(a) { log(a) return a; }, join('&'), )위 코드에서 Object.entries는 Lazy하게 구현한 것이 아니라 빌트인 객체의 메서드를 사용했다고 이해 했는데 L.map으로 인해 a값이 Object [Generator] {} 인걸 이해 못했습니다. Object.entries가 이터레이션 프로토콜을 따르는 이터레이터라는 것까진 이해 했는데 내부적으로 제너레이터로 구현이 돼 있는 걸까요?? 값을 yield로 리턴하도록 구현돼 있는 것인지 궁금합니다. 아니면 Object.entries는 이미 평가 된 상태에서 L.map 부분만 지연 평가가 돼 Generator가 된 걸까요?