[Callback] 콜백함수 정의와 설명 (쉽게 이해하기)

 

 

정의 : 함수에 파라미터로 들어가는 함수

용도 : 순차적으로 실행하고 싶을 때 씀

 

 

 

setTimeout 이라는 이런 코드 안에서도 콜백 함수를 실행시킬 수 있습니다.

그럼 1초 경과 후에 sdfdsffd 저 긴 코드 실행시킬 수 있는 것입니다.

 

 

 

다른데서 만든 함수도 이런 식으로 콜백함수로 집어넣을 수 있습니다.

 

 

 

이렇게 함수명 작명할 수도 있구요.

 

 

 

콜백 함수를 아무렇게나 다 집어넣을 수 있는게 아니라,

콜백함수를 넣으라고 되어있는 그런 함수들만 이렇게 집어넣을 수 있습니다.

대표적으로 .addEventListener, setTimeout 이런 함수들이 있습니다.

 

---

 

 

콜백함수의 원리 같은 것이 궁금하실텐데요.

대체 어떤 식으로 코드를 짜야 함수를 이렇게 집어넣을 수 있는건지요.

 

 

 

그것은 그냥 쉽습니다. 함수에다가 파라미터로 뭔가를 집어 넣으면,

그 파라미터에다가 소괄호 붙여주세요 하고 코드를 짜면, 이게 콜백함수 만드는 법입니다.

지금 위와 같이 콜백함수 하나 만든 것입니다!

 

 

 

그럼 아래 first() 라는 함수 갖다 쓸 때,

괄호 안에다가 function(){} 이런 식으로 함수를 갖다 쓸 수 있습니다.

 

 

 

혹은 조금 더 보기 쉽게 first() 안에 다른데서 만든 함수도 이렇게 집어 넣을 수 있습니다.

그러면 그 함수가 실행이 됩니다. 그럼 first 안에 있는 함수 실행해 줄 것입니다.

 

"first 함수 안의 코드 실행해주세요. 근데 파라미터 자에 second 집어넣어서요." 라는 뜻입니다.

그럼 first 함수 안에 있는 코드를 실행해주겠지요.

 

 

 

근데, 파라미터에 () 이렇게 소괄호를 집어넣어 실행시켜줄 것입니다.

파라미터가 second이 되는 것이고, 그래서 위와 같은 second() 코드가 실행이 될 것입니다.

파라미터() = second()

 

 

 

그래서 콜백함수가 순차적으로 뭔가를 실행하고 싶을 때 쓰이는 함수잖아요.

순차적으로 뭔가 실행해주세요. 이런걸 만들고싶을 때,

콜백함수를 이런 식으로 디자인해놓으면 순차적으로 뭔가 실행해 줄 수 있겠지요.

 

first 라는 함수를 실행하고나서 그다음에 바로 second 라는 함수를 실행하고싶어요.

(console.log(1) → console.log(2) 이 순서대로 1, 2 출력하고 싶은 것임)

 

 

 

그럼 코드를 이렇게 짜면 됩니다. 콜백함수를 뚫어 넣는 것입니다. (파라미터 두 부분)

그다음에 first(second) 여기다가 이렇게 코드를 실행하면 되는 것입니다.

 

 

 

그런데 저 부분 first(second) 이게 무슨 뜻이냐 하면,

first() 라는 함수 실행시켜주세요. 그런데 이제 파라미터 자리에 second 집어 넣어서요. 라는 뜻입니다.

 

 

 

그러면 first 함수에 두 줄이 실행이 되겠지요.

console.log(1)

파라미터()

 

 

 

그런데 이제

첫번째 줄 ( console.log(1) ) 실행이 되고나서 그 다음줄로 ( 파라미터() ) 실행이 되겠지요.

이것은 아마 first(second) 에 있는 second가 파라미터 저 부분으로 쏙 바뀌어 실행이 될 것입니다.

(기존 자리에 있던 파라미터() => second() 으로 쏙 바뀌게 되는 것임)

 

 

 

그러면 이제 콘솔창에 출력해봤을 때 1, 2가 잘 나오게 됩니다.

이런 식으로 순차적 실행을 만들 수 있는 것입니다!

 

 

 

자, 이게 콜백함수 원리인데 잘 생각해보면 굳이 이렇게 쓸 이유가 있을까? 의문이 듭니다.

이렇게 굳이 안써도 순차적으로 실행할 수는 있잖아요.

 

예를 들어,

first()

second()

