[Javascript] Callback

자바스크립트를 사용하다보면 콜백함수(Callback Function)라는 말을 자주 접한다.

 

이번 글에서 콜백함수는 무엇인지 정의를 확실하게 내리고

어떤 경우에 어떻게 사용하는 지 설명할 수 있도록 하는 데 목적을 가진다.

 

 

 

 

 

 

 

Callback이란 두가지만 기억하자.

 

1. 함수에 Parameter로 넘길 수 있는 함수.

2. 어떤 이벤트가 일어났을 때 일어나는 함수.

 

 

 

 

 

 

 

첫번째. 아래 코드를 보자

 

function test() {
	console.log("hello");
}

function print(params) {
	params()
}

print(test);

 

test라는 함수는 hello를 출력하는 함수고 가장 아래에서 print라는 함수를 실행하면서

파라미터로 test함수를 넘겨주었다. print함수 내부에서는 params라는 이름으로 함수를 넘겨받아 실행시켰다.

바로 사용하지않고 어딘가 넘겨서 사용하고 싶을 때 사용할 수 있는 함수.

이게 콜백함수다.

 

 

 

 

 

 

 

 

두 번째. EventListener 

 

document.getElementById("abc").addEventListener("click",function(){
        console.log("Clicked!!");
      })

id가 abc인 엘리먼트를 클릭하면 두번 째 인자에 있는 함수가 실행된다.

 

감시꾼을 붙여두긴 했지만 그 감시꾼은 사용자가 언제, 어디를 클릭할지 알 수 없다.

 

말이 어렵다.

자바스크립트를 찍먹이라도 해본 사람이라면 싱글스레드로 운영되는 것을 들어 보았을 것이다.

 

싱글스레드를 모른다면 자바스크립트는 직원이 한명인 회사라고 생각하자.

이 경우 모든 이벤트가 한번에 일어난다면 그 직원은 해당 일을 처리하기 위해서

다른 일들을 멈추어버리는 블로킹 현상이 일어난다.

 

이를 막기위해 자바스크립트는 기본적으로 비동기로 운영되기에 실행순서를 보장해주지 않는다.

(비동기를 모른다면 직원은 한명이지만 하청업체가 많아서 일을 맡겨버린다고 이해하자.)

 

 

결국 자바스크립트는 사용자가 언제 어디를 클릭할지 마냥 감시할 수는 없기때문에

브라우저에게 하청을 맡겨버린다.

 

그리고 브라우저한테

클릭이벤트가 생기면 나한테 보고해!

라고 주문을 넣어두고 다음 일을 하러간다.

 

이렇게 클릭 이벤트가 일어난 후 실행되는 함수가 콜백함수다.