[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+] 장바구니 예제로 코드를 줄이고 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 함수는 인자를 받아 결과를 바로 산출해내는 함수로, 첫번째 인자는 시작되는 값을 받고, 나머지는 함수를 받아 첫번째 인자가 두번째 함수로 가서 결과를 만들고 그 결과가 또 세번째 함수로 가서 결과가 만들어지는 순으로 진행된다. 이러..
더보기
[JS: ES6+] 이터러블 프로토콜을 따른 map, filter, reduce
#1 map 이터러블 프로토콜을 따른 map 간단하게 먼저, map 함수는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다. var array1 = [1, 4, 9, 16]; // pass a function to map const map1 = array1.map(x => x * 2); console.log(map1); // expected output: Array [2, 8, 18, 32] 이제, 이터러블 프로토콜을 따른 map함수를 알아볼건데요, 먼저 map을 사용하지 않은 예제를 봅시다. const products = [ { name: '반팔티', price: 15000 }, { name: '긴팔티', price: 20000 }, { name: '후드티..
더보기
