비동기 처리란?

• 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성
• 서버로 데이터를 요청시, 서버가 언제 그 요청에 응답을 줄지 모르기에 기다리지 않고 다음 코드를 실행
• 비동기 처리가 아니라면 웹 실행 시 수십 분이 걸릴 것!

setTimeout()함수

setTimeout(function(),delay)
delay동안 함수 실행!

// 비동기이기 때문에 2 출력을 기다리는 게 아니라 3부터 출력된다.
            //setTimeout()
            console.log(1);
            setTimeout(() => {
                console.log(2);
            }, 2000);
            console.log(3);

결과 : 1 3 2

---

예제1.

<script>
   // 편의점에서 음료수를 사고 나오는 상황
            function goMart() {
                console.log('마트에서 어떤 음료를 살지 고민한다. ');
            }
            function pickDrink(callback) {
                setTimeout(() => {
                    console.log('고민끝');
                    product = '코카콜라';
                    price = 2000;
                    callback(product, price); //콜백함수로 pay함수 실행 pay 함수에 변수 대입
                }, 3000);
            }
            function pay(a, b) {
                console.log(`상품명 : ${a}, 가격 : ${b}`);
            }

            let product;
            let price;
  			goMart();
  			pickDrink();
  			pay(product, pirce);
</script>

*문제점

내가 선택한 음료수의 product, price가 pay에 들어가지 못한다.
왜냐면 pickDrink의 setTimeout()의 delay로 pay가 먼저 실행되기 때문이다.

---

이를 해결하기 위해 callback 함수를 배우자!

Callback 함수

• Javascript는 함수를 인자로 받고 다른 함수를 통해 반환될 수 있는데, 인자(매개변수)로 대입되는 함수
• 즉, 다른 함수가 실행을 끝낸 뒤 실행하는 함수
• 함수를 선언할 때는 parameter(인자, 매개변수)로 함수를 받아서 쓸 수 있다.

callback 함수의 필요성

• 비동기 방식으로 작성된 함수를 동기처리하기 위하여
  응답을 받은 이후 처리되어야 하는 종속적인 작업도 있을 수 있으므로 그에 대한 대응방법
  

callback 함수의 사용법

• 보통 함수를 선언한 뒤에 함수 타입 파라미터를 맨 마지막에 하나 더 선언해 주는 방식으로 정의

function mainFunc(param1, param2, callback){
  callback(result);
}
function callbackFunc(param){
  console.log("콜백함수 입니다.");
}
mainFunc(1,2,callbackFunc);

mainFunc안에 함수callbackFunc()를 callback안에 인자형태인 callbackFunc로 넣었다.
param1,param2 안에 1과 2를 각각 넣었다.
mainFunc() 안에 callback함수 타입 파라미터를 선언했다.

---

예제1의 해결법.

function goMart() {
     console.log('마트에서 어떤 음료를 살지 고민한다. ');
}
 function pickDrink(callback) {
     setTimeout(() => {
     console.log('고민끝');
     product = '코카콜라';
     price = 2000;
     callback(product, price); //콜백함수로 pay함수 실행 pay 함수에 변수 대입
     }, 3000);
 }
function pay(a, b) {
     console.log(`상품명 : ${a}, 가격 : ${b}`);
}

let product;
let price;

goMart();
pickDrink(pay);

pickDrink함수 안에 pay함수를 인자로 넣는다.
pay함수의 변수 a , b를 에 각각 product와 price를 넣어주도록 하면 delay 시간 3초 후에 pay함수가 실행된다.

---