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

 

회사 업무에서 리액트를 다루는데, 자바스크립트 기본이 되어 있지 않은 상태에서 업무 처리를 하기가 매우 힘들었다.

더군다나, 핵심 기능들은 자바스크립트 함수형으로 많이 구현되어 있었다.

회사 교육비를 지원받아서 듣게 된 강의이다. 공부한 내용을 기록하기 위해서 작성하는 게시글.

다 수강할 때까지 블로그에 배운 내용을 정리할 생각이다.

 

---

평가 : 코드가 계산(Evaluation)되어 있는 값을 만드는 것

 

일급

- 값으로 다룰 수 있다.

- 변수에 담을 수 있다.

- 함수의 인자로 사용될 수 있다.

- 함수의 결과로 사용될 수 있다.

const a = 10;
const add10 = a => a + 10;
const r = add10(a);
add10(a);

 

일급 함수

- 함수를 값으로 다룰 수 있다.

- 조합성과 추상화의 도구

// 함수가 다른 함수의 인자로 사용된 경우
const add5 = a => a + 5;
log(add5); // a => a + 5 가 그대로 출력

// 어떤 함수가 평가를 한 뒤에 다른 함수에게 값을 전달하는 경우
const add5 = a => a + 5;
log(add5(5));

 

함수의 결과값으로 함수가 사용될 수 있다.

// f1 이라는 함수는 실행했을 때 다시 함수를 리턴하는 경우
const f1 = () => () => 1;
log(f1()); // 출력하면 () => 1

// 함수를 다시 변수에 담을 수도 있음
const f2 = f1();
log(f2); // () => 1 출력
log(f2()); // 1 출력, 내가 원하는 시점에 함수를 평가해서 출력할 수 있음

 

고차 함수 : 함수를 값으로 다루는 함수

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

// 함수를 인자로 받아서 실행하는 함수
const apply1 = f => f(1); // 풀어서 쓰면 (a => a + 2)(1) 이런식으로 실행하게 됨
const add2 = a => a + 2;
log(apply1(add2)); // 출력값은 3
log(apply1(a => a - 1)); // 0

// 어플리케이티브 프로그래밍
const times = (f, n) => {
	let i = -1;
    while (++i < n) f(i);
}

times(log, 3); // 로그로 전달하고, 3번 실행을 하게 됨, 0, 1, 2 출력

times(a => log(a+10), 3); // 10, 11, 12 출력

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

 

const addMaker = a => b => a + b; // 함수가 실행되었을 때 함수를 리턴하는 경우
const add10 = addMaker(10);
log(add10); // b => a + b; 출력
log(add10(5)); // 15
log(add10(10)); // 20

클로저는 addMaker라는 함수가 계속해서 a에 들어간 값을 기억하고 있다는 뜻.

예제에서 b => a + b; 는 함수이자, a를 기억하는 클로저.