동기식처리(Synchronous)
자바스크립트의 실행은 동기식 처리로,
동기식 처리란 한 번에 코드 한 줄씩 차례차례 실행된다는 의미다.
웹브라우저는 stack이라는 코드 실행 공간이 있는데 stack에서 코드를 한 줄 한 줄 차례로 실행한다.
console.log(1);
console.log(2);
console.log(3);
// 1
// 2
// 3위 코드는 1, 2, 3이 차례로 출력 되는데 이를 동기적이다 라고 할 수 있다.
비동기처리(Asynchronous)
console.log(1);
setTimeout(function(){}, 1000);
console.log(2);1과 2가 동시에 콘솔창에 출력된다.
setTimeout() 이라는 함수는 실행까지 의도만큼의 시간이 걸리도록 하는 함수인데 브라우저는 이러한 코드들을 제쳐두고 다르 코드부터 실행한다.
실행이 오래 걸리는 코드들은 잠시 대기하고 바로 실행이 가능한 코드들부터 처리하는 방식으로 이러한 처리방식을 ‘비동기’라고 한다.
(JS 언어 자체의 기능이 아니라 JS를 실행하는 웹브라우저 덕분이다.)
Web API 대기실
실행을 미루고 잠시 대기되는 코드들은 정해져 있다.
setTimeout(), addEvenListener(), ajax 관련 함수들.
이런 코드들의 특징은 읽는 시점과 동작 시점이 차이가 있다.
console.log(1);
setTimeout(function(){}, 1000);
console.log(2);가령 크롬은 위의 코드를 읽다가 setTimeout() 를 만나면 Wep API 대기실로 옮겨 대기시킨다.
그리고 1초의 대기시간이 지나고 setTimeout이 완료가 되면 대기실에서 코드를 꺼내서 실행되게 만들어준다.
콜백함수를 이용한 순차적 실행
자바스크립트는 비동기상황 등에서 코드를 순차적으로 실행하고 싶을 때 콜백함수를 적극 활용한다.
function 첫째함수(){
console.log(1)
}
function 둘째함수(){
console.log(2)
}
첫째함수();
둘째함수();파이썬과 같은 언어로 코드를 짠다면 위와 같은 방법으로 코드를 짜는게 맞는 방법이다.
하지만 자바스크립트는 비동기라는 특수성으로 인해 순차적으로 실행하는걸 보장하지 않는다.
function 첫째함수(콜백){
console.log(1);
콜백();
}
function 둘째함수(){
console.log(2)
}
첫째함수(둘째함수);콜백함수를 만들어서 첫째함수(둘째함수); 와 같은 방식으로 실행 한다면 순차적으로 실행할 수 있을 것이다,
순차적으로 실행하기 위해 콜백함수를 사용하면 단점이 있는데
첫째함수(function(){
둘째함수(function(){
셋째함수(function(){
어쩌구..
});
});
}):첫째함수, 둘째함수, 셋째함수 … 이렇게 사용하다보면 옆으로 길어져 보기싫은 난잡한 코드가 된다.
이를 위해 콜백함수 대신 Promise 디자인 패턴을 적용하면 된다.
첫째함수().then(function(){
그 담에 실행할거
}).then(function(){
그 담에 실행할거
});