본문 바로가기

Web/JavaScript

(12)
함수형 자바스크립트 11. 실전코드조각2, 비동기 함수형 자바스크립트 10일차, 마지막 강의9일차에 이은 실전 코드 조각과 비동기에 관한 내용이다. 이번엔 쇼핑몰에서 장바구니 정보를 조회하는 상황에 대한 예제를 살펴봤다. 1234567891011121314151617181920212223242526272829var products = [ { is_selected: true, // 3 -> 2 -> ....와 같이 순서와 상관없이 동작한다. 12345678910111213141516function square(a) { return new Promise(function(resolve) { setTimeout(function() { resolve(a * a); }, 500); });} console.clear();/* 위에서부터 아래로 평가되는 것이 아니라 ..
함수형 자바스크립트 10. 실전코드조각과 효율 높이기 함수형 자바스크립트 9일차함수형 프로그래밍에서 실전에 쓰일만한 예제와 효율성을 높이는 방법에 대한 내용이다. 보통 사이트에서 보일법한 게시판에 대한 예제를 살펴봤다.users라는 사용자 데이터가 있고, 각각의 user들이 작성한 posts 게시글과, comments 댓글의 목록이 존재한다. 이러한 데이트를 고차함수와 보조함수를 이용해서 문제를 해결해 나아간다.문제를 해결 한 뒤에는 반복을 줄여서 효율성을 높이는 방법에 대한 예제를 공부했다. 효율성코드 내용은 추후에 적도록 하고, 우선 효율성을 높이는 방법에 대한 내용이다.map, find 등의 고차함수를 이용해 데이터를 걸러내거나, 수집할 때,users를 순회하고 다시 내부에서 posts를 순회하고, 다시 comments를 순회하곤 한다.특정인의 게시글..
함수형 자바스크립트 9. 지연평가와 함수형 프로그래밍 요약 지금까지 강의를 들으면서 평가 시점이란 단어가 무슨 의미인지 생각하지 않고 넘어갔다.그냥 단순히 값을 대입하는 시점? 함수를 수행하는 시점? 이라는 느낌으로 넘어가도 이상함이 없었기 때문이다.그런데, 문득 지연 평가에 대한 내용을 듣고 여기서 평가가 무슨 의미인지 궁금해졌다. 평가란 무엇인가?evaluation이란 단어는 수학에서 값을 구함이라는 명사이다.함수를 평가한다 = 함수를 수행해서 결과를 구한다 정도로 이해해도 될 것 같다.확실하지 않으니 what is evaluation of function or variable 라는 내용으로 검색해보았다.해당 문서에서 함수의 평가란 변수를 주어진 숫자 또는 표현식으로 대체하는 것을 의미한다고 한다.f(x) = 2x + 4 함수를 , x = 5로 평가한다면, ..
함수형 자바스크립트 8. 그룹핑(group_by, count_by), 실무적인 예제 _group_by, _push_push: Object[key] 에 들어있는 배열에 요소를 추가한다. 만약 배열이 비어있는 상태라면 빈 배열에 요소를 추가한다._group_by: 배열에서 객체들의 key를 기준으로 그룹으로 분류한다. 1234567891011121314151617181920212223242526272829function _push( obj, key, val ) { (obj[key] = obj[key] || []).push(val); return obj;} var _group_by = _curryr(function(data, iter) { return _reduce(data, function(grouped, val) { return _push( grouped, iter(val), val );..
함수형 자바스크립트 7. 수집하기, 거르기, 찾아내기, 접기 기초내용컬렉션 중심 프로그래밍에서는 배열이나 돌림직한 데이터를 다룬다.함수형 프로그래밍에서 사용하는 기법으로 함수들의 응용과 조합을 기반으로 한다고 한다.컬렉션은 데이터를 모아논 구조체이다.컬렉션을 중심으로 수집하고 찾아내고 거르고 축약하면서 어떠한 결과를 만들어내는 프로그래밍 방식인 듯 하다. 수집하기, 거르기, 찾아내기, 접기의 각각 대표함수가 존재한다.대표함수는 추상화 레벨이 가장 높아서 각각의 특화함수를 만들 수 있는 함수이다.예를들어 map을 이용해 values와 pluck라는 특화함수를 만들 수 있다. 수집하기_map에서 공부한 것처럼, 말 그대로 주어진 데이터에서 내부에 있는 값을 수집하는 기능이다._values: (키, 벨류) 형식의 컬렉션에서 벨류의 값들을 수집한다._pluck: 배열 내..
함수형 자바스크립트 6. _each의 외부 다형성 높이기 이전 코드1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192var users = [ { id: 1, name: "ID", age: 36 }, { id: 2, name: "BJ", age: 32 }, { id: 3, name: "JM", age: 32 }, { id: 4, name: "PJ", age: 27 }, { id: 5, name: "HA", age: 25 }, { id: 6, name: "JE", age: 26 }, { id: 7, nam..
함수형 자바스크립트 5. _reduce, _pipe, _go, 화살표 함수 이전 코드1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556var users = [ { id: 1, name: "ID", age: 36 }, { id: 2, name: "BJ", age: 32 }, { id: 3, name: "JM", age: 32 }, { id: 4, name: "PJ", age: 27 }, { id: 5, name: "HA", age: 25 }, { id: 6, name: "JE", age: 26 }, { id: 7, name: "JI", age: 31 }, { id: 8, name: "MP", age: 23 }]; function _filter( l..
함수형 자바스크립트 4. 커링(_curry, _curryr) 이전 강의 _map, _filter, _each123456789101112131415161718192021222324252627282930313233343536var users = [ { id: 1, name: "ID", age: 36 }, { id: 2, name: "BJ", age: 32 }, { id: 3, name: "JM", age: 32 }, { id: 4, name: "PJ", age: 27 }, { id: 5, name: "HA", age: 25 }, { id: 6, name: "JE", age: 26 }, { id: 7, name: "JI", age: 31 }, { id: 8, name: "MP", age: 23 }]; function _filter( list, predi ) { var ..