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

Callback!?

 

말 그대로 함수를 내부에서 부르는 것을 뜻합니다!

일단 함수를 한 번 같이 보시죠.

 

위와 같은 함수는 실행에 시간이 크게 걸릴 것이 없으므로

안정적으로 1, 2, 3번 함수 순서대로 출력이 될 것입니다.

그런데, 조금 더 안정적으로 순차적으로 실행을 시키고 싶다면!

 

 

이렇게 함수 내부에서 함수를 부를 수 있는 것인데요.

그러면 좀 더 안정적으로 순차적 실행을 보장 받을 수 있는겁니다.

저기 맨 왼쪽에 스파이더맨이 호다닥 밑으로 내려오는데,

저게 자바스크립트를 해석하는 Node 라고 생각하면 됩니다.

 

자바스크립트는 1 던져주고, 먼저 끝내는 애부터 출력을 하거든요.

그 어떤 변수가 있어도 순차적으로 실행하고 싶다면, 코드를 위처럼 부를 수가 있답니다.

시간이 걸리지 않는 애들이라 순서가 바뀔 일은 거의 없겠지요.. 한 줄 단위에서 순차적 실행합니다.

 

 

그런데, 인간의 욕심은 끝이 없어서 꼭 정의된 함수만 불러와야 돼?!

그 때 바로 정의해서 쓰면 안되나? 이런걸 원하게 됩니다.

그 때 그 때 다른 함수를 불러오고 싶어지는 것이죠. 

 

위 처럼 반드시 func2만 호출할 수 있고 하니까 사람들이 답답함을 느낍니다.

그래서 다른 방법을 자바스크립트에 넣자! 해서 CALLBACK을 넣게됩니다.

매개 변수로 값만 전달하는게 아니라, 함수를 전달 해보자는 아이디어가 나왔어요.

 

 

기존처럼 함수 내부에서 다른 함수를 호출하는 것 가능하고,

그때 그때 상황에 맞게 함수를 변경해서 호출하는 것도 가능하고,

호출하는 수준을 넘어 그 자리에서 바로 정의해서 사용하는 것도 가능하고,

즉! 다양한 것을 시도할 수 있게된 것 입니다.

 

상황에 따라서 다른 함수도 호출할 수 있게 되는 것 입니다.

훨씬 더 많은 기능을 수행할 수 있게 해주는 함수가 되었어요.

 

 

 

이렇게 func1 함수에서 func3 함수를 콜백으로 전달도 가능합니다.

아까는 불가능했는데 이제는 전달만 바꾸게 되면 찍힙니다.

 

 

이런 것도 가능합니다. func2 한테도 callback을 줍니다.

근데 좋은 구조는 아니고 코드 이렇게 짜면 욕 먹으니, 이렇게 짤 수도 있다 정도만 이해합니다.

 

 

이렇게도 볼 수 있습니다. 꼭 선언된 함수만 불러와야 하는건 아니죠.

그런데 이건 좀 코드 가독성 구리고, 함수 내부에 함수를 정의하는 것도 구리고,

한번만 쓰면 되는데, 굳이 함수 선언을 하는 것도 구립니다.

 

 

 

함수를 통으로 전달합니다. 그래서 익명함수를 직접 전달 합니다.

미리 선언된 함수를 불러오는게 아니라, 미리미리 정해서 사용합니다.

 

---

 

이번에는 콜백으로 결과 값을 한 번 전달해보겠습니다.

콜백은 함수이므로 함수의 인자로 결과 값을 전달할 수 있습니다.

 

 

 

callback의 특성을 보여주기 위해 setTimeout 걸어서 시간 이후에 값을 전달해도

무리 없이 전달 확인하는 것을 볼 수 있습니다. (setTimeout : 일정 시간 있다가 실행되는 함수임)

함수이기 때문에 인자로써 값을 전달하는게 포함됩니다.

 

 

지금까지 배운 콜백 개념 전부 사용한 코드 입니다. ↑

어떤 함수던 동기적으로 처리 가능한 코드까지 봤습니다.

 

예를 들어, 게임에서 때리고, 악! 하고, 피 따는게 때리는 행동보다 더 빨리 끝나면 안되니까

callback() 안에다 이런걸 넣는거라고 합니다. 순서가 중요한 것 입니다!

---

Callback + 익명함수

 

Callback은 즉시 만들어서 전달 가능합니다.

Callback 함수를 꼭 만들어서 전달할 필요는 없으며, 즉시 만들어서 전달이 가능합니다!

이럴 때는 익명 함수를 사용하죠. 그리고 상당히 많이 사용이 됩니다.

 

 

이런거 많이 본 구조이죠. 익명함수가 무엇인가를 실행하고 있습니다.

addEventListener / 구조는 비슷한 생각 입니다.

 

Back-End Server 만들었을 때 앞에 function 인데 표현 방법이 화살표일 뿐 입니다.

이 역시 익명함수가 전달되어 있지요.

 

 

express 에서도 인자 전달로 익명함수가 나오는 구조 입니다.

 

 

 

이렇게 콜백을 꽤나 알게 모르게 쓰고 있었답니다.

자바스크립트 기본적으로 매우 많이 사용되는 문법이라고 합니다!

 

 

 

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