callback function(콜백 함수)란??

참고로, 이 글은 인프런, Javascript 핵심 개념 알아보기 - JS Flow, 정재남 강의를 보고서 정리한 내용입니다.

 

오늘 콜백 함수에 대해서 알아보자!

오늘도 콜백 함수를 정복하러 가보자!

💪😎💪😎💪😎💪😎💪😎💪😎💪😎

 

출처: pixabay.com/images/id -60527/

 

---

 

키워드 의미 살펴보기

Callback function의 단어로 분리해서 해석해보면 아래와 같이 해석할 수 있을 것 같다.

call back function: 호출해서 돌려줄 함수

 

콜백 함수의 뉘앙스 살펴보기

A: 이 함수를 호출해서 그 결과를 나한테 알려줘.
B: 걱정마. 내가 알아서 처리하고 알려줄게.

 

대화를 보게 되면, 함수를 넘기고자 하는 대상에게 제어권을 맡기는 걸 인지할 수 있다. 

 

 

이와 같은 제어권에는 여러가지가 있다.

0. 실행 시점

 

setInterval은 콜백 함수를 1초에 한 번씩 실행시키는 녀석. 제어권을 setInterval에게 넘겼다. 

 

 

 

1. 인자

forEach에는 정해진 규칙이 있어서 그 규칙을 따르지 않으면 forEach를 원하는 대로 사용할 수 없다.

만약에 임의로 value와 index의 위치를 바꾸고 싶어 바꿔 썼다고 해도 실제로 바뀌는 건 인자명뿐이다. 

즉, 인자에 대한 제어권은 우리에게 없다!

위 코드의 실행 결과

 

 

 

2. this

this 설명 할 때에 보았던 코드다.

this는 DOM 엘리먼트가 찍힌다. 근데 x가 MouseEvent가 나오는 이유가 무엇일까?

그건 바로 eventListener가 그렇게 정의했기 때문이다!

 

eventListener가 콜백 함수를 받을 때, this는 이벤트가 발생한 타깃이 되는 엘리먼트로 하고, 첫 번째 인자로 넘겨줄 것은 그 이벤트 자체 객체를 넘겨주겠다고 정의한 것이다.

 

(참고, listener를 콜백 함수 위치라고 생각하면 된다)

즉, this 키워드에 대한 제어권이 정해져 있는걸 확인할 수 있다.

 

 

콜백 함수의 특징

• 다른 함수(A) 의 인자로 콜백 함수(B)를 전달하면, A가 B의 제어권을 갖게 된다.
• 특별한 요청(bind)이 없는 한, A에 미리 정해 놓은 방식에 따라 B를 호출한다.
• 미리 정해놓은 방식이란, 어떤 시점에 콜백을 호출할지, 인자에는 어떤 값을 지정할지, this에 무엇을 바인딩할지 등이다. 

 

주의할 점!

콜백은 '함수'다.

콜백 메소드가 아니다!

 

obj.logValues(1, 2)는 메서드로 호출하여 [1, 2, 3]과 1, 2를 출력할 것이다.

 

그렇다면, arr.forEach(obj.logValues)는 어떻게 될까?

=> obj.logValues도 메서드로 호출했으니, this는 obj가 될 것 같다. 하지만, obj.logValues를 호출한 게 아니라 콜백 함수으로서 전달한 것이기 때문에 이건 콜백 함수로 넘긴 꼴이 된다.

 

 

결국, 우리가 원하는 this의 값을 얻지 못하고, this는 전역객체를 가리키게 된다. 

 

 

그럼 obj를 지정하고 싶으면 어떻게 할까?

=> forEach에 넘겨줄 때, 바인드를 넘겨주거나(.bind(obj)) 두 번째 인자로 this.args로  obj를 지정해주면 된다.

 

 

 

이상으로 콜백 함수에 대해서 알아보았다!

질문이나 잘못된 부분이 있으면 피드백 주시면 소통할 준비가 되어 있습니다 :))