본문 바로가기

Web[웹]

[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 함수는 인자를 받아 결과를 바로 산출해내는 함수로, 첫번째 인자는 시작되는 값을 받고, 나머지는 함수를 받아 첫번째 인자가 두번째 함수로 가서 결과를 만들고 그 결과가 또 세번째 함수로 가서 결과가 만들어지는 순으로 진행된다. 이러.. 더보기
[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: '후드티.. 더보기
[JS: ES6+] 제너레이터와 이터레이터 #1 제너레이터와 이터레이터 제너레이터 함수란? ES6에서 도입된 제너레이터(Generator) 함수는 이터러블을 생성하는 함수이다. 제너레이터 함수를 사용하면 이터레이션 프로토콜을 준수해 이터러블을 생성하는 방식보다 간편하게 이터러블을 구현할 수 있다. 또한 제너레이터 함수는 비동기 처리에 유용하게 사용된다. function* gen() { yield 1; yield 2; yield 3; } const genIter = gen(); console.log(genIter.next()); // {value:1, done: flase} console.log(genIter.next()); // {value:2, done: flase} console.log(genIter.next()); // {value:3, d.. 더보기
[JS: ES6+] ES6에서의 순회와 이터러블:이터레이터 프로토콜 #1 기존과 달라진 ES6에서의 리스트 순회 ( for of, for i++) //기존 리스트 순회 const list = [1, 2, 3]; for (var i = 0; i< list.length; i++) { console.log(list[i]); // 1 2 3 } //기존 문자배열 순회 const str = 'abc'; for (var i = 0; i< str.length; i++){ console.log(str[i]); // a b c } //바뀐 리스트 순회 for (const a of list) { console.log(a); // 1 2 3 } //바뀐 문자배열 순회 for (const a of str) { console.log(a); // a b c } #2 Array, Set, Map을.. 더보기

티스토리툴바