함수형 프로그래밍 with JS ①

해당 강의를 듣고 정리한 글입니다.... 🐿️
https://www.inflearn.com/course/functional-es6

섹션 0. 함수형 자바스크립트 기본기

평가와 일급

평가란 코드가 계산되어 값을 만드는 것.

일급이란,

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

일급 함수

자바스크립트에서 함수는 일급이다. 즉, 함수를 값으로 다룰수 있다는 것이다.
자바스크립트에서 함수가 일급이라는 뜻은 자바스크립트에서 조합성과 추상화의 도구로 함수를 잘 사용할 수 있다는 뜻이기도 하다.

고차함수

고차함수는 함수를 값으로 다루는 함수이다. 고차함수의 유형은 2가지 이다.

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

const apply1 = f ⇒ f(1);
const add2 = a ⇒ a + 2;
apply1(add2)); // 3

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

const addMaker = a => b => a + b;
const add10 = addMaker(10);
add10(5); // 15

섹션 1. ES6에서의 순회와 이터러블:이터레이터 프로토콜

기존과 달라진 ES6에서의 리스트 순회

const list = [1, 2, 3];

// ES5
for (var i = 0; i < list.length; i++) {
	console.log(list[i]);
}

// ES6
for (const a of list) {
	console.log(a);
}

Array, Set, Map을 통해 알아보는 이터러블/ 이터레이터 프로토콜

1. Array

const arr = [1, 2, 3];

for (const a of arr) {
	console.log(a);	// 1 2 3
}

2. Set

const set = new Set([1, 2, 3]);

for (const a of set) {
	console.log(a);	// 1 2 3
}

3. Map

const map = new Map([['a': 1], ['b': 2], ['c': 3]]);

for (const a of map.keys()) {
	console.log(a);	// a b c
}
for (const a of map.values()) {
	console.log(a);	// 1 2 3
}
for (const a of map.entries()) {
	console.log(a);	// ["a", 1], ["b", 2], ["c", 3] 
}

// map.keys(), map.values(), map.entries()는 이터레이터를 리턴함
const it = map.keys();
it[Symbol.iterator]; // it(이터레이터)가 [Symbol.iterator]를 가지고 있음 (= it는 이터러블이자 이터레이터)

이터러블/ 이터레이터 프로토콜

// iterator: 이터레이터 , arr: 이터러블
const iterator = arr[Symbol.iterator];
iterator.next(); // { value: 1, done: false }

이터러블 : 이터레이터를 리턴하는 [Symbol.iterator]를 가진 값
이터레이터 : { value, done } 객체를 리턴하는 next()를 가진 값
이터러블/이터레이터 프로토콜 : 이터러블을 for … of, 전개 연산자 등과 함께 동작하도록 한 규약

사용자 정의 이터러블을 통해 알아보기

// 이터러블은 [Symbol.iterator]를 가지고 있어야 함 
const iterable = {
	[Symbol.iterator]() {
		let i = 3;
		return {
			// 이터레이터는 { value, done } 객체를 리턴하는 next()를 가지고 있어야 함 
			next(){
				return i == 0 ? { done: true } : { value: i--;, done: false }
			}
			// well-formed iterator는 자기 자신을 반환한 [Symbol.iterator] 메서드를 가지고 있어야 함
			[Symbol.iterator]() {
				return this;
			}
		}
	}
}

잘만들어진 이터레이터 프로토콜은 next()를 하다가 for … of 문을 돌릴 수 도 있게해야한다.
즉, 이터레이터가 자기 자신을 반환한 [Symbol.iterator] 메서드를 가지고 있을 때 well-formed iterator 라고 할 수 있다!

const arr = [1, 2, 3];
const iterator = arr[Symbol.iterator]();
iterator.next(); // 1

for (const a of iterator) {
	console.log(a); // 2 3
}

전개 연산자

전개연산자도 이터러블 프로토콜을 따르고 있다.

const a = [1, 2];
console.log([...a]);

섹션 2. 제너레이터와 이터레이터

제너레이터와 이터레이터

제너레이터 : 이터레이터이자 이터러블을 생성하는 함수
제너레이터는 어떠한 상태나 값을 순회하는 상태로 만들 수 있다.

function *gen(){
	yield 1;
	yield 2;
	yield 3;
	return 100;
}

const iter = gen();
// 제너레이터는 well-formed iterator를 반환하는 함수이다. 
console.log(iter[Symbol.iterator]() == iter);
iter.next();

// 유의할 점 : 순회할 때는 return 값은 안됨 
for (const a of gen()) {
	console.log(a); // 1 2 3
}

odds

제너레이터를 활용하여 홀수만 발생시키는 이터레이터

function *intinity(i = 0) {
	while(true) yield i++;
}

function *limit(l, iter) {
	for (const a of iter) {
		yield a;
		if (a == l) return;
	}
}

function *odds(l){
	for (const a of limit(l,intinity(1))) {
		if (a % 2) yield a;
	}
}

const iter = odds(10);

for…of, 전개 연산자, 구조 분해, 나머지 연산자

이터러블/이터레이터 프로토콜을 활용해 for…of, 전개 연산자, 구조 분해, 나머지 연산자를 사용할 수 있다.

const [head, ...tail] = odds(5);

for (const a of odds(10)) {
	console.log(a);
} 

회고 💫

이터러블/이터레이터과 제너레이터에 대해 공부를 한적이 있긴 한데 그냥 그렇구나~ 하고 넘기면서 공부했었다. 다시 한 번 모던 자바스크립트 딥다이브를 읽고, 강의도 들어보니 이해가 완전히 된 느낌이었다. 그리고 이터러블/이터레이터과 제너레이터에 대한 이해도는 올라갔는데, 함수형 프로그래밍에 대해서는 아직 잘 모르겠어서 남은 강의에서 함수형 프로그래밍에 대해 어떻게 전개가 될지 기대가 된다앗.