#3 Syntax (3) - Callback quiz, Object
Callback
코드별 우선순위가 다르므로, 순서에 맞게 코드가 실행되려면 async, promise 를 이해해야 한다.
매우 중요!!!
- 실행순서
일반 코드 > Promise(micro) > setTimeOut(regular)
event loop은 stack이 비었을 때 실행된다.
message(callback) queue = microtask queue & regulartask queue
micro가 regular보다 먼저 실행된다. (우선순위 높음)
micro => promise, async
regular => setTimeOut
Warm-up Race
console.log("Horse A");
console.log("Horse B");
console.log("Horse C");
-> a - b - c (synchronous)
Race 1
setTimeout(() => console.log("Horse A"), 1000)
console.log("Horse B")
-> b - a
- 실행 순서
call stack에 setTimeout push
백그라운드 작업을 위해 web api로 전송
1000ms 지나면 작업 완료
callback queue로 이동
call stack에 b push
b 실행
event loop 가 call stack이 비었는지 확인 -> 비었다.
callback queue를 poll 하여 call stack에 push -> a 실행
Race 2
setTimeout(() => console.log("Horse A"), 0)
console.log("Horse B")
-> b - a
- 실행 순서
call stack에 setTimeout push
백그라운드 작업을 위해 web api로 전송
0ms 지나면 작업 완료
callback queue로 이동
call stack에 b push
b 실행
event loop 가 call stack이 비었는지 확인 -> 비었다.
callback queue를 poll 하여 call stack에 push -> a 실행
Race 3
setTimeout(() => console.log("Horse A"), 0);
wait60Seconds(); //some incredibly expensive synchronous computation
console.log("Horse B")
-> b - a
js에서 언제나 synchronous 작업이 우선이다. 이벤트 루프는 시간이 얼마나 걸리든 간에 스택에 푸시되는 동기 함수의 종ㄹ류가 있는 동안 비동기작업을 대기열에서 빼지 않는다.
- 실행 순서
call stack에 setTimeout push
백그라운드 작업을 위해 web api로 전송
0ms 지나면 작업 완료
callback queue로 이동
call stack에 wait60Seconds() push
wait() 실행 -> 60초 기다림
call stack에 b push
b 실행
event loop 가 call stack이 비었는지 확인 -> 비었다.
callback queue를 poll 하여 call stack에 push -> a 실행
Race 4
const asyncOperation = fetch('something.com');
asyncOperation.then((resolvedValue) => console.log("Horse A"));
console.log("Horse B")
-> b - a
- 실행 순서
fetch, .then -> Promise
call stack으로 push
web api로 전송
call stack에 b push
b 실행
event loop 가 call stack이 비었는지 확인 -> 비었다.
callback queue를 poll 하여 call stack에 push -> a 실행
Race 5
setTimeout(() => console.log("Horse A"), 0);
const promise = Promise.resolve();
promise.then(() => console.log("Horse B"));
console.log("Horse C")
-> c - b - a
- 실행 순서
call stack에 setTimeout push
백그라운드 작업을 위해 web api로 전송
0ms 지나면 작업 완료
callback queue로 이동
call stack에 promise push
백그라운드 작업을 위해 web api로 전송
callback queue로 이동
call stack에 c push
c 실행
event loop 가 call stack이 비었는지 확인 -> 비었다.
callback queue에서는 promise가 우선순위가 더 높아서 b를 poll 하여 call stack에 push -> b 실행
event loop 가 call stack이 비었는지 확인 -> 비었다.
callback queue에서는 남은 a를 poll 하여 call stack에 push -> a 실행
Race 6
setTimeout(() => console.log("Horse A"), 5)
const promise = new Promise((resolve) => {
setTimeout(() => resolve(), 10)
})
promise.then(() => console.log("Horse B"))
console.log("Horse C")
-> c - a - b
- 실행 순서
call stack에 setTimeout push
백그라운드 작업을 위해 web api로 전송
5ms 지나면 작업 완료
callback queue로 이동
call stack에 promise push
백그라운드 작업을 위해 web api로 전송
10ms 지나서 작업 완료
callback queue로 이동
call stack에 c push
c 실행
event loop 가 call stack이 비었는지 확인 -> 비었다.
callback queue에서는 a가 먼저 끝났기 때문에 a를 poll 하여 call stack에 push -> a 실행
event loop 가 call stack이 비었는지 확인 -> 비었다.
callback queue에서는 남은 b를 poll 하여 call stack에 push -> b 실행
The Final Race
setTimeout(() => console.log("Horse A"), 0);
const promise = fetch("someUrl") // takes 100ms
promise.then(x => console.log("Horse B"));
waitFor200ms();
console.log("Horse C");
-> c - b - a
- 실행 순서
call stack에 setTimeout push
백그라운드 작업을 위해 web api로 전송
0ms 지나면 작업 완료
callback queue로 이동
call stack에 promise push
백그라운드 작업을 위해 web api로 전송
100ms 지나서 작업 완료
callback queue로 이동
call stack에 wait() push
wait() 실행 -> 200ms 기다림
call stack에 c push
c 실행
event loop 가 call stack이 비었는지 확인 -> 비었다.
callback queue에서는 a와 b 모두 끝나서 우선순위가 높은 b를 poll 하여 call stack에 push -> b 실행
event loop 가 call stack이 비었는지 확인 -> 비었다.
callback queue에서는 남은 a를 poll 하여 call stack에 push -> a 실행
Bonus Race
async function someFn() {
const promise = new Promise((resolve, reject) => {
setTimeout(() => resolve("Horse A"), 1000)
});
let result = await promise;
console.log(result);
}
setTimeout(console.log("Horse B"), 0)
someFn();
console.log("Horse C");
-> b - c - a
- 실행 순서
call stack에 setTimeout push
0ms 지나면 바로 작업 완료 -> b 실행
백그라운드 작업을 위해 web api로 전송
callback queue로 이동
call stack에 someFn() push
promise -> 백그라운드 작업을 위해 web api로 전송
1000ms 지나서 작업 완료
callback queue로 이동
call stack에 c push
c 실행
event loop 가 call stack이 비었는지 확인 -> 비었다.
callback queue에서는 a를 poll 하여 call stack에 push -> a 실행
Object
constructor
하나의 객체로 봗 된다. 생성자도 인스턴스를 만들 수 있다.
function + 첫 글자 대문자
로 쓴다.
ex. function Todo() {}
this
일반적으로 최상위의 root(window)를 가리킨다.
window: js에서 쓰는 모든 기능이 들어있는 것. tree의 root
- 메소드 안에서 쓰이면 해당 객체를 가리킨다.
- 메소드 내에서 regular function (func hi(){}) 에서 사용하면 window를 가리킨다.
-> 객체를 가리키게 하려면?
- 다른 변수에 this를 지정하고 그 변수를 쓴다
- () => {} 를 쓴다.
Class
클래스 내의 메소드를 function
안적고 메소드명()
으로 적는다.
Inheritance
클래스명.prototype.함수이름
새 인스턴스를 만들면 해당 코드만 가리킨다. 인스턴스 안에 해당 코드가 각각 있는게 아니다. 공용의 코드를 가리켜서 사용한다. (동일 주소 공유)
Author And Source
이 문제에 관하여(#3 Syntax (3) - Callback quiz, Object), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ffwang/JS-2-Syntax-3-Object저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)