🚀 intro
오늘로 웹데코 2주차이다. 😃
지난 1주차는 어떤 것들이 있나 관찰하고 적응했던 기간이었던 것 같다.
특히 학습하고 내 것으로 만드는 과정인 TIL과 아티클 작성에 대해 노하우(?)를 채득중인데
2가지 방식으로 귀결되었다.
- 강의를 보고 간단하게 TIL로 요약, 내가 자세하게 다루고 싶은 내용 아티클로 작성
- 강의를 보면서 전체적인 내용 필기, 이후 TIL을 작성하면서 요약
전자는 내가 어느 정도 아는 주제에 대해 적용해 볼 만하고 후자는 처는 듣는 주제에 대해 학습할 때 적용해보면 좋을 것 같다.
그러나 이것도 아직 고민 단계일 뿐이다. 방식은 다양하고 나에게 맞는 방법을 찾을 때까지 계속 고민해 봐야겠다.
📘 오늘 학습한 내용
오늘 학습 내용은 함수형 패러다임으로 프로그래밍을 작성하기 위한 기초 개념과 재료들을 모으는 과정이다!
갓인동님 강의라 너무 알차고 재밌었다. 아래 내용은 극도록 압축한 내용이다.
자세한 내용은 따로 포스팅한 함수형 프로그래밍 정리 시리즈 를 참고하자.
평가
코드가 계산되어 값을 만드는 것
일급
- 값으로 다룰 수 있다.
- 변수에 담을 수 있다.
- 함수의 인자로 사용될 수 있다.
- 함수의 결과로 사용될 수 있다.
일급함수
- 함수를 값으로 다룰 수 있다.
- 함수가 일급이 때문에 조합성과 추상화의 도구로 함수를 잘 사용할 수 있다.
고차함수
함수를 값으로 다루는 함수
고차함수는 아래 2가지 유형으로 나뉜다.
-
함수를 인자로 받아서 실행하는 함수
-
함수를 만들어 리턴하는 함수 (클로저를 만들어 리턴하는 함수)
이터러블
배열, 유사배열, 이터러블
유사배열과 이터터러블은 서로 다른 개념이다.
유사배열이면서 이터러블일 수 있다. (eg. arguments, NodeList, HTMLCollection)
배열은 Array객체의 프로토타입을 따른다. 다양한 배열 내장메서드가 존재한다.
배열은 이터러블 프로토콜을 따른다. 따라서 배열은 이터러블이다.
유사 배열 객체는 마치 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있고, length 프로퍼티를 갖는 객체를 말한다. 하지만 배열처럼 내장메서드는 없다.
for...of,전개연산자,구조분해,나머지연산자사용이 불가능하다.이터러블은 이터러블 프로토콜을 따르는 객체를 말한다.
for...of,전개연산자,구조분해,나머지연산자는 이터러블 프로토콜을 따른다. 따라서 이터러블 객체는 앞서 말한 다양한 순회 기능을 사용할 수 있다.대소 관계를 나누자면 이터러블에 배열이 포함되어있고 유사배열은 별개이다.
제너레이터
- 이터레이터이자, 직관적으로 문장으로 이터러블을 생성하는 함수
함수형 프로그래밍을 위한 재료
go함수pipe함수curry함수- (
map,filter,reduce) +curry함수
이터러블 프로토콜을 따르는 map, filter, reduce 함수 필요성
map, filter, reduce 함수들을 매우 유용한 함수들이다. 하지만 배열에서만 사용할 수 있다.
map, filter, reduce 함수들을 이터러블 프로토콜을 따르게 구현하여 사용하면 개발할 때 유용하게 사용할 수 있다.
함수의 중첩 사용 go, pipe, curry
중첩된 함수를 직관적이고 편하게 사용하기 위해 go, pipe, curry을 구현해본다.
go
첫번째 인자에는 시작되는 값을 넣고 나머지 인자에는 함수들을 받아 값을 다음 함수로 넘기면서 차례대로 함수를 실행한다.
pipe
여러 함수들을 차례대로 합쳐서 하나의 함수를 리턴한다.
리턴 받은 함수를 활용하여 여러 함수를 차례대로 실행한다.
curry
인자가 원하는 갯수만큼 들어왔을 때 받아온 함수를 실행한다.
인자가 원하는 갯수 이하일 때는 받아온 함수를 대기 시킨다.
즉, 어떤 함수가 원하는 갯수가 될때까지 대시키도록 만드는 함수이다.
구현
// go 함수
const go = (...args) => reduce((a, f) => f(a), args);
// pipe 함수
const pipe =
(f, ...fs) =>
(...as) =>
go(f(...as), ...fs);
// curry
const curry =
f =>
(a, ...agrs) =>
agrs.length ? f(a, ...agrs) : (...agrs) => f(a, ...agrs);
// map + curry
const map = curry((f, iter) => {
const res = [];
for (const el of iter) {
res.push(f(el));
}
return res;
});
// filter + curry
const filter = curry((f, iter) => {
let res = [];
for (const a of iter) {
if (f(a)) res.push(a);
}
return res;
});
// reduce + curry
const reduce = curry((f, acc, iter) => {
if (!iter) {
iter = acc[Symbol.iterator]();
acc = iter.next().value;
}
for (const a of iter) {
acc = f(acc, a);
}
return acc;
});💬 comment
사실 유인동님의 함수형 프로그래밍 강의는 이전에 학습했던 경험이 있다.
당시에는 함수형 프로그래밍에 대해 필요한 상황을 느껴보지 못했던 극도의 초보시절이어서 내가 이렇게까지 구현해서 쓸일이 있을까?? 생각이 들었었다.
하지만 지금와서 다시 학습을 해보니 함수형 프로그래밍 이건 진짜다. 😃
강의를 2배속을 들을수 없어서 매우 슬프지만 다시 학습하는 함수형 프로그래밍은 너무나 허니버터칩🍯이다.
