[Javascript ES6] 기초 문법 13. synchronous, asynchronous

 

 

 

synchronous, asynchronous

 

 

 

 

 

자바스크립트는 동기적으로 실행되는 언어이다. 동기적이라는 것은 쉽게 '순차적으로' 실행된다는 뜻이다. 만일 아래와 같은 코드가 있다면,

console.log(1)
console.log(2)
console.log(3)

순서대로 1 2 3 이라는 로그가 출력된다.

 

 

그러나 자바스크립트를 실행하는 웹브라우저는 비동기적으로 작동한다. 쉽게 말해 '오래 걸리는 작업은 제쳐두고, 빨리 걸리는 것부터 실행한다' 는 뜻이다. 이 [오래 걸리는 작업] 에는 setTimeout, addEventListener, ajax 함수 등이 있는데, 웹브라우저의 비동기적 특성 때문에 읽는 시점과 실행되는 시점에 차이가 있다. 아래의 코드를 실행한다고 가정해보자.

 

console.log(1)
setTimeout(2000);
console.log(3)

우리 생각에는 1을 출력한 뒤 2초를 쉬고 3을 출력할 것 같지만, 실제로 실행하면 중간에 2초를 쉬지 않고 1과 2가 동시에 출력된다. 웹브라우저가 setTimeout을 대기 상태로 걸어버린 것이다.

 

따라서 자바스크립트에서 명시적으로 순차적인 실행을 시켜주기 위해서는, 콜백 함수를 사용해야 한다. 콜백 함수란 '함수 안에 들어있는 함수'를 뜻한다. 아래와 같이 setTimeout에 2를 출력하라는 무명 함수 function을 적고, 2초를 쉬게 해 주었다.

<script>

    console.log(1)
    setTimeout(function(){console.log(2)},2000)
    console.log(3)
    
</script>

2초를 쉬고 2가 출력된다.

 

만일 어떤 첫번째 함수가 실행된 뒤에, 바로 두번째 함수가 실행되기를 원한다면 아래와 같이 작성해주면 된다.

function 첫번째함수(콜백함수){
  console.log('첫번째 함수');
  콜백함수();
}

function 두번째함수(){
  console.log('두번째 함수')
}

첫번째함수(두번째함수);

결과

 

그러나 이렇게 콜백 함수를 여러개 사용하면, 나중에는 콜백함수의 지옥에 갇히게 된다.

first(function(){
  second(function(){
    third(function(){
      ...
    });
  });
}):

 

이같은 콜백 지옥을 방지하기 위해, ES6에서는 Promise라는 새로운 문법을 제공한다.