써도 순차적으로 1, 2 잘 실행이 되잖아요. (콜백함수 없이 이래도 결과는 같지요.)

자바스크립트는 무조건 위에서부터 한 줄, 한 줄 실행하기 때문에 그렇습니다.

 

 

 

그러면 굳이 이렇게 콜백 함수를 뚫어놓을 이유가 있는 것일까? 별로 없습니다.

근데 이런 것들을 쓸 때가 가끔 있어요. 예를 들어, 협업을 할 때 first 라는 함수를 하나 만들었다고 가정해봅시다.

근데 너무 유용해서 다른 사람들이 저 first 함수를 막 갖다 쓴다고 생각해봅시다.

 

 

 

근데 그 사람들이 first 함수 쓰다가, first 함수 실행하고나서 바로 console.log(2) 같은걸 실행하고 싶어진거에요.

또 어떤 사람은 first 함수 실행하고나서 바로 다음에 console.log(4)를 실행하고 싶은거에요.

 

 

 

그러고 싶을 때가 가끔 있다고 가정을 해보도록 해요.

그럴때 first() 쓰고 밑에 console.log(2) 쓰고 해도 순차적으로 실행이 되긴 되겠죠.

그런데 약간 불안하죠? 약간 불안해 보여요.

 

first() 라는게 항상 실행되고 나서 console.log(2)가 실행되지 않을 수도 있습니다.

가끔 가다 이게 비동기 처리가 되고 그러면 그럴 수 있는 것이죠.

 

 

 

그래서 뭔가 바로 코드를 실행하고 싶으면 first 함수를 약간 업그레이드 해놓으면 됩니다.

first() 안에 파라미터를 하나 추가하고, 파라미터() 해놓는 것입니다.

 

 

 

그러면 다른 사람들이 first 함수를 갖다 쓸 때마다 first(second) 이런 식으로 갖다 쓸 수가 있습니다.

first 함수 쓸 때 (second) 부분에다가 실행하고싶은 코드를 함수 형태로 같이 집어 넣는 것이죠.

그러면 무조건 파라미터() 부분에서 실행을 할 수 있겠죠. first 함수 console.log(1) 실행하고나서

무조건 여러분의 코드 파라미터() 를 그 밑에서 안정적으로 실행할 수 있는 것입니다!

 

그렇기 때문에 콜백함수를 쓰면 안정적으로 확실히 특정 코드를 순차적으로 실행할 수 있습니다.

그래서 남이 쓸 코드를 만들 때, 가끔 가다 등장하는게 콜백 함수라고 보면 됩니다.

* 그런데 콜백 함수를 너무 많이 쓰다 보면, 단점이 눈에 보일 수 있어요.

 

 

 

그 단점이 예를 들어, DB에서 데이터 뽑을 때인데 내가 자바스크립트를 이용해서 DB 데이터를 뽑을 수도 있잖아요.

그런데, 코드를 이런 식으로 짜고 싶은 것입니다.

DB에서 A데이터를 뽑고, 그 다음에 B데이터 뽑고, 그 다음에 C데이터 뽑고,

그런 식으로 코드를 짜고싶다. 그러면, 코드를 대충 위와 같은 식으로 짭니다. 

 

차례차례로 쓰고 싶어서 콜백 함수가 등장 하겠지요.

그런데 이렇게 되면 코드가 너무 우측으로 길어지고, 그런 문제들이 생길 수 있어서 이게 싫다! 하면 어쩔 수 없어요.

여러분들이 선택한 자바스크립트라 악으로 깡으로 버텨야지 별 수가 없습니다.

 

 

 

우측으로 길어지는 코드가 싫으면 여러분들이 콜백 함수로 이것을 디자인 해놓는게 아니라,

Promise를 뱉으라고 해서 디자인을 해놓으면 여러분들이 순차적인 코드 실행을 함수로 집어넣는 형태로

뭔가를 하는게 아니라, first().then() 뭐 이런 식으로 붙여가지고 코드를 순차적으로 실행할 수도 있답니다.

 

그런데 promise도 복잡해서 싫다면, async 혹은 await 키워드를 갖다 쓰셔도 순차적 실행을 구현해볼 수 있습니다.

이런걸 쓴다고 꼭 쉬워진다는게 아니라 에러 처리 하기 시작하면 또 복잡해집니다. 괄호가 없다는 것은 장점일 수 있습니다!

 

 

ref. https://youtu.be/-iZlNnTGotk

 

[Callback] 콜백함수에 대해 알아보기 (Callback + 익명함수)