본문 바로가기

분류 전체보기

[ES6+: 응용] reduce함수를 통해보는 명령형 습관을 지우기 #1 reduce함수는 만능이 아니다 "reduce" 한개를 쓰는 것 보다 "map + filter + reduce" 를 함께 쓰자 기존 명령형 습관들 때문에, reduce를 오용하는 경우가 자주 있다. const users = [ { name: 'AA', age: 35}, { name: 'BB', age: 26}, { name: 'CC', age: 28}, { name: 'DD', age: 34}, { name: 'EE', age: 23}, ] 위와 같은 users 데이터가 있다. 이를 합산하는 코드를 reduce통해 짜볼 것이다. console.log(_.reduce((total, u) => total + u.age, 0, users)); // 146 위를 보면 total과 u.age라는 서로 다른 .. 더보기
[ES6+: 응용] 명령형에서 함수형으로 변환시키기 #1 명령형 코드를 함수형으로 변환시키기 우리가 이때까지 배웠던 for, if, while 문과 같은 명령형 문을 앞에서 배웠던 함수형으로 간략하게 변환시켜보자. 먼저, '홀수를 n개 더하는' 명령형 코드를 보자. function f1(limit, list){ let acc = 0; for(const a of list){ if(a % 2){ const b = a * a; acc += b; if (--limit == 0) break; } } console.log(acc); // 35 } f1(3, [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]); 위 코드는 "리스트를 받아와서 홀수인 값만 뽑아서 거기에 제곱을 하는데, 딱 3개만 뽑고 그 뽑은 값들을 더하는 것"이다. 이 내용을 명령형 코드로 짰.. 더보기
[JS: ES6+] 비동기: 동시성 프로그래밍 (2) #1 지연 평가와 Promise 지연 평가 + Promise - L.map, map과 take 먼저, go 안에 Promise로 구성하여 출력해보자. go([Promise.resolve(1), Promise.resolve(2), Promise.resolve(3)], L.map(a => a + 10), take(2), console.log); // ["[object Promise]10", "[object Promise]10"] go에 Promise로 구성하면, 정상적인 연산이 되지 않는다. 이를 정상적으로 연산이 되게끔 구성을 해볼 것 이다. 앞에서 사용했던 L.map 함수를 보자. L.map = curry(function* (f, iter) { for (const a of iter) { yield f(a.. 더보기
[JS: ES6+] 비동기: 동시성 프로그래밍 (1) #1 Promise 끔찍한 callback에서 벗어나 promise 적용하기 먼저 callback과 promise를 통해 짜여진 두 코드를 보자. /* callback */ function add10(a, callback){ setTimeout(() => callback(a + 10), 100); } add10(5, res => { console.log(res); // 15 }); /* promise */ function add20(a){ return new Promise(resolve => setTimeout(() => resolve(a + 20), 100)); } add20(5) .then(console.log); // 25 일단 가장 먼저 보이는 명확하게 보이는 차이는 promise에는 return.. 더보기
[JS: ES6+] 제너레이터/이터레이터 프로토콜로 구현하는 지연 평가 (2) #1 결과를 만드는 함수 reduce, take reduce를 통해 구현하는 함수 먼저, 객체로부터 url의 queryString을 만들어내는 함수를 만들어 볼 것이다. const queryStr = obj => obj; console.log(queryStr({ limit : 10, offset: 10, type: 'notice' })); // {limit: 10, offset: 10, type: "notice"} 이제 key와 value를 추출하는 코드를 작성해 볼 것이다. const queryStr = obj => go( obj, Object.entries, // key, value를 entries로 변환 map(([k, v]) => `${k}=${v}`), // 구조분해를 통해 key와 value를.. 더보기
[JS: ES6+] 제너레이터/이터레이터 프로토콜로 구현하는 지연 평가 (1) #1 range와 느긋한 L.range 지연 평가의 정의 컴퓨터 프로그래밍에서 느긋한 계산법(Lazy evaluation)은 계산의 결과 값이 필요할 때까지 계산을 늦추는 기법이다. 지연 평가는 필요 할 때까지 계산을 늦추면서 불필요한 계산을 줄일 수 있다. 이러한 지연 평가는 3가지 이점을 가지고 있다. 불필요한 계산을 하지 않으므로 빠른 계산이 가능하다. 무한 자료 구조를 사용 할 수 있다. 복잡한 수식에서 오류 상태를 피할 수 있다. 그럼 이제부터 일반적인 평가와 지연평가를 비교해보록 하자. range 와 L.range 비교 숫자하나를 받고 그 숫자의 크기만한 배열을 리턴 후에 그 값들을 더하는 range함수를 선언해볼 것이다. const add = (a, b) => a + b; const rang.. 더보기
[JS: ES6+] 장바구니 예제로 코드를 줄이고 HTML로 표현해보기 #1 go, pipe, curry를 활용한 코드 줄이기 실습 장바구니 예제 실습 앞에서 배웠던 [go, pipe, curry: https://opentogether.tistory.com/70?category=807380]를 기반으로 코드를 줄여보는 것을 한번 더 해볼것이다. /*외부 파일: fx.js*/ const go = (...args) => args.reduce((a, f) => { return f(a); }); const pipe = (...funcs) => arg => funcs.reduce((a, f) => f(a), arg); const curry = f => (a, ..._) => _.length ? f(a, ..._) : (..._) => f(a, ..._); const map = cur.. 더보기
[JS: ES6+] 코드를 값으로 다루어 표현력 높이기 (go, pipe) #1 go, pipe 함수를 통해 표현력을 높이기 go, pipe 함수란 무엇인가? 코드를 값으로 다룬다면 전체적인 코드의 표현력을 높일 수 있는데, go, pipe를 구현해서 표현력을 높여보자. 먼저 다음과 같은 코드가 있다고 가정하자. a(b,c(d,e())); 위 코드는 함수가 연속해서 중첩되어 가독성이 떨어져서, 작성하기도 해석하기도 힘들다. 이를 간편하게 더 읽기 쉽게 코드를 짜기 위해서 위에서 언급한 go, pipe 함수를 활용해보자. 우선 go 함수를 보자. go 함수는 인자를 받아 결과를 바로 산출해내는 함수로, 첫번째 인자는 시작되는 값을 받고, 나머지는 함수를 받아 첫번째 인자가 두번째 함수로 가서 결과를 만들고 그 결과가 또 세번째 함수로 가서 결과가 만들어지는 순으로 진행된다. 이러.. 더보기

티스토리툴바