본문 바로가기

Web[웹]

[ES6+: 응용] 시간을 이터러블로 다루기 #1 take, takeWhile, takeUntil로 코드 다루기 takeWhile, takeUntil 먼저 range와 take를 다시 알아보자. 위 두 개는 즉시 평가되는 것과 지연 평가되는 것으로 나뉘는데 이를 해석해보면 다음과 같다. _.go( _.range(10), /* 0 ~ 9 까지의 배열 */ _.take(3), /* 앞에서부터 3개만 자르기 */ _.each(console.log)); // 0 1 2 _.go( L.range(10), /* 0 ~ 9 까지의 이터러블, 최대 10번 수행 */ L.take(3), /* 최대 3개의 값이 필요하고, 최대 3번의 일을 수행 */ _.each(console.log)); // 0 1 2 위 항목에서 range이후에 delay(1000)이 들어간다면.. 더보기
[ES6+: 응용] 사용자 정의 객체를 이터러블 프로그래밍으로 다루기 #1 사용자 정의 객체를 다루기 map, set 다루기 자바스크립트의 기본객체가 아닌 추가적으로 만들어인 사용자 정의 내장 객체 역시도 이터러블로 프로그래밍을 다룰 수 있다. 먼저 Map을 알아보자. let m = new Map(); m.set('a', 1); m.set('b', 2); m.set('c', 3); 위와 같은 Map도 이터러블로 프로그래밍 하고 다시 새로운 Map으로 생성이 가능하다. _.go( m, _.filter(([k, v]) => v % 2), entries => new Map(entries), console.log); // Map(2) {"a" => 1, "c" => 3} 이어서 Set같은 경우도 마찬가지이다. let s = new Set(); s.add(10); s.add(20).. 더보기
[ES6+: 응용] 객체를 이터러블 프로그래밍으로 다루기 #1 객체를 다루는 함수, 이터러블 프로그래밍화 시키기 values 다루기 다음과 같은 객체가 있다고 보자. const obj1 = { a: 1, b: 2, c: 3, d: 4 }; 먼저 위코드의 values 값들을 콘솔을 통해 출력해보자. console.log(Object.values(obj1)); // [1, 2, 3, 4] 위 처럼 value값들을 뽑아낼 수 있으며, 위 값들을 go함수를 통해 값을 뽑아내는 함수를 보자. _.go( obj1, Object.values, _.map(a => a + 10), _.take(2), _.reduce((a, b) => a + b), console.log); // 23 위 값에서 console.log를 하기까지 단 2개의 값이 필요했지만, 사실상 모든 value.. 더보기
[ES6+: 응용] map과 filter로 하는 안전한 함수 합성 #1 안전한 함수 합성 map으로 합성하기 다음과 같은 합성함수를 선언했다. const f = x => x + 10; const g = x => x - 5; const fg = x => f(g(x)); 위와 같이 함수를 선언했을 때, 아래와 같이 인자값 없이 값을 실행하면 'NaN'으로 에러가 난다. console.log(fg(10)); // 15 console.log(fg()); // NaN - 에러가 난다. 잘못된 값이 들어왔을때, 아무 동작도 하지 않게끔 하려면 어떻게 해야될까? 바로 모나드와 map함수를 통해 안전한 합성을 이룰 수 있다. 위와 똑같은 동작을 하는 함수를 go 함수를 통해 나타내보자. _.go( 10, fg, console.log); // 15 이제, 이것을 안전한 함수 합성을 위.. 더보기
[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.. 더보기

티스토리툴바