동기/비동기/콜백

• 콜백함수
  전달할 함수를 나중에 불러주는 것
  다른 코드에게 인자를 넘겨줌으로써 실행시점도 함께 위임한 함수

• 동기
  Javascript는 동기적 언어이다. 코드가 호이스팅된 이후부터 순차적으로 실행되는 것을 동기라고 한다. 호이스팅이란 코드가 실행될 때 변수,함수 선언문이 최상단으로 올라가는 것을 의미한다

• 비동기
  언제 코드가 실행될지 예측할 수 없는 상태를 비동기라고 한다.

동기 /비동기 예시

console.log('1'); //동기

setTimeout(() => {
    console.log('2');  //비동기
}, 1000);

console.log('3'); //동기
=>1
  3
  (1초뒤에) 2

• Javascript언어는 위에서부터 순차적으로 코드를 읽으면서 실행된다.
• 그러므로 console.log에 의해 1이 출력된다
• setTimeout은 브라우저 API이기 때문에 먼저 브라우저에게 요청한다.
• console.log에 의해 3이 출력되고 브라우저에게 응답을 받은 콜백함수는 지정한 시간에 값이 출력된다. 2

콜백 함수는 비동기만 있는 것이 아니라 동기도 있다

console.log('1'); //동기
setTimeout(() => {
    console.log('2');  //비동기
}, 1000);
console.log('3'); //동기
//동기적 콜백
function printImmediately(print){
    print();
}
// print라는 콜백을 받아서 바로 실행한다.
printImmediately(() => console.log('hello'))
//비동기적 콜백
function printWithDelay(print, timeout){
    setTimeout(print, timeout);
}
printWithDelay(() => {
    console.log('async callback')    
}, 2000);

코드실행 과정

호이스팅에 의해 함수 선언문이 최상단으로 온다.
function printImmediately(print){
    print();
}
function printWithDelay(print, timeout){
    setTimeout(print, timeout);
}

console.log('1'); //동기
setTimeout(() => {
    console.log('2');  //비동기
}, 1000);
console.log('3'); //동기

printImmediately(() => console.log('hello')) //동기
printWithDelay(() => {
    console.log('async callback')    //비동기
}, 2000);
=> 1
   3
   hello
   2
   async callback