- JavaScript is Synchronous
즉, 호이스팅이 된 이후부터 코드가 작성된 순서부터 실행된다 .
호이스팅(hoisting)이란 ??
var ,function 선언이 제일 위로 올라가는 것.
console.log(1)
console.log(1)
console.log(1)
-> 1, 2, 3, 순서 ''
자바스크립트의 비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미한다.
console.log(1)
setTimeout (function (){
console.log(2)},1000)
console.log(3)
동기적으로 작동한다면 console.log()에는 1이 찍히고 1초뒤에 2가 찍히고 3이 바로 찍힐것 같다.
그런데 실제 결과 값은 그렇지 않다 .
1, 3, 2 순서로 출력될 것이다.
즉, 1이 출력되고 3이 출력된 후에 1초뒤에 2가 출력이 된다.
const message = function() {
console.log("This message is shown after 3 seconds");
}
setTimeout(message, 3000);
이 message 함수는 setTimeout 함수가 3초뒤에 실행되고 나서 실행이 될 것 이다.
이렇게 콜백 함수를 사용하면 특정 로직이 끝났을 때 원하는 동작을 실행시킬 수 있다.
비동기 처리를 위해callback 함수를 연속해서 사용하다 보면 콜백지옥에 빠지게 될 것이다. 이러한 코드 구조는 가독성 측면에서도 좋지 않고, 코드 구조를 변경하거나 유지 보수하기에도 불편하다는 단점이 있다.
function parseValueDone(id) {
auth(id, authDone);
}
function authDone(result) {
display(result, displayDone);
}
function displayDone(text) {
console.log(text);
}
$.get('url', function(response) {
parseValue(response, parseValueDone);
});
이와 같은 패턴으로 함수를 구분해서 작성하면 개선할 수 있다. 하지만 Promise나 async,await을 사용하면 더 편하게 구현할 수 있다.
다음편에서 알아보도록 하자.