함수형 프로그래밍 기초 ES5 #1

훈나무·2022년 7월 17일
0

함수형 프로그래밍 말은 많이 들었는데 도무지 무엇인지 자세히 모르겠어서 공부를 시작했습니다! 이 글은 js 를 기반으로 함수형 프로그래밍을 설명하는 글입니다!

함수형 프로그래밍을 이해하기 위해서는 순수함수와 일급함수에 대해서 이해해야 한다


순수함수와 일급함수

순수함수란?

인자가 일정할 때 리턴값이 일정하고, 외부의 상태를 변화시키지 않는 함수

다소 이해하기 어려울 수 있다. 그래서 몇가지 예시를 가져왔다

let c = 10;
const add = (a, b) => a + b; // 리턴값이 일정하고 외부의 값을 변경하지 않으므로 순수함수
const add2 = (a, b) => a + b + c; // 리턴 값이 외부의 값 c에 의존하므로 순수함수x
const add3 = (a, b) => (c = a + b); // 외부의 값을 변경하므로 순수함수 x

add가 순수함수라는 것은 쉽게 이해할 수 있다. add2는 인자의 값이 일정해도 c의 값에 따라서 리턴 값이 변하기 때문에, 순수함수라고 할 수 없다. 또한, add3는 리턴값은 null 로 일정하지만, 외부의 값인 c를 변화시키기 때문에 순수함수라고 할 수 없다.

일급함수

일급함수란 함수를 변수로 취급하는 것 을 말한다 (정확한지 잘 모르겠다 ㅠ)
js는 모두 일급함수로 이루어졌다. 함수를 인자로 받을 수 있고, 리턴할 수 있다.
이 것 또한 예시를 가져왔다.

const f1 = function (a) {
  return a * a;
};

const f2 = (fun) => {
  const value = fun(3);
  return value;
};

const value = f2(f1);

f2 함수는 함수를 인자로 받아서 그 함수에 3을 넣은 결과값을 리턴한다. 따라서 value의 값은 f1(3)의 값이되고 9가 출력된다.

다른 예시를 알아보자


function addMaker(a) {
  return function (b) {
    return a + b;
  };
}

const returnFunction = addMaker(10);
const result1 = returnFunction(5);
const result2 = returnFunction(15);
const result3 = returnFunction(25);

console.log(result1);
console.log(result2);
console.log(result3);

차근차근 살펴보면, returnFunction은 addMaker(10) 이므로

function(b){
	return 10 + b;
}

가 된다.
따라서 콘솔에는 차례대로 15, 25, 35 가 출력된다.
addMaker는 함수를 리턴하는 일급함수의 특성을 가지고 있으면서, 순수함수의 조건 또한 만족시키고 있다.

profile
프론트엔드 개발자 입니다

0개의 댓글