[개념잡기] 컬렉션 중심 프로그래밍 - (5) 마무리
서론
실제 실무에서 사용할 법한 코드를 여태 만들었던 _.js 함수들을 이용하여 작성해보겠다.
컬렉션 중심 프로그래밍
일부 함수 변경
- map 함수 :
key추가
var _map = _curryr((list, mapper) => {
var new_list = []
_each(list, (val, key) => {
new_list.push(mapper(val, key))
})
return new_list
})- each 함수 :
keys[i]추가
var _each = (list, iter) => {
var keys = _keys(list)
for(var i = 0, len = keys.length ; i < len; i++) {
iter(list[keys[i]], keys[i])
}
}실전 코드
조건 : 유저중 10대, 20대, 30대가 몇명인지 출력- 코드 작성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>::: 중간 정리 :::</title>
<script src="./_.js"></script>
</head>
<body>
<div class="block">
</div>
<script>
var users = [
{id: 1, name: 'ID', age: 29},
{id: 2, name: 'QW', age: 30},
{id: 3, name: 'WE', age: 30},
{id: 4, name: 'ER', age: 32},
{id: 5, name: 'RT', age: 21},
{id: 6, name: 'DF', age: 28},
{id: 7, name: 'AS', age: 35},
{id: 8, name: 'IS', age: 25},
{id: 9, name: 'DF', age: 10},
{id: 10, name: 'OP', age: 12},
{id: 11, name: 'GH', age: 39},
{id: 12, name: 'PA', age: 27},
{id: 13, name: 'KS', age: 26},
]
var block = document.querySelector(".block")
_go(
users,
_count_by(user => user.age - user.age % 10),
_map((count, key) => {
return `<li>${key}대는 총 ${count}명 입니다.</li>`
}),
html => block.innerHTML = html
)
</script>
</body>
</html>- 출력
마무리
컬렉션 중심 프로그래밍 포스팅이 마무리가 되었다. 총 4가지 동작을 중심으로 여러 가지 함수를 작성하여 함수형 프로그래밍을 해보았다.
작성했던 _.js 파일 링크이다.
https://github.com/ocipap/Study-Functional-Programming/blob/master/_.js
'Study > VanillaJS' 카테고리의 다른 글
| 함수형 자바스크립트 빠르게 읽어보기 (0) | 2019.05.27 |
|---|---|
| [개념잡기] 자바스크립트 개념정리 (0) | 2019.05.08 |
| [개념잡기] 컬렉션 중심 프로그래밍 - (4) 접기 (min_by, max_by, group_by, count_by) (0) | 2019.03.13 |
| [개념잡기] 컬렉션 중심 프로그래밍 - (3) 찾아내기 (find, find_index, some, every) (0) | 2019.03.12 |
| [개념잡기] 컬렉션 중심 프로그래밍 - (2) 거르기 (filter, reject, compact) (0) | 2019.03.11 |
