콜백 함수 (Callback Function)
- 다른 함수의 실행이 끝나고 난 뒤에 실행이 되길 원하는 함수
function 일반함수(callback) {
callback()
}
function 콜백함수() {
console.log("콜백")
}
일반함수(콜백함수)
---------------
function getId(callback) {
settimeout(() => {
console.log("ID");
callback();
}, 500)
}
function getEmail(callback) {
settimeout(() => {
console.log("EMAIL");
callback();
}, 100)
}
function getPassword(callback) {
settimeout(() => {
console.log("PASSWORD");
}, 250)
}
getId(()=> getEmail(()=>getPassword()));
# Result #
# ID
# EMAIL
# PASSWORD
# setTimeout이 모두 다르지만, 콜백에 의해 순서대로 출력
------------콜백함수 (화살표 함수), setTimeout
콜백 지옥 (콜백 안의 콜백, 안의 콜백, ...)
리액트에서 api 페치할 때 콜백함수에서 결과값을 useState로 변수에 담아 사용하는 경우, 그 값을 useEffect로 감지해서 그 다음 처리를 해줘야 하나요?
tanstack-query
Promise는 왜 생겨났을까?
new Promise.all
Promise.race
Promise의 상태 : Pending / Fulfilled / Rejected
Promise의 처리기 : then() / catch / finally
const 프로미스객체 = new Promise((resolve, reject) => {
const 비동기작업결과 = 비동기함수()
if 비동기 처리결과 :
else :
}
)# Promise Factory 함수
function promiseSetTimeout (ms:number) {
const result = new Promise((resolve, reject)) => {
setTimeout(()=>{
resolve()
}, ms)
}
return result
}async, await은 Promise 개체를 사람이 다루기 쉽게 문법만 다르게 해주는 편의기능 = ( Syntax Sugar )
Syntax Sugar : 탬플릿 리터럴, 구조분해할당, 속성명 단축, 삼항조건 연산자
실제로 Javascript는 async, await을 Promise 객체로 처리함
- async function은 Promise 객체를 반환
- await 키워드는 async function 내부에서만 사용 가능
async function의 return 1 == Promise.resolve(1)
매크로 태스크 큐, 마이크로 태스크 큐의 차이 = 우선순위 (마이크로 태스크 큐가 더 우선시 된다)
마이크로 태스크 큐
- 1번 수행할 때 큐를 모두 비운다
-> 마이크로 태스크 큐가 모두 비워질 때 까지 다른 것을 할 수 없다. (콜 스택을 점유 중이라 사용할 수가 없다)
애니메이션 프레임 큐
- 매크로 태스크 큐와 마이크로 태스크 큐의 사이 정도 우선순위
- 브라우저 렌더링 역할
매크로 태스크 큐
- 1번 수행할 때 1개의 Task만 비운다
크롬 개발자도구에서 아래의 코드를 실행하면, 어떤 동작에도 반응을 보이지 않는다 !
= 마이크로 태스크 큐의 작업을 처리하는 중이기 때문에, rendering이 지연되는 것이 클릭이나 드래그 같은 상호작용에 반응하지 않는 것처럼 보이게 한다.
( 하지만 큐에 쌓여있는 상태로, for문이 종료되면 큐 안의 동작들이 순차적으로 실행된다 )
for (let i = 0; i < 10**7; i+=1) {
queueMicrotask(() => {})
}JavaScript의 일급 객체
함수의 인자값으로 함수를 전달 -> 불가능한 언어가 많음
JavaScript의 함수는 일급객체이다
= JavaScript는 일급함수를 가진다.
일급객체
다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체
조건
- 함수의 매개변수가 될 수 있어야 한다.
- 함수의 반호나 값이 될 수 있어야 한다.
- 명령문으로 할당할 수 있어야 한다.
- 동일하게 비교할 수 있어야 한다.
const 변수 = function () {
return
}
변수()일급 객체라서 할 수 있는 것 = 커링(currying)
const getInfomation = (name) => (phone) => (address) => `${name}, ${phone}, ${address}`
getInfomation('홍길동')('123456789')('경기도')++ 함수 선언문, 함수 표현문의 변수 호이스팅 여부
https://joshua1988.github.io/web-development/javascript/function-expressions-vs-declarations
