함수형 자바스크립트 기본기

본 포스트는 인프런의 함수형 프로그래밍과 JavaScript ES6+ 강의(링크)를 듣고 정리한 내용입니다.

평가

• 코드가 계산(Evaluation) 되어 값을 만드는 것

const a = [1, 2, 3 + 4];
console.log(a); //출력결과 [1, 2, 7];

• 3 + 4 라는 코드가 계산되어서 7이라는 값으로 평가 되었다.

일급

• 값으로 다룰 수 있다.
• 변수에 담을 수 있다.
• 함수의 인자로 사용될 수 있다.
• 함수의 결과로 사용 될 수 있다.

const a = 10;
const add10 = a => a + 10;
const r = add10(a);
console.log(r); //출력결과: 20

일급 함수

• 함수를 값으로 다룰 수 있다.
• 조합성과 추상화의 도구

const add5 = a => a + 5;
console.log(add5); //출력결과: a => a + 5
console.log(add5(5)); //출력결과: 10 

const f1 = () => () => 1;
console.log(f1()); //출력결과: () => 1

const f2 = f1();
console.log(f2); //출력결과: () => 1
console.log(f2()); //출력결과: 1

const f3 = f1;
console.log(f3); //출력결과: () => () => 1
console.log(f3()); //출력결과: () => 1

• log()라는 함수의 인자로 함수가 사용될 수 있음
  • 함수를 객체로 넘겨 줄시 함수의 코드가 출력 된다.
  • 함수를 실행하여 넘겨줄 경우 함수의 결과 값이 평가되어 출력된다.
• 일급 함수는 함수의 결과 값으로 함수가 사용될수 있다.
  • f1을 실행하여 넘겨줄 경우 () => 1이라는 코드가 출력된다.
  • f2의 경우 f1() 즉 f1의 실행한 결과 이기 때문에 저런 출력 결과가 나온다.

고차 함수

• 함수를 값으로 다루는 함수
• 일급함수가 값으로 다뤄질 수 있다는 점을 이용하였다.

함수를 인자로 받아서 실행하는 함수

const apply1 = f => f(1);
const add2 = a => a + 2;
console.log(apply1(add2)); //출력결과: 3
console.log(apply1(a => a - 1)); //출력결과: 0

const times = (f, n) => {
    let i = -1;
    while (++i < n) f(i);
}

times(console.log, 3);
//출력결과: 
//0
//1
//2

times(a => console.log(a + 10), 3);
//출력결과: 
//10
//11
//12

• apply1은 인자로 함수를 받아서 내부에서 그 함수를 실행하기 때문에 고차 함수이다.
• times는 인자로 함수와 다른 값을 받아 해당 값을 이용하여 인자로 받은 함수를 실행한다.
  • 이런 함수를 Applicative 프로그램이라고 한다.

함수를 만들어 리턴하는 함수 (클로저를 만들어 리턴하는 함수)

const addMaker = a => b => a + b;
const add10 = addMaker(10);
console.log(add10); //출력결과: b => a + b
console.log(add10(5)); //출력결과: 15
console.log(add10(10)); //출력결과: 20

• 위의 예시에 경우 addMaker의 결과는 인자인 a를 기억하는 형태이다. b => a + b가 a라는 값을 기억하기 때문에 b => a + b는 클로저이다.
  • add10 이 정의 되는 과정에서 addMaker에 인자 값으로 10이 입력 됨으로써 b => a + b 이라는 함수 에서 a라는 변수가 10이라는 값으로 저장된다.