[Javascript] - 동기와 비동기 그리고 콜백함수

1. 동기와  비동기 

 

 

동기적 처리 

 

간단한 코드를 보면서  이해하도록  해보겠다 

 

console.log("1st");
 
console.log("2nd");
 
console.log("3rd");

//결과 1st
//     2nd
//     3rd

 

다음 코드를 실행 하면 모두의  예상대로  코드가 위에서 부터 순서대로 실행되므로  순차적으로  결과가  나오는 것을 알 수 있다  이게  동기적 처리다  동기적 처리란  요청과 그 결과가 동시에 일어난다  하지만 요청 처리 속도에 따라 응답을 바로 받을 수도 있고 기다려야 할 수도 있다. 프로그램은 응답이 완료될 때까지 프로그램이 정지(말 그대로 어플리케이션이 잠시 멈춤), 응답을 받고 나서야 진행된다 .

 

 

비동기적 처리 

 

비동기적 처리는 동기적 처리의 반대의  의미다   요청한 결과에 대해  바로 응답을 받지 않아도 된다 

 

console.log("1st");
 
setTimeout(()=>{
  console.log("2nd");
}, 0)
 
console.log("3rd");

 

여기 코드를 보자  그냥 보면  위에 코드와 마찬가지로  위에서 부터 순차적으로  결과가 나오겠거니 할 수도 있다 

하지만 막상  결과를 보면 

 

// 1st
// 3rd
// 2nd

 

2번째 줄 결과가  맨 마지막에 나오고  마지막 결과가  2번째줄에 나오는것을 알 수 있다  어떻게 된걸까?

바로  setTimeout() 메소드가  비동기적 API이기 때문이다 

 

1. 첫 번째 줄에서 console.log("1st"); 에서  1st를 출력한다  
2. 두번째 줄에서 setTimeout() 메소드를 만난다. 해당 메소드가 비동기적 메소드임을 파악하고, 이를 비동기를 처리하는 다른 프로그램에게 넘겨준다 
3. 넘겨준 다음  3rd를 출력한다 .
4. setTimeout() 메소드를 위임받아 처리한 프로그램은 비동기적 API를 제외한 다음의 코드가 모두 실행된 이후 콘솔에 2nd 를 찍는다.

 

비동기적 처리의 간단한 예시를 보았다   그렇다면  이러한  비동기적 처리를 하는 이유는 무엇일까 

가장 큰이유는 일단은  속도다  동기적 처리는  요청을 한 후, 요청이 끝날 때까지 무작정 대기를 해야 하지만 비동기 처리는  기능을 요청을 한후, 다른 작업을 하고 있다가  다른 코드 실행이 끝난 이후의 처리를 하면 되기 때문에  동기적 처리보다  속도가 빠르다는 장점이 있다  

 

 

2. 콜백함수란 ?

 

콜백 함수 (CallBack Function) 이란  무엇일까  일단  간단하게  줄여서 이야기 하면  자바스크립트에서 콜백함수란  나이름  그대로  나중에 실행되는 함수다   좀더  자세히 이야기 하면  자바스크립트에서  함수는 객체다  이 때문에  함수는 다른 함수의  인자로 쓰일 수도 있고  어떤 함수에 의해 return 될 수도 있다  이러한 함수를 고차 함수라고 부르고  인자로 넘겨지는 함수를 콜백 함수 라고 한다  자바스크립트의 비동기성을 표현하는 가장 일반적인 기법.
호출된 함수를 알려줘서 다른 프로그램이나 다른 모듈에서 함수를 호출하게 하는 방법.필요할 때 호출해서 쓰는 함수가 아니라 어떤 이벤트가 발생하면 사용자에게 알려주는 역할을 하고 특정 함수의 인자로 넘겨서 코드 내부에서 호출되는 함수이다 .  다음은 콜백함수의  예시다 

 

const Callback = function (callback) {
  console.log("Im callback");
  callback()
};
 
Callback(function(){console.log("this is callback")});

Callback 함수를  선언할 때 함수의 인자로 callback 이라는 매개변수를 정의했다 

이 callback 은 함수로, Callback() 이 실행되면 함수안에서 다시 실행된다 그리고 다음줄에서 Callback 함수를 실행할 때 그 인자로 익명함수를 주었다  해당 함수는 Callback 안에서 실행되어 "this is callback" 이라는 문자를 콘솔에 찍어준다