[Javascript] 콜백함수

0. 목차

1. 개요

2. 콜백함수란

 

1. 개요

setTimeout(() => {
  console.log('hello world');
}, 1000);

이 코드를 보자.

콜백함수에 대한 개념이 잡히기 전의 나는 이 코드를

1000ms 가 지난뒤에, 에로우 펑션 안의 코드를 실행한다.

라고 이해했다.

setTimeout(()=>{
	// delaytime 이후 실행될 코드
},delaytime)

라고 그냥 통째로 무지성으로 외웠다.

콜백펑션이 뭔지 정확히 알지 못했으니까,

 

addEventListener 역시 마찬가지다.

elem.addEventListener(('click'),()=>{
    //elem이 클릭 됐을때 실행될 코드
})

라고 그냥 통째로 머릿속에 집어넣고 외웠다.

 

사실, 코드를 짤때는 이렇게 이해해도 크게 무리는 없었다.

조금 헷갈리면 일단 찍어보고 아 맞다 하면서 수정하니까..

 

근데 문제는 다른 사람이 짠 코드를 볼때, 특히 우리집 시니어가 짠 코드를 볼때,

이게 뭔데.. 왜 내가 아는 애랑 다르게 생겼는데.. 왜 다른데 왜 똑같이 작동하는데..

라고 항상 생각했었는데

 

마찬가지로 콜백펑션에 대한 개념이 부족했기 때문이었다.

 

2. 콜백함수

콜백함수란,

다른 함수의 인자로써 사용되고, 특정 이벤트가 발생했을시 호출되는 함수를 칭한다.

 

함수가 다른 함수로 인자로 사용된다는 말 부터 조금 난해하다.

텍스트가 어려울 땐 코드를 보자.

 

function fn(param) {
  param();
}

function test() {
  console.log('hello world'); // hello world
}

fn(test);

fn 함수를 호출 할때 인자에 test 함수를 넣었다.

 

fn 함수가 호출되고,

fn 함수가 실행되면서, 매개변수인 param은 test 함수를 받고,

test함수가 실행된다.

 

위의 코드가 함수가 다른 함수의 인자로써 사용된 경우이다.

 

아 그럼 어느정도 이해가 됐다.

 

그럼 특정 이벤트가 발생했을 시 호출 된다는 건 무슨뜻일까.

 

만만한게 setTimeout 이지...

 

MDN에서 긁어온 setTimeout의 구문이다.

생긴걸 잘보면, setTimeout이란 함수를 호출하는데,

첫번째 인자에는 함수가, 두번째 인자에는 delay가 들어간다고 되어있다.

즉, setTimeout 함수는

다른 함수의 인자로 사용되며, 특정이벤트(이 경우에는 delay 시간이 지난 후)가 일어나면 호출되는 함수

즉, 콜백함수가 첫번째 인자로 사용되는 함수다.

 

이걸 이해하니 맨위에서 봤던 코드가 좀 다르게 보인다.

setTimeout(() => {
  console.log('hello world');
}, 1000);

 

이 코드에서 첫번째 인자로 사용되는 에로우펑션이 저렇게 고정되어있는 것이아니라,

 

function print() {
  console.log('hello World');
}

setTimeout(print, 1000);

 

이런 식으로도 사용이 가능하다는 점.

 

이해를 하고 나니까 오히려 너무 당연한것처럼 느껴져서

어떻게 설명을 해야될지 모르겠다....

왜 이제까지 이걸 이해하려는 걸 포기했었을까...

 

이제껏

콜백펑션 = 콜백지옥 = 비동기처리 = promise = 아직 내가 이해할 수 있는 영역 아님...

이라는 공식아닌 공식이 머릿속에 틀어 박혀있어서,

콜백펑션만 나왔다 하면 몰라 그거 어려운거 아님?

하고 무식하게 통째로 외우고 다녔는데,

한 챕터 깬듯한 느낌이다.

역시 어줍잖게 아는게 제일 위험하다...