[JavaScript ES5] 일급함수, add_maker, 함수로 함수 실행하기, map, filter

Yujin Lee·2021년 4월 17일
1

JavaScript

목록 보기
1/14
post-thumbnail

1. 일급함수

함수를 값으로 다룰 수 있는 개념

var f1 = function(a) { return a * a; };
console.log(f1)

함수가 함수를 인자로 받을 수 있음

function f3(f) {
  return f();
}

console.log( f3(function() { return 10; }) );


2. add_maker

함수를 리턴하는 함수

/* add_maker */
function add_maker(a) {
    return function (b) {
        return a + b;
    }
}

var add10 = add_maker(10);
console.log( add10(20) );



function f4(f1, f2, f3) {
    return f3(f1() + f2());
    // f3(2 + 1) -> a:3 -> a*a = 9
}
console.log(
    f4(
        function () { return 2; },
        function () { return 1; },
        function (a) { return a * a; }));




3. filter & map

1) 명령형 프로그래밍

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. 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. 걸러진 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. 걸러진 users의 ages를 수집한다.
var ages = [];
for (var i =0; i < temp_users.length; i++) {
    ages.push(temp_users[i].age);
}
console.log(ages);

자바스크립트는 함수형 프로그래밍 언어이다. 이런 명령형 코드는 지양한다.


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([1, 2, 3, 4], function (num) { return num % 2; }));



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; })

var names = _map(over_30, function (user) {
   return  user.name;
});
console.log(names);

var under_30 = _filter(users, function (user) { return user.age < 30; });

var ages = _map(under_30, function (user) {
    return user.age;
})
console.log(ages);




4. each

map과 filter도 완벽하진 않다.

중복되는 요소를 완전히 없애진 못하는데 그럴 땐 each를 사용

function _filter(users, 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; //받은 값을 그대로 리턴
}
profile
I can be your Genie🧞‍♀️ How ‘bout Aladdin? 🧞‍♂️

0개의 댓글