자바스크립트 동작원리 with callback function

콜백함수

---

개념?

콜백함수는 간단하게 다른 함수에 매개변수로 넘겨준 함수를 말한다.

매개변수로 넘겨받은 함수는 일단 넘겨받고, 때가 되면 나중에 호출(called back)한다는 것이 콜백함수의 개념이다.

 

 

예시

 

function checkGang(count, link, good) {
  count < 3 ? link() : good();
}

function linkGang() {
  console.log('1일 3깡은 기본입니다. 아래 링크를 통해 깡을 시청해주세요');
  console.log('https://youtu.be/xqFvYsy4wE4');
}

function goodGang() {
  console.log('오늘 할당량은 모두 채우셨습니다! :)')
}

checkGang(2, linkGang, goodGang);

 

checkGang함수를 실행할 때 2라는 데이터가 들어왔고 이는 count보다 3이 작기 때문에 link() 함수를 실행하게 된다.

 

쉽게 말해 필요할 때 쓰고 싶어서 저장한 함수?? 라고 생각하면 된다. 

 

예시2

 

function add(a, b) {
  return a + b;
}

function sayResult(value) {
  console.log(value);
}

sayResult(add(3, 4));

이를 콜백함수로 바꾸면??

   목적

      더하는 함수를 쓰고 싶다. 근데 여기에 callback 넣으면 새로운 함수로 데이터를 가공할 수가 있다. 단순히 더하는 함수가 아니라 더하          는 함수를 출력하는 함수로!!! 새로운 함수를 활용하고 싶을 때 사용하면 좋다. 

 

 

function add(a,b,callback){


    return callback(a+b)


}


function result(value){


    return console.log(value)

}
undefined
add(3,5,result)
VM2081:13 8

 

 

 

자바스크립트의 구조

---

자바스크립트의 처리방식은 크게 콜스택이라는 메모리에서 함수들을 받아서 스택 방식으로 처리하는 구조입니다. 예를들어 메인함수가 들

 

어오고 console.log가 들어오면 차례차례 들어오고 데이터가 하나씩 처리될 때마다 사라지는 구조라고 볼 수 있습니다. (ex 1. 메인, 콘솔

 

콘솔 메인 종료)

 

그런데 여기서 문제는 자바스크립트가 단일 Thread이기 때문에 한 번에 같은 일을 처리할 수가 없는거죠. 이래서 나온게 비동기적 방식을

 

따와서 새롭게 처리하려고 합니다. 특히 web API인 DOM AJAX setTimeOut 인 일급객체의 함수를 사용하여 window element

 

webGL과 같은 일급 객체를 자바스크립트가 통제하기 위해서 여기서 우리는 eventQ eventLoop라는 공간을 활용합니다.

 

eventQ eventLoop 

---

eventQ에서 webAPI는 콜백함수로 넣어져있습니다. 이 때 만약 스택이 빈다면 eventLoop로 들어가 while문이 돌면서 스택에 push하게 됩니다.

 

예제

---

setTimeout(()=>{


    return console.log("비동기적 처리입니다")

},0)


console.log("단순 콜스택 처리입니다")

VM951:9 단순 콜스택 처리입니다
undefined
VM951:4 비동기적 처리입니다

결론

---

아무리 0초 단위로 함수를 실행한다고 해도 우리가 생각하는 바로 실행하는 것이 아닙니다. 당연히 콜스택에 먼저 들어가 있는 setTimeout함수가 실행이 되지만  콜백함수를 부르면서 바로 종료가 됩니다. 이 콜백함수는 이벤트큐에 들어가게 되구요. 그러는 사이  console.log 함수가 먼저 실행되고 스택에 아무것도 없게 되면 setTimeout 함수의 콜백함수가 이벤트 루프를 통해 콜스택에서 실행이 됩니다.

 

 

조감도

---

   비동기가 처리되는 과정을 살펴보자.

1. 우선 버튼 클릭과 같은 이벤트가 발생하면
2. DOM 이벤트, http 요청, setTimeout 등과 같은 비동기 함수는 C++로 구현된 web API를 호출한다. 예를 들어 setTimeout의 경우, 스택에 쌓이게 되면 콜백 함수를 실행시키고 콜스택에서 사라진다.
3. web API는 콜백 함수를 이벤트 큐(콜백 큐)에 밀어넣는다. 이때 web API는 함수의 실행 순서와 상관없이 끝난 순서대로 이벤트 큐에 넣는다. setTimeout의 지연 시간이 빠른순대로 넘어간다고 생각하면 된다.
4. 그럼 이벤트 큐는 대기하다가 스택이 텅 비는 시점에 이벤트 루프를 돌리게 된다(콜스택에 넣음). 이벤트 루프의 기본 역할은 큐와 스택, 두 부분을 지켜보다가 스택이 비는 시점에 콜백을 실행시켜 주는 것.

출저

 

https://seonghui.github.io/TIL/docs/javascript/javascript-1/how-does-javascript-work.html#%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%97%94%EC%A7%84%EA%B3%BC-web-api