함수형 프로그래밍이란?

• side effect가 없다.
• 함수 외부 데이터에 의존하지 않는다.
• 함수 외부 데이터를 변경하지 않는다.

부수 효과를 없애고 함수끼리의 조합성을 강조하는 프로그래밍 패러다임!

순수함수

• 작성한 함수가 하나 이상의 인자를 받아야 한다.
• 반환값이 반드시 존재해야 한다.
• 함수 내에서 인자를 제외한 다른 변수는 사용하면 안 된다.
• 동일 입력, 동일 출력이 보장된다.
• 평가 시점이 중요하지 않다.

const arr = [1, 2, 3, 4, 5];
const map = arr.map(function(x) {
	return x * 2;
});	// [2, 4, 6, 8, 10]

입력 : arr / 출력 : map / 변수 arr은 사용은 됐지만 값 변화 X, map이란 결과를 내고 아무런 부작용 X

예시 1

❌

const arr = [1, 2, 3, 4, 5];
const condition = function(x) {return x % 2 === 0}
const ex = function(array) {
    return array.filter(condition);
};
ex(arr); 	// [2, 4]

ex 함수가 인자로 받지 않은 condition 변수를 사용하고 있다.

✅

const ex = function(array, cond) {
	return array.filter(cond);
};
ex(arr, condition);

condition 변수를 인자로 받아 순수함수가 되었다. 이를 통해 에러 추적이 쉬워졌다.

예시2

❌

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

순수함수를 만들 때엔 반복문을 쓰지 않는게 좋다.

✅

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

인자로 받은 sum과 count만 활용했기 때문에 순수함수이다.

✅

const arr = [1,2,3,4,5,6,7,8,9,10];
const answer = arr.reduce((pre, cur) => {
	return pre + cur;
});	
console.log(answer); // 55

위 코드를 고차함수인 reduce를 활용해서 간결하게 만들었다.

예시3

❌

let a = 0;

function increment1() {
    return a += 1;
}

increment1 함수가 외부 데이터 변수인 a에 의존하고 있다.

✅

increment2(a) {
	return a + 1;
}

인자로 받은 a와, 상수 1만 활용했기 때문에 순수함수이다.

JS 콜렉션 인터페이스

아래의 메소드들은 함수형 프로그래밍 개념에 따라

기존 변수에 대한 사이드 이펙트가 없도록 구현하는 것이 원칙이다.

• map

const arr = ['foo', 'hello', 'diamond', 'A'];
const arr2 = arr.map((v) => v.length);
console.log(arr2) // [3, 5, 6, 1]

• filter

const arr = [4, 15, 377, 395, 400, 1024, 3000];
const arr2 = arr.filter((v) => (v % 5 === 0));
console.log(arr2) // [15, 395, 400, 3000]

• reduce

let arr = [9, 2, 8, 5, 7];
let sum = arr.reduce((pre, val) => pre + val);
console.log(sum)	// 31

reduce로 map, filter, find 구현

• map by reduce

const arr = ['foo', 'hello', 'diamond', 'A'];
const arr2 = arr.reduce((pre, val) => {
    pre.push(val.length);
    return pre;
}, [])
console.log(arr2)	// [3, 5, 7, 1]

• filter by reduce

const arr = [4, 15, 377, 395, 400, 1024, 3000]
const arr2 = arr.reduce((pre,val) => {
    if(val % 5 === 0) pre.push(val);
    return pre;
},[])
console.log(arr2)	// [15, 395, 400, 3000]

• find by reduce

const arr = [4, 15, 377, 395, 400, 1024, 3000]
const arr2 = arr.reduce((pre, val) => {
    if(typeof pre == 'undefined' && val % 5 === 0) {
        pre = value;
    } 
    return pre;
}, undefined);
console.log(arr2)	// 15

REFERENCE

• 러닝자바스크립트 (by 이선 브라운)
• https://developer.mozilla.org/ko/