callback funtion

callback 함수는 말그대로 나중에 실행하는 함수이다

 

main.js

console.log(0);
setTimeout(funtion(){
	console.log('hello');
    },0);
console.log(1);

setTimeout를 딜레이를 0초로 두고 실행시켜 보자.

동기적(순차적, 내 코드가 다 끝나야 뒤로 넘어갈 수 있음 )으로 

0

hello

1이 나올 것이라고 생각하지만

실제로는

0

1

hello 이렇게 비동기적으로 실행되는 것을 확인할 수 있을 것이다.

Q와 Stack이 있으면

1. main.js가 Q에 들어있다가 Stack으로 이동 후 실행 ( 다 끝날 때까지 안사라짐 )

2. console.log(0)이라는 스택이 생기고 실행 후 스택에서 사라짐

3. setTimeout이라는 스택이 생기고 실행 ( 0초 뒤에 콜백함수를 Q에 넣어라 0초뒤에 콜백함수를 실행해라가 아님 !!!)  후 스택에서 사라짐

4.  console.log(1)이라는 스택이 생기고 실행 후 스택에서 사라짐5.  main함수가 다 끝나니까 스택에서 main사라짐6. 그다음 Q에 들어있는 콜백함수를 스택에 생성!7. 콜백함수에 들어있던ㄷ게 뭐냐? console.log('hello')이라는 스택이 생기고 실행 후 스택에서 사라짐8. 콜백함수 실행 끝났으니 스택에서 사라짐

 

setTimeout이라는 함수가 서버 외부에서 즉 브라우저에서 실행되는 함수이기 때문에 외부에 콜백을 넘긴다면

바로 콜스택에서 실행되는 것이 아니라 Q에 들어가게 된다. 똑같은 다른 예가 button의 onClick도 이것과 같음

dOM에다가 넣는것(setTimeout처럼 자바스크립트 내부에 있는것이 아니라 외부에 있음) DOM에 있는 특정 버튼에 콜백을 연결해준거고 버튼을 클릭하게 되면 그 콜백함수를 집어 넣는 곳이 Q이다.

바로 자바스크립트에서 실행 시킬 수 있냐 없냐에 따라 비동기 동기로 나누는 것이다.