[TIL]데브코스 프론트엔드 0816

hyojeong·2021년 8월 16일
0

데브코스

목록 보기
11/50
post-thumbnail

📚TIL

day9

Promise와 callback

  • Promise는 비동기 상황을 일급 값으로 다룬다는 점이 callback과 가장 큰 차이
  • callback함수는 실행 이후 사용이 불가능한데 Promise는 then을 통해 추가적으로 사용 가능
  • Promise 값으로 활용하기
const go1 = (a, f) => f(a);	//go1의 정상적 장동을 위해 f, a가 동기적이어야 함
const add5 = a => a + 5;
go1(10, add5);
//go1에 비동기적인 값을 넣었을 때 정상적으로 작동시키려면

const delay100 = a => new Promise(resolve =>
	setTimeout(() => resolve(a), 100)	//resolve로 데이터 전달
);

const go1 = (a, f) => a instanceof Promise ? a.then(f) : f(a);
//a가 Promise일 때 then을 이용해서 접근
const add5 = a => a+5;

console.log(go1(10, add5));
console.log(go1(delay100(10), add5));
// PromiseStatus : "resolved", Promisevalue : 15

모나드 관점에서의 Promise

  • 모나드 : 함수를 안전하게 합성하기 위한 개념
//박스 모나드
const g = a=> a + 1;
const f = a => a * a;

console.log(f(g()));	//NaN, 값이 들어있지 않다면 오류발생 가능성

[].map(g).map(f).forEach(r => console.log(r)); 
//박스에 인수가 없을 시 출력이 되지 않음(forEach가 실행되지 않음);
  • Promise를 통한 함수 합성 : Promise는 비동기 상황에서 연속적인 함수 합성을 안전하게 하는 모나드
//비동기적으로 일어나는 합성
new Promise(resolve =>
           setTimeout(() => resolve(7), 100)
           ).then(g).then(f).then(r => console.log(r));
// resolve를 통해 Promise의 값을 생성하여 then을 통해 합성

Promise.resolve().then(g).then(f).then(r => console.log(r));
//NaN, 프로미스는 값의 유무에 따른 안전한 합성이 아닌 
//비동기 상황에서의 안전한 합성을 위해 사용

Kleisli Composition관점에서의 Promise

  • Kleisli Composition/Arrow : 오류가 있을 수 있는 상황에서의 함수 합성을 안전하게 할 수 있는 규칙
f ㆍ g			//f와 g합성
f(g(x)) = f(g(x))	//x가 동일 할 때에 식이 항상 성립해야 하는데 
			//두번째엔 x가 pop된다면 오류가 날 수 있음
f(g(x)) = g(x)		//이런 예외상황에서 특정한 규칙을 통해 합성을 
			//안전하게 하여 수학적으로 이를 바라볼 수 있도록 하는 것
  • Promise를 통한 해결
var users = [
     { id : 1, name : 'aa' },
     { id : 2, name : 'bb' },
     { id : 3, name : 'cc' }
];

const getUserById = id => 
	find(u => u.id == id, users) || Promise.reject('id가 없습니다.');
//id가 있는지 찾은 후 없을 시 Promise reject를 반환

const f = ({name}) => name;
const g = getUserById;

const fg = id => Promise.resolve(id).then(g).then(f);

fg(2).then(console.log);	//bb
users.pop();
fg(3).then(console.log);	//id가 없습니다.

🌊하루를 마치며

프라미스가 단순히 callback 지옥에서 탈출하기 위해서가 아니라 정말 다양한 방식으로 사용된다는 것을 알게됐다. 공부하면 할수록 프라미스가 어떤 문제를 해결할 수 있을지 감이 잡히는 것 같다. 아직 프라미스와 관련한 강의가 많이 남아있어 또 어떤 식으로 사용될지 궁금하다!
내일부턴 VanillaJS를 배우는데 강의가 밀리지 않는(= 시간내에 잘 이해하는..) 일주일을 보낼 수 있었으면 좋겠다.

profile
Front-end Develop🥰

0개의 댓글