우선 자바스크립트는 동기식 언어이다
hoisting이 된 순간부터 순서대로
차근차근 실행되는 동기식 언어이다
그럼 hoisting이 무엇일까?
var, function declaration 이런 선언들이 제일 위로 올라가는 것이다
코드가 나타나는 순서대로 실행된다는 의미
그렇다면 async 는 비동기인데 이게 무엇일까?
언제 실행될지 모르는 순서가 일정하지 않다는 것일까?
setTimeout이라는 브라우저 api가 있는데
우리가 지정한 시간이 지나면 우리가 지정한 콜백함수를 보내는 것인데
우리가 전달한 함수를 띄어줘라 라는 것으로
timeHandler라는 함수를 보내줘서 어느정도 시간뒤에 보여줄건지 지정할 수 있다
비동기는 즉 콜백함수를 지정할 수 있다는 것이다
비동기적인 실행방법을 예로들면
이렇게 만들어볼 수 있는데
console.log(1)
console.log(2)
console.log(3)
이렇게 3개를 작성하고 실행하면 콘솔창에는
당연하게도
1
2
3
이렇게 순서대로 출력이 될 것이다
하지만 앞서 설명한 setTimeout을 사용해서 1초뒤에 출력되도록 걸어준다면?
console.log('1');
setTimeout(function(){
console.log('2);
},1000);
console.log('3');이렇게 작성해주면
1이 출력되고
1초뒤에 2를 출력하라고 브라우저에 요청을하고
기다리지않고 비동기니까
아래이있는 3을 먼저 출력하고
브라우저에서 1초가 지나면
2가 출력되어서
값은
1
2
3
에서
1
3
2
이런 순서로 출력된다 이게 비동기가 동작하는 원리이다
콜백은 말그대로 콜하고 백해달라는 의미로
Callback함수인데
브라우저에게 1초뒤에 알려줘 라고 콜하고
1초가 지나면 값을 백해달라고 하는 것이다
그래서 이런 함수들을 콜백함수라고 부른다
위에 function으로 콜백함수를 사용했는데 그것보다는
화살표함수로 사용하는게 더 효율적이므로
코드를 수정해서
console.log('1);
setTimeout(()=> console.log('2),1000);
console.log('3);이렇게 작성해주는게 훨씬 깔끔한 코드이다
그런데 콜백이라고해서 무조건 기다렸다가 처리하는 함수만 있는것이 아니다
즉각적으로 처리하는 함수와 기다렸다가 처리하는(Async)함수 2가지의 부류가 있다
그럼 즉각적으로 처리하는 함수부터 정리해보면
function printImmediately(print){
print();
}
printImmediately(()=>console.log('hello'));
console.log('1');
setTimeout(()=> console.log('2'),1000);
console.log('3');
function printImmediately(print){
print();
}
printImmediately(()=> console.log('hello'));
이렇게 작성해보면
자바스크립트가 동작하는 원리는
함수는 hoisting이됨으로
함수를 제일 먼저 위로 올리게 된다
그렇다면 자바스크립트에서는 아마 이런 순서로 동작했을 것이다
function printImmediately(print){
print();
}
console.log('1');
setTimeout(()=> console.log('2'),1000);
console.log('3');
printImmediately(()=> console.log('hello'));
처음에 펑션이 실행되고
바로 콘솔 1을 출력하고
브라우저에게 콜백함수를 통해 1초뒤에 값을 받겠다고 요청하고
곧바로 콘솔 3이 출력되고
hello라는 문자를 출력하고
1초가지나면 2가 출력된다
그래서 순서가
1
3
hello
2
이런 순서로 출력된다고 생각하면 된다
이번에는 비동기콜백을 알아보자
console.log('1');
setTimeout(()=> console.log('2'),1000);
console.log('3');
function printImmediately(print){
print();
}
printImmediately(()=> console.log('hello'));
function printWithDelay(print,timeout){
setTimeout(print,timeout);
}
printWithDelay(()=>console.log('async callback'),2000);
이렇게 출력해보면
결과값은
1
3
hello
2
async callback
이렇게 나오는데
자바스크립에서 동작하는 순서는
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이 출력
그다음 셋타임아웃 함수가 비동기로 1초뒤에 출력되도록 걸어두고
콘솔 3이 출력
그리고 hello라는 문자가 출력
마지막으로 2초뒤에 async callback문자 출력되도록 걸어두면
1초가 더 빨리 끝나니까
2가 찍히고
2초뒤에 async callback 이 출력되어서
순서가
1
3
hello
2
async callback
이런 순서로출력된다
이렇게 동기와 비동기의 차이를 알아봤다
