23.04.27 자바스크립트 비동기 처리방식 -콜백함수

동기 처리 방식 : 프로그램 소스가 작성된 순서대로 처리를 하는 방식
비동기 처리 방식 : 프로그램 소스에 작성 순서와 상관 없이 처리를 할 수 있는 방식

 

자바스크립트는  동기 처리 방식(싱글스레드)!!
자바스크립트 실행 환경(Runtime)에서는 자바스크립트 엔진 자체가 제공하지 않는 일부 기능인 DOM 조작(콜백함수)이나 AJAX 같은 비동기 처리를 위한 web API를 제공

 

콜백함수 : 자바스크립트의 비동기 처리방식을 위한 필수요소!
AJAX : Asychronous Javascipt and Xml 비동기 자바스크립트

 

스레드 : 프로그램에서 어떠한 프로세를 실행하는 단위를 가리킴, 한번에 하나의 프로세스를 실행한다면, 단일 혹은 싱글 스레드. 한번에 여러개의 프로세스를 실행한다면 멀티 스레드

---

자바스크립트의 함수문을 실행하게 되면 동기방식으로 처리하게 된다.

 

   function displayA( ) {

      console.log("A");

   };

 

   function displayB( ) {

      setTimeout(() => {

         console.log("B");

      }, 2000);

   };

 

   function displayC( ) {

      console.log("C");

   };

   displayA( );

   displayB( );

   displayC( );

 

따라서 콜백함수를 사용하면 비동기 처리방식으로 사용 할 수 있다

 

   콜백함수 : 자바스크립트의 비동기 처리방식을 위한 필수요소! (멀티스레드의역할) *함수안에 인자값으로 들어가는 또다른 함수.

   function displayA( ) {

      console.log("A");

   };

 

   function displayB(callback) {

      setTimeout(( ) => {

         console.log("B");

         callback( );

      }, 2000);

   };

 

   function displayC( ) {

      console.log("C");

   };

   displayA( );

   displayB(displayC);

함수 displayB 가 실행됨과 동시에 콜백함수(displayC)도 함께 실행된다.

---

위와 같은 방식의 콜백함수 예제이다.

 

   function order(coffee, callback) {

      console.log(`${coffee} 주문접수`)

      setTimeout(( ) => {

         callback(coffee);

      }, 2000)

   }

 

   function display(result) {

      console.log(`${result} 준비완료`)

   }

   order("아메리카노", display);