728x90
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="js/_.js"></script>
<script>
var users = [
{ id: 1, name: 'id', age: 36 },
{ id: 2, name: 'bj', age: 35 },
{ id: 3, name: 'jn', age: 44 },
{ id: 4, name: 'as', age: 33 },
{ id: 5, name: 'df', age: 52 },
{ id: 6, name: 'gh', age: 21 },
{ id: 7, name: 'jk', age: 30 },
{ id: 8, name: 'lm', age: 29 },
]
/**
* 1. 명령형 코드
*/
// 1-1. 30세 이상인 user를 검색
var temp_users = [];
for (var i=0; i<users.length; i++) {
if(users[i].age >= 30) {
temp_users.push(users[i]);
}
}
console.log(temp_users);
// 1-2. 30세 이상인 user의 names를 수집
var names = [];
for (var i=0; i<temp_users.length; i++) {
names.push(temp_users[i].name);
}
console.log(names);
// 1-3. 30세 미만인 user를 검색
var temp_users = [];
for (var i=0; i<users.length; i++) {
if (users[i].age < 30) {
temp_users.push(users[i]);
}
}
console.log(temp_users);
// 1-4. 30세 미만인 users의 ages를 수집
var ages = [];
for (var i=0; i<temp_users.length; i++) {
ages.push(temp_users[i].age);
}
console.log(ages);
/**
* 2. _filter, _map으로 리팩토링
*/
/**
* 2. filter: 응용(적용)형 함수 - 함수를 인자로 받아서
* 원하는 시점에 평가를 하면서 원하는 함수에서 적용함
*/
// function _filter(users, predi) {
// var new_list = [];
// for (var i=0; i<users.length; i++) {
// if(predi(users[i])) {
// new_list.push(users[i]);
// }
// }
// return new_list;
// }
console.log(_filter(users, function(user) {
return user.age >= 30;
})
);
console.log(_filter(users, function(user) {
return user.age < 30;
})
);
/**
* filter는 users만을 위한 코드가 아니라 다른 값들도 필터링 가능하게 됨
*/
console.log('--- filter')
console.log(_filter([1, 2, 3, 4], function(num) {
return num % 2;
})); // [1, 3]
console.log(_filter([1, 2, 3, 4], function(num) {
return !(num % 2);
})); // [2, 4]
/**
* 3. map: 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.
*/
// function _map(list, mapper) {
// var new_list = [];
// for (var i=0; i<list.length; i++) {
// new_list.push(mapper(list[i]));
// }
// return new_list;
// }
var over_30 = _filter(users, function(user) {
return user.age >= 30;
})
console.log('----map')
console.log(over_30)
var names = _map(over_30, function(user) {
return user.name;
})
console.log(names); // ["id", "bj", "jn", "as", "df", "jk"]
var under_30 = _filter(users, function(user) {
return user.age < 30;
});
var ages = _map(under_30, function(user) {
return user.age;
})
console.log(ages); // [21, 29]
console.log(_map([1, 2, 3], function(num) {
return num * 2;
})) // [2, 4, 6]
/**
* 모든 코드에 대해서 대입문을 없애고 함수를 중첩하는 식으로 리팩토링
*/
console.log('---리팩토링')
console.log(
_map(
_filter(users, function(user) { return user.age >= 30;}),
function (user) {
return user.name;
})
); // 30세 이상인 유저명
console.log(
_map(
_filter(users, function(user) { return user.age < 30;}),
function (user) {
return user.age;
})
); // 30세 이하 나이
</script>
</body>
</html>
_.js
function _filter(list, predi) {
var new_list = [];
_each(list, function(val) {
if(predi(val)) {
new_list.push(users[i]);
}
})
return new_list;
}
function _map(list, mapper) {
var new_list = [];
_each(list, function(val) {
new_list.push(mapper(val));
});
return new_list;
}
function _each(list, iter) {
for (var i=0; i<list.length; i++) {
iter(list[i]);
}
return list;
}
'개발 일기' 카테고리의 다른 글
| filter, map, reduce in javascript 간단 정리 (3) | 2020.11.04 |
|---|---|
| 다형성, 커링 in javascript (0) | 2020.11.03 |
| 일급함수 in javascript (0) | 2020.10.28 |
| 함수형 프로그래밍 정리 (Functional Programming) javasciprt (0) | 2020.10.28 |
| vue.js plugin으로 global method 만들기 (0) | 2020.10.06 |
댓글