Hi

자바스크립트에서의 함수형 프로그래밍 본문

WEB(웹)/javascript

자바스크립트에서의 함수형 프로그래밍

SharingWorld 2018. 7. 9. 11:58

자바스크립트에서의 함수형 프로그래밍

배열의 각 원소 총합 구하기

function reduce(func, arr, memo) {  
    var len = arr.length;  
  var i = 0;  
  var accum = memo;  
  
  for(; i < len; i++) {  
        accum = func(accum, arr[i]);  
  }  
  
    return accum;  
}  
  
  
var arr = [ 1, 2, 3, 4 ];  
  
var sum = function(x, y) {  
    return x + y;  
};  
  
var multiply = function(x, y) {  
    return x * y;  
};  
  
console.log(reduce(sum, arr, 0)); // 10  
console.log(reduce(multiply, arr, 1)); // 24

함수형 프로그래밍을 이용하여 코드를 훨씬 간결하게 작성할 수 있다.


기존 프로그래밍 바식보다 한 단계 높은 모듈화를 이룰 수 있다. 

팩토리얼

var fact = function() {  
  
    var cache = { '0': 1 };  
  
  var func = function(n) {  
  
        var result = 0;  
  
  if (typeof(cache[n]) === 'number') {  
            result = cache[n];  
  } else {  
            result = cache[n] = n * func(n-1);  
  }  
  
        return result;  
  };  
  
  return func;  
}();  
  
console.log(fact(10)); // 3628800  
console.log(fact(20)); // 2432902008176640000

fact는 cache에 접근할 수 있는 클로저를 반환받는다


캐시에 저장된 값이 있으면 곧바로 그 값을 반환하는 방식. 
중복된 연산을 피하여 보다 나은 성능의 함수를 구현할 수 있다. 

<메모이제이션(memoization 패턴)>

'memoize'란, 계산 결과를 저장해 놓아 이후 다시 계산할 필요 없이 사용할 수 있게 한다는 컴퓨팅 용어


계산된 결과를 함수 프로퍼티값으로 담아 놓고 나중에 사용한다.

function Calculate(key, input, func) {  
    Calculate.data = Calculate.data || {};  
  
  if (!Calculate.data[key]) {  
        var result;  
  result = func(input);  
  Calculate.data[key] = result;  
  }  
  
    return Calculate.data[key];  
}  
  
var result = Calculate(1, 5, function(input) {  
    return input * input;  
});  
  
console.log(result); // 25  
  
var result = Calculate(2, 5, function(input) {  
    return input * input / 4;  
});  
  
console.log(result); // 6.25  
  
  
console.log(Calculate(1)); // 25  
console.log(Calculate(2)); // 6.25

Calculate()프로퍼티에 data 프로퍼티를 만들어 객체를 할당하였다.

해당 키로 저장해 놓은 값으 받아서 사용할 수 있다.


jQuery에서는 data() 메서드로 메모이제이션 패턴을 사용 

피보나치 수열

메모이제이션 기법을 적용

var fibo = function() {  
    var cache = { '0' : 0, '1' : 1 };  
  
  var func = function(n) {  
        let result;  
  
  if (typeof(cache[n]) === 'number') {  
            result = cache[n];  
  }  
        else {  
            result = cache[n] = func(n-1) + func(n-2);  
  }  
  
        return result;  
  };  
  
  return func;  
}();  
  
console.log(fibo(10)); // 55


좀 더 함수형 프로그래밍을 더 들어가면

var cacher = function(cache, func) {  
  
    var calculate = function(n) {  
        let result;  
  
  if (typeof(cache[n]) === 'number') {  
            result = cache[n];  
  }  
        else {  
            result = cache[n] = func(calculate, n);  
  }  
  
        return result;  
  };  
  
  return calculate;  
};  
  
var fact = cacher({ '0' : 1}, function(func, n) {  
    return n * func(n-1);  
});  
  
var fibo = cacher({ '0' : 0, '1' : 1 }, function(func, n) {  
    return func(n-1) + func(n-2);  
});  
  
console.log(fact(10)); // 3628800  
console.log(fibo(10)); // 55


'WEB(웹) > javascript' 카테고리의 다른 글

namespace pattern  (0) 2018.07.25
p5 js canvas 원하는 위치에 넣기  (0) 2018.07.09
함수형 프로그래밍의 개념  (0) 2018.07.09
상속  (0) 2018.07.08
클래스, 생성자, 메서드  (0) 2018.07.07