ES5+함수형-함수형으로 전환하기
자바스크립트로 알아보는 함수형 프로그래밍 (ES5) 강의를 수강하며 정리한 내용입니다.
1. 회원 목록, map, filter
var 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 }
];
// 1. 명령형 코드
// 1) 30세 이상인 users를 거른다.
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);
// 2) 30세 이상인 users의 names를 수집한다.
var names = [];
for (var i = 0; i < temp_users.length; i++) {
names.push(temp_users[i].name);
}
console.log(names);
// 3) 30세 미만인 users를 거른다.
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);
// 4) 30세 미만인 users의 ages를 수집한다.
var ages = [];
for (var i = 0; i < temp_users.length; i++) {
ages.push(temp_users[i].ages);
}
console.log(ages);
// 2. _filter, _map으로 리팩토링
/*
조건을 제외한 모든 중복을 제거.
추상화의 단위가 함수.
응용형 함수(프로그래밍) : 함수가 함수를 받아서 원하는 시점에 해당하는 함수가 알고 있는 인자를 적용하는 식으로 프로그래밍
고차 함수 : 함수를 인자를 받거나 함수를 리턴하거나 함수안에서 인자로 받은 함수를 실행하는 함수
데이터형이 어떻게 생겼는지 보이지 않는다.
다형성이 굉장히 높고, 관심사가 완전히 분리되며 재사용성이 높아진다. */
/* ===================_filter 함수========================== */
function _filter(list, predi) {
// list : 무엇을 푸쉬를 할 것인가
// predi : 무엇을 수집해서 넣을 것인가를 완전히 위임
var new_list = [];
for (var i = 0; i < list.length; i++) {
if (predi(list[i])) {
new_list.push(list[i]);
}
}
return new_list; // console의 부수효과를 return으로 없앤다.
}
/* 과정
_filter 함수는 user 함수를 받고 유저의 크기만큼 루프를 돌고
해당번째 users를 받아두고 predi 함수에 연속적으로 전달 */
/* ===================_map 함수========================== */
function _map(list, mapper) {
// list : 무엇을 푸쉬를 할 것인가
// mapper : 무엇을 수집해서 넣을 것인가를 완전히 위임
var new_list = [];
for (var i = 0; i < list.length; i++) {
new_list.push(mapper(list[i]));
}
return new_list; // console의 부수효과를 return으로 없앤다.
}
console.log(
_map(
_filter(users, function(user) { return user.age >= 30; });
function(user) { return user.name; }));
console.log(
_map(
_filter(users, function(user) { return user.age < 30; });
function(user) { return user.age; }));
/* ===================다양한 역할========================== */
// _filter과 _map 함수는 users만을 위한 함수가 아니라 다양한 역할을 한다.
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]
console.log(
_map([1, 2, 3], function(num) { return num * 2; }));
// [2, 4, 6]
2. each
// 1. _each로 _map, _filter 중복 제거
// 루프부분과 해당 i번째 값을 참조하는 부분의 중복 제거
/* ===================기존 코드========================== */
function _filter(list, predi) {
var new_list = [];
for (var i = 0; i < list.length; i++) {
if (predi(list[i])) {
new_list.push(list[i]);
}
}
return new_list;
}
function _map(list, mapper) {
var new_list = [];
for (var i = 0; i < list.length; i++) {
new_list.push(mapper(list[i]));
}
return new_list;
}
/* ===================중복 제거========================== */
function _filter(list, predi) {
var new_list = [];
_each(list, function(val) {
if (predi(val)) new_list.push(val);
});
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;
}
3. 다형성
1) filter, map 메서드
순수 함수가 아니고 객체 상태에 따라 결과가 달라진다 (객체 지향)
해당 클래스에 정의되기 때문에 해당 클래스의 인스턴스에서만 사용 된다.
(ex. 배열에서만 사용가능)
/* 데이터가 있어야 메서드가 생긴다.
평가의 순서가 중요.
해당 객체가 생겨야 기능수행이 가능 */
console.log(
[1, 2, 3, 4].filter(function(val) {
return val % 2;
})
); // [1, 3]
console.log(
[1, 2, 3, 4].map(function(val) {
return val * 2;
})
); // [2, 4, 6, 8]
2) 외부 다형성
array_like, arguments, documentquerySelectorAll
// documentquerySelectorAll 은 배열처럼 보인다.
console.log( documentquerySelectorAll('*') );
// [html, head, meta ...]
/* documentquerySelectorAll 는 배열이 아니고
array_like 객체이다. (Constructor: NodeList) */
console.log(
documentquerySelectorAll('*').map(function(node) {
return node.nodeName;
})
); // TypeError: map is not a function
/* 함수는 단독으로 존재하기 때문에 데이터가 생기지 않더라도
평가시점이 유연해져 조합성이 높아진다. */
console.log(
_map(documentquerySelectorAll('*'), function(node) {
return node.nodeName;
})
); // [html, head, meta ...]
3) 내부 다형성
함수의 두번째 인자(보조함수)를 무조건 콜백함수로 불러주는 것보다
각각의 역할로 불러주는 것이 좋다.
내부의 값에 대한 다형성은 보조함수가 책임을 진다.
ex) predi, iter, mapper
_map([1, 2, 3, 4], function(v) {
return v + 10;
});
4. 커링, curry, curryr
1) 커링
함수와 인자를 다루는 기법.
함수의 인자를 하나씩 적용해 나가다가
필요한 인자가 모두 채워지면 함수 본체를 실행하는 기법.
2) curry
3) curryr
5. reduce
6. 파이프라인, _go, _pipe, 화살표 함수
7. 다형성 높이기, _keys, 에러
Author And Source
이 문제에 관하여(ES5+함수형-함수형으로 전환하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@blackb0x/ES5함수형-함수형으로-전환하기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)