[JavaScript] 콜백함수 (CallBack)가 도대체 뭐길래?

앞서 자바스크립트의 작동원리 및 비동기와 동기를 설명하면서

어떤 이유에서인지 실행하는데 시간이 걸리는 코드가 생기고 그래서 그걸 잠시 죽이는 비동기화를 진행하게 되면

아래의 코드가 먼저 실행이 되어서 순서가 꼬일 수 있다고 했다.

 

출력은 end 먼저 그리고 3

 

이제 그 순서를 꼬이지 않게 하기 위해 프로그래머가 임의로

아래의 코드 또한 비동기화시켜서 임시저장소로 보낼 수 있다고 했다.

 

그러면 어떻게 그게 가능할까?

바로 오늘 설명할 콜백함수를 이용하면 가능하다.

 

Call Back. 문자 그대로 돌아오라고 부르는 것이다. 

 

집나간집 나간 아들을 향해 "집으로 돌아와~!!!" 해서 집 나간 아들이 집에 다시 돌아온다면

그것이야 말로 콜백이다.

 

뜬금없이 무슨말인가?

 

비동기화가 진행되게 되면 코드가 임시저장소로 보내지고 그 코드는 거기서

컴퓨터가 모든 작업을 완료할까지 기다리게 된다.

그렇다면 아래의 코드도 같은 원리로 위 코드가 임시저장소로 보내질 때 같이 묶어서 보내버리면 그만이다.

 

어떻게?

 1. 아래 있던 코드를 지우고 비동기화된 코드 바로 아래에 옮겨 적는다.

같은 중괄호 안에서 실행된 비동기화된 코드이기 때문에 순차적으로 임시저장소로 보내진다.

 

혹은 

 

2. 지우진 않고 함수에 넣어서 호출하는 것이다. 그러면 마찬가지로 같이 임시저장소로 보내진다. 이것이 바로 콜백 함수의 원리이다.

 

 

아래 이미지는 atask라는 기존 비동기화 함수를 호출하면서 인자 값(전해주는 값)으로 함수 자체를 넣은 것이고 이 함수가 바로 콜백 함수가 되는 것이다.

 

atask에서 cb라는 임의의 이름으로 이 함수를 매개변수로 받아서 기존 코드 밑에 넣어두었기 때문에 임시저장소로 순차적으로 보내지며 순차적으로 다시 실행되게 된다. 고로, 결과는 3 이 먼저 나오고 그다음에 end가 나오는 것이다.

 

 

이렇게 되면 간단하게 호출을 해서 순서를 바꿀 수 있다. 혼자서 하는 코딩이면 몰라도 다른 사람과 협업을 하는데 남의 짜 놓은 코드를 맘대로 지우고 옮겨 적을 수는 없고 어떤 특정한 부분에서만 순서를 바꾸고 싶다 하면 이렇게 콜백 함수를 활용할 수 있다.