동기(Synchronous) 함수, 비동기(Asynchronous) 함수

일반적으로 코드덩어리가 실행될 때 위에서 아래로 순서대로 진행됩니다. 예를들어

function myFunc1() {
 console.log("myFunc1");
}

function myFunc2() {
 console.log("myFunc2");
}

myFunc1();
myFunc2();

위 코드가 실행되면 "myFunc1", "myFunc2"가 순서대로 출력이 됩니다. 이때 중요한 점은 myFunc2 함수는 myFunc1 함수의 실행이 완전히 끝날 때까지 기다렸다가 실행된다는 것입니다. 이처럼 함수의 실행이 완전히 끝나야 다음 코드가 진행되는 함수를 동기 함수라고 합니다. 

이전 함수가 완전히 끝나고 다음 함수가 실행되는 것이 당연한 것이 아닌가 하는 생각이 들 텐데요, 항상 이 방법이 최선인 것은 아닙니다.

라면을 요리하여 상차리는 것을 코딩한다고 생각해 봅시다.

function 라면_상차리기(){ 
  냄비에_물_끓이기();  //return 끓는 물이 든 냄비
  라면_봉지_뜯기(); // return 면발과 스프
  냄비에_라면_넣고_끓이기(); // return 익은 라면, 
  식탁에_그릇_수저_놓기(); // return 그릇과 수저가 준비된 식탁
  식탁에_라면_냄비_놓기(); // return 그릇, 수저, 익은 라면이 준비된 식탁
}

대충 이러한 순서가 될 수 있을 텐데, 모든 과정들이 동기함수라면 냄비에 물이 끓는 동안 아무것도 못하고 기다리게 됩니다.

물이 끓는 동안 미리 봉지도 뜯고, 식탁에 그릇과 수저도 미리 놓아놓으면 시간을 단축할 수 있을 텐데.. 이렇게 할 수 있는 방법이 있을까요? 이전 함수의 실행이 완전히 끝날 때까지 기다리지 않고 다음 코드를 먼저 진행시키는 함수를 비동기 함수라고 합니다.

비동기 함수의 예를 살펴봅시다.

function example(){

  console.log(1);

  setTimeout(function(){
    console.log(2);
  },1000);

  console.log(3);
}

setTimeout은 비동기 함수로 첫번째 인자로 실행될 함수를 전달받고, 두번째 인자로 밀리초(millisecond)를 받아 첫번째 인자로 받은 함수의 실행을 해당 밀리초만큼 지연시킵니다. 덕분에 위 함수를 실행하면 먼저 1, 3이 출력된 후 1초 후에 2가 출력되게 됩니다. 

비동기 함수는 위 라면 예제처럼 대기시간을 활용하여 전체 프로그램의 효율을 높이는 데 사용됩니다.

예를 들어, 데이터를 인터넷을 통해 다운로드하는 함수가 있고, 이 함수로  다섯 사이트에서 데이터를 다운로드하여 이것을 모두 화면에 출력하는 코드를 만든다고 합시다. 또한 각 사이트마다 접속 및 다운로드 속도가 1~2초정도 걸린다고 합시다.

- 만약 데이터를 다운로드하는 함수가 동기 함수라면:

  1. 첫번째 사이트로 데이터를 요청함-> 1~2초 기다림->다운로드됨
  2. 두번째 사이트로 데이터를 요청함-> 1~2초 기다림->다운로드됨
  3. ... 다섯번째 사이트까지 위 과정을 반복
  4. 데이터를 모아 화면에 출력

하는 과정으로 5초 이상이 걸릴 수 있습니다. 하지만 데이터를 다운로드하는 함수가 비동기 함수라면 다섯 사이트에 데이터 요청을 동시에 한 후, 데이터가 오는 순서대로 처리하여 동기 함수에 비해 속도가 훨씬 빨라지게 됩니다.

댓글

댓글쓰기

이 글에 댓글을 다시려면 SNS 계정으로 로그인하세요. 자세히 알아보기

UP