동기/비동기와 콜백함수

자바스크립트는 동기식처리를 한다. 즉, 한번에 코드 한줄씩 차례대로 실행한다. (synchronous)

근데, 비동기(Asynchronous)라는 비동기식처리도 있다. 자바스크립트에선 setTimeout같은게 있다.

비동기식이란 오래걸리는 작업이 있으면 제껴두고 다른거부터 처리하는 방식을 뜻한다. 앞에서 배운 메모리얘기처럼 queue에 들어있다가 stack이 비게되면 stack으로 올라가기 떄문에 stack에 있는 모든 처리를 끝나고 하게 된다.

즉 자바스크립트는 오래걸리는 작업이 나타나면 계속 기다리는 언어가 아니라 웹의 특수성 때문에 잠깐 제껴두고 다른것부터하는 언어이다. 

 

그래서, 자바스크립트에서 순차적으로 실행하려면,

console.log(1);
setTimeout(()=>{
	console.log(2);
}1000);

이처럼 콜백함수를 사용한다. 콜백함수는 함수안에 함수가 들어가는 것을 부르며, function 또는 ()=>{} 둘 다 가능하며,

밖에서 만든 함수를 넣을 수 있다.

 

이제, 콜백함수를 이용한 함수 디자인을 해보자.

function 첫째함수() {

}
function 둘째함수() {

}

이렇게 있을 때, 첫째함수 다음에 둘째함수를 실행하고 싶으면,

첫째함수();
둘째함수();

이렇게 생각하면 아닐수도 있다. setTimeout같은게 있으면 이대로 실행이 안될 수 있다.

그래서,

첫째함수(둘째함수);
//function 첫째함수(구멍) {
//	console.log(1);
//	구멍();
//}
//function 둘째함수() {
//	console.log(2);
//}

이런 식으로, 콜백함수처럼 적어주면 된다. 그러면 1 2 이렇게 순차적으로 출력이 된다.

하지만 이건 비동기는 아니다. 그저 디자인 패턴일 뿐이다. 디자인 패턴이기에 콜백함수의 문제점이 생긴다.

첫째함수(function(){
	둘째함수(function(){
    
    	})
})

이렇게 지저분해진다. 그래서 쉽게 쓰기 위한게 Promise이다.