Javascript callback Function이론

callback Function

 

 

call 호출하다. back은 다시 돌려주다. 라고 생각하면 이해하기 쉽다. 즉 콜백 함수는 호출해서 나한테 돌려줄 함수라고 말할 수있다.

콜백 함수는 함수를 일단 따로 전달하고 호출해서 그 결과를 따로 다시 돌려주라는 의미이다. 주고받는다는 의미이기도 하다. 즉 함수 제어권을 맡긴다는 것이다.

 

 

 

 

 

 

 

 

 

제어권 => 실행 시점

 

 

• 위 코드는 setInterval이라는 메소드의 첫 번째 인자로 콜백 함수가 들어있다. 콜백 함수가 실행 되면 변수 cb의 함수가 발동된다. 1초 주기마다 콜백 함수를 호출하는 코드라고 볼 수 있다.
• 이때 변수 cb로 선언한 함수를 setInterval이라는 메소드의 첫 번째 인자로 넘겨준 것인데, 즉 호출 결과를 알려달라고 제어권을 setInterval에 넘겨준 것 이라고 말할 수 있다.

 

 

 

 

 

 

 

 

 

제어권 => 인자

 

 

• 위 코드에서 콜백 함수는 forEach 메소드의 첫 번째 인자로 들어간 함수이다.
• 여기서 forEach 메소드는 첫 번째 인자로 콜백 함수, 두 번째 인자로 배열이 들어가게 되어있다.
• forEach 메소드의 첫 번째 인자로 들어간 콜백 함수의 인자는 value, index, array 순서대로 인자를 넘겨주도록 설정되어있다. 
• 즉 forEach 메소드 안의 첫 번째 인자로 콜백 함수를 넘기면 결국 forEach 메소드의 입맛대로 성질 설정대로 움직일 수 밖에 없다. 콜백 함수의 인자가 value, index, array 순서대로 넘겨주도록 설정되는 것 처럼 말이다. 원래 상식적으로 첫 번째 인자가 index이고 두 번째 인자가 value의 성질로 갖는게 기본임에도 불구하고도 제어권을 넘긴다.

 

 

 

 

 

 

 

 

 

 

제어권=>this

 

 

• 콜백 함수로 받은 addEventListener의 두 번째 인자인 콜백 함수 cbfunc의 this 또한 addEventListener의 성질에 따라 전역객체 window가 아닌 이벤트 반응으로 실행될 html 엘리먼트로 결정된다. 즉 this는 id 값이 a인 요소다.

 

 

 

 

 

 

 

 

콜백 함수의 특징

 

 

1. 다른 함수 A의 인자로 콜백함수 B을 전달하면 , A가 B의 제어권을 갖게 된다.

 

2. 특별한 요정(bind)이 없는 한 A에 미리 정해놓은 방식에 따라 B을 호출한다.

 

3. 미리 정해놓은 방식이란 어떤 시점에 콜백을 호출할지, 인자에는 어떤 값들을 지정할지, this에 무엇을 바인딩할지 등이다.

 

 

 

 

 

 

 

콜백 함수 주의 사항

 

위에 첫 번째는 메소드로서의 호출이고 밑에 두 번째가 콜백 함수로서의 호출이다.

 

 

• 콜백함수는 매소드가 아닌 함수로서 전달한 것으로 이해해야 한다. 내용을 전달한 것이 아닌 함수만 넘겨준 것이다.즉 홀로 함수로서 호출 된 것이므로 위 코드에서는 logValues라는 함수 안의 this는 전역객체 window를 가리킨다. 객체 obj가 아니라.
• 만약 전역객체 window가 아닌 this값을 설정하고 싶다면 forEach 메소드의 성질인 두 번째 인자가 this augment을 설정할 수 있으니 이곳에 this을 obj로 객체 배열로 설정해주거나 .bind을 설정해주면된다.

 

 

 

 

 

 

 

인프런의 정재남 강사님의 강의를 참조하였습니다.

https://www.inflearn.com/instructors/46840/courses