javaScript. (24) 함수형(Functional) 프로그래밍

함수형 프로그래밍

 

- 객체지향 프로그래밍(OOP)과는 다르다.

- 함수형 프로그래밍은 '함수를 기반'으로 돌아간다.

- 자바스크립트는 기본적으로 객체지향이므로, 완벽하게 함수형 프로그래밍을 할 수는 없다.

 

 

<원칙>

• 입출력이 순수한 함수여야 한다.
• 부작용(부산물)이 없어야 한다.
• 함수와 데이터를 중점으로 생각한다. (객체랑은 다름)

 

 

 

💡 입출력이 순수하다? (= 순수함수)

>> 하나 이상의 인자를 받고, 받은 인자를 처리하여 결과 리턴해야함.

 

- 인자 제외한 다른 변수는 사용해선 X.

- 받은 인자만으로 결과 도출해야함.

❕ 자바스크립트에서는 this라는 개념 때문에 순수함수를 사용하기 힘들다.

 

 

 

💡 부작용이 없다?

- 프로그래머가 바꾸려는 변수 외에는 바뀌어서는 X.

- 원본 Data는 불변.

>> 함수형 프로그래밍에서는 프로그래머가 모든것을 예측 / 통제할 수 있도록.

 

__

 

 

 

대표적인 함수형 프로그래밍 함수 >> map, filter, reduce

- 배열(Array)에 존재하는 메소드임.

 

let arr = [1, 2, 3, 4, 5];
let mapArr = arr.map(function(x) {
    return x * 2;
});       

// [2, 4, 6, 8, 10]

- 배열(arr)을 넣어서 결과(mapArr)를 리턴받았음을 알 수 있다. (각각 입/출력)

 

- arr도 사용은 하였지만, 원본배열 (arr)의 값이 바뀌지도 않았고,

mapArr이라는 결과를 반환하고, 아무런 부작용도 낳지 않았다.

>> 이런것이 바로 순수함수, 즉 함수형 프로그래밍에 적합한 함수이다.

 

 

 

let arr = [1, 2, 3, 4, 5];

let condition = function(x) {       // 조건 ㅡ ex함수 내부에 argument로 들어감
    return x % 2 === 0; 
}

let ex = function(array) {
    return array.filter(condition);   // x % 2 === 0 이 true인 것만 반환
}

ex(arr);    // [2, 4]

위 ex함수는 순수함수인가? = NO.

condition 변수는 ex의 인자로 받은 변수가 아님.

(ex함수의 인자는 arr임)

>> 따라서 순수함수가 아니다!

 

 

let arr = [1, 2, 3, 4, 5];

let condition = function(x) {       // 조건 ㅡ ex함수 내부에 argument로 들어감
    return x % 2 === 0; 
}

let ex = function(array, cond) {
    return array.filter(cond);   // x % 2 === 0 이 true인 것만 반환
}

ex(arr, condition);    // [2, 4]

- ex의 파라미터를 추가한 후, 인자로 condition을 넣어주면

받은 인자만으로 결과 도출하므로 순수함수라고 할 수 있다!

 

-> 에러를 쉽게 추적할 수 있음. 

 

 

---

반복문 대신 재귀함수 사용시

보통은 1부터 10까지 더하는 동작을 할 때, 반복문을 이용하여

let sum = 0;
for(let i=1; i<=10; i++) {
    sum += i;
}

와 같이 작성했다.

 

function add(sum, count) {
   sum += count;
   if(count > 0) { 
       return add(sum, count - 1);          
   } else {
       return sum;
   }
}

// 실행부 (1부터 10까지의 합)
add(0, 10);

<동작원리>
자기 자신을 불러서 계속 실행하고 - if문 조건을 벗어나면(else) break함. (return시 종료됨)

sum = 10
sum = 10 + 9
sum = 19 + 8
sum = 27 + 7 
.
.
.
sum = 54 + 1 = 55
return sum; // 55

add 안에서 add를 또 호출(=재귀)

 

함수형으로 표현하면, 코드의 재사용성이 매우 높아짐.

 

 

TEST - 팩토리얼 함수(재귀)

/// 5! = 5 * 4 * 3 * 2 * 1 = 120

function factorial(result, count) {
   result *= count;
   if(count > 1) { 
       return factorial(result, count - 1);           // count에 count-1이 들어가는 것임
   } else {
       return result;
   }
}

// 실행부 (5!)
factorial(1, 5);       // 120

 

 

배열 메서드중 하나인 reduce를 사용해서 코드를 짤 수도 있다.

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

arr.reduce(function(prev, cur) {
   return prev + cur;
});             // 55

 

arr.map()	함수 실행 결과로 새 배열 반환 (return array)
arr.reduce()	함수 실행 결과값만 반환 (return value)

 

---

REFERENCE

 

https://www.zerocho.com/category/JavaScript/post/576cafb45eb04d4c1aa35078

(JavaScript) 함수형 프로그래밍(Functional Programming)

이 포스팅은 zerocho님의 javascript 강의를 보고 작성한 글입니다.

공부+기록 용으로 작성한 것이며, 자세한 것은 위 포스팅을 참고하세요!