Javascript와 JQuery 코드의 실행순서(동기, 비동기)

동기 방식의 예제

아무런 내장 메소드를 사용하지 않고 그냥 순수한 언어만으로 작성하면 순차적인 결과가 보장되며,

앞의 실행이 끝나야 다음 라인이 실행될 수 있는 방식이다.

<script type="text/javascript">

	var total = buy_products("도리토스", 1000, 3);
	pay(total);
	
	function buy_products(item, price, quantity){
		console.log(item + " " + quantity + "개를 점원에게 주었습니다." );
		console.log("계산이 필요합니다.");
		var total = price * quantity;
		return total;
	}
	
	function pay(total){
		console.log(total + "원을 지불하였습니다.");
	}
	
</script>

비동기 방식의 예제

점원이 계산을 하는 동안 시간이 소요된다는 것을 가정하여 setTimeout() 메소드를 사용해보았다.

실행결과를 보면 undefined 가 출력되는데,

이 이유는 여기서 사용한 setTimeout() 메소드가 순차적인 흐름을 보장하지 않는 비동기 메소드이기 때문이다.

이런 메소드들의 특징은 해당 메소드를 만나게 되면,

그 메소드를 호출한 직후(메소드의 실행이 끝나지 않았더라도) 바로 다음 구문을 실행하는 것이다.

JQuery에서는 $.getJSON(), $.ajax() 메소드들이 이러한 방식으로 동작한다.

<script type="text/javascript">

	var total = buy_products("도리토스", 1000, 3);
	pay(total);
	
	function buy_products(item, price, quantity){
		console.log(item + " " + quantity + "개를 점원에게 주었습니다." );
		
		setTimeout(function(){
			console.log("계산이 필요합니다.");
			var total = price * quantity;
			return total;
		});
	}
	
	function pay(total){
		console.log(total + "원을 지불하였습니다.");
	}
	
</script>

비동기 방식으로 동작하는 것을 순차적으로 처리되게 하기 위한 방법

1. 콜백함수 이용

2. Promise