[우아한 테크러닝] 4회차 정리

🌟우아한 테크러닝 4회차

🎯promise

비동기 const x = 10; const y = x * 10; 동시실행 가능? -> 못함 왜? -> x가 할당되기 전이기 때문(dependency) == 변수적 의존성

const x = () => 10; const y = x() * 10; x값 확정순간은 y가 호출할때이므로 실행 가능 -> 지연호출

Promise는 지연과 비슷 두개의 함수를 전달하기위해 함수호출 const p = new Promise(funcion(resolve,reject){ //p안에서 어떤일이 일어나도 resolve(“1”);

//closuer 처럼 다른함수에 resolve삽입해두면
setTimeout(()=>{
    resolve("1")
},1000) 
//함수안에서 지연되어 호출됨

}) p.then(function(r){ console.log(r) //얘가 1이 됨 })

🎯generator

• yeild -> 프로미스 외에도 다양한 타입에서 사용가능

function* make(){ return 1; }

const i = make(); //메이크 호출 -> i에는 보통 1ㅇ이 들어오지만, generator을 쓰면 객체가 됨. 이 객체는 제너레이터 객체

함수는 인자를 받고 입력값을 받아 계산 한 뒤 값을 리턴 리턴이 없으면 프로시져 -> 값을 넘겨서 계산할 수 잇으므로 상태 못가짐

함수가 호출자한테 리턴을 여러번 할 수 있다면? == 함수가 호출될때 처음부터 시작하지않고 마지막 리턴지점부터 다시 시작한다면? == 코루틴

코루틴의 일부를 차용해서 제너레이터로 명명 계속 어떤 값을 생성해내므로..ㅇㅇ

let num = 1; function* makenumber(){ while(true){ //제너레이터 안의 리턴은 yeild == 함수를 끝내지않고 다시 돌아오겠다~ yeild num++; }

}

const i = makeNumber();

원래라면 무한루프니까 브라우저가 죽는데 제너레이터하면 안죽음 어떻게? 컴퓨터가 알아서 후루루룩 하는게 아니라 next메소드를 통해서 함수 실행 i가 제너레이터 객체를 넘겨받음 -> 이 안에 next라는 메소드가 있는데 얘를 통해 함수 실행 -> i.next() 실행시 객체를 넘김 -> 더이상 호출 불가하다면 next대신 done 이 옴

함수 바깥이랑 함수 내부랑 커뮤니케이션 하는 느낌으로 이해하면 좋을듯!

let num = 1; function* makenumber(){ while(true){ //제너레이터 안의 리턴은 yeild == 함수를 끝내지않고 다시 돌아오겠다~ yeild num++; }

}

const delay = ms => new Promise((resolve)=>seTimeout(resolve,ms));

//dealy(10)은 프로미스 객체를 반환하므로 then으로 받음(콜백함수 구조) delay(10).then()=>{ console.log(‘3초뒤’) }

//위의 방법 말고 이렇게 작성하면..? 바깥쪽에선 함수 내부를 제어하고 함수안에서는 비동기를 동기처럼 푸는 느낌.

function* main(){ yeild delay(3000); console.log(‘3초뒤’); }

//여기서 부터 지워보면 main이 동기처럼 보임. //넥스트가 담긴 객체가 리턴됨 const it = main(); //넥스트하면 프로미스 객체가 리턴됨 //프로미스 객체가 value 랑 done이 오는데 value만 취하겠다는 뜻 (구조분해할당) const {value} = it.next()

value.then(()=>{ //3초뒤에 콘솔로그 문자 출력 it.next(); })

🎯async

async function bar() async await -> 프로미스객체 있을때만 사용

async function* main(){ await delay(3000); console.log(‘3초뒤’); }

main();