5. 콜백 함수

gugyeoj1n·2022년 4월 25일
0

자바스크립트

목록 보기
5/9

며칠 안 됐지만 오랜만에 하는 공부 같다. 짧은 시간 동안 많은 일이 있었다. 전역 두 달도 안 남기고 처음으로 외출이 일주일에 한 번으로 풀려서 어제 지우랑 열심히 놀았다. 너무 열심히 놀아서 복귀하고 9시부터 꿀잠 잤다. 후회는 없음 ㅋ ㅡ ㅋ 서든어택 해봤는데 재밌더라

그리고 아까 도대체 뭐에 홀렸는지는 모르겠는데 바밀로 고래 갈축 키보드 질렀다. 이제 근무 가서 커피 한 잔이라도 마시면 파산이다 ㅋㅋㅋ 쥐꼬리만한 월급 받고 사는 군인을 위해 하나은행 44391.. 아닙니다

아무튼 오늘은 콜백 함수에 대해 공부할 거다.

콜백 함수가 뭐냐

callback 회신하다 라는 뜻을 가진 단어이다. 내가 배민에다 떡볶이 달라고 요청(call)하면 요리해서 갖다 주는(back) 거랑 같은 맥락이다.
콜백 함수를 넘길 때는 그 함수에 대한 제어권까지 같이 넘기게 된다. 그 제어권에 this도 있고, 실행 시점과 매개변수가 포함된다.

실행 시점

setInterval(function () {
	console.log("야식 먹고 싶다");
}, 1000);

1초마다 특정 문자열을 콘솔에 출력하는 setInterval 함수가 있다.
이런 주기함수는 첫번째 인자로 콜백 함수를, 두번째 인자로 실행 주기를 받는다. 여기서는 function () { ... } 이 콜백, 1000이 실행 주기에 해당한다. 이렇게 함수와 주기를 입력해 주면, 내 명령 없이 setInterval 이 알아서 인자로 준 함수를 실행한다. 내 명령으로 같은 내용을 만들려면 1초 기다렸다 + console.log 를 일일이 다 타이핑해야 할 텐데, setInterval 이 고맙게도 대신 해주는 것이다. 인자에 콜백 함수가 들어가면서 실행 시점에 대한 제어권을 setInterval 에 넘겨 주었기에 내가 손을 놓아도 알아서 코드가 돌아갈 수 있는 것이다.

매개변수

var arr = [1, 2, 3, 4, 5];
var entries = [];

arr.forEach(function(v, i) {
		entries.push([i, v, this[i]]);
	}, [10, 20, 30, 40, 50]
);

console.log(entries);

예시로 배열 속 값들을 하나씩 꺼내 key, index 를 만들면서 for 문을 진행하는 forEach 가 있다.
근데 잘 보면 forEach 안에 인자가 2개이다. function (...) {...} 하나랑 [10, 20, ... 50] 이다. 원래 forEach 는 첫번째 인자에 콜백 함수, 두번째 인자에 thisArg 를 받도록 정해져 있다고 한다. 정해져 있다 가 키포인트다. 내가 콜백을 넘기는 대상이 매개변수에 대해 어떤 규칙을 정해 두었으면, 그 규칙에 무조건 따라야 한다. 그렇게 해야 함수가 제대로 동작하기 때문에 제어권이 넘어간다고 할 수 있는 것이다.

this

document.body.innerHTML = '<div id="a">abc</div>';

function cbFunc(x) {
	console.log(this, x);
}

document.getElementById('a')
	.addEventListener('click', cbFunc);

id 가 a 인 element 를 클릭했을 때 cbFunc 를 실행하도록 하는 addEventListener 가 있다.
실행해 보면 this 에 <div id="a">abc</div> 가, x 에 PointerEvent 가 출력된다. 코드 이렇게도 쓸 수 있는지 처음 알았다 나는 cbFunc 에 넣어준 인자가 없는데 왜 에러가 나지 않는 거냐.
addEventListener 는 this 를 이벤트의 currentTarget 으로 정한다. click 이벤트로 id 가 a 인 객체를 타겟으로 삼았으니 this 에 그 객체가 들어간다. 그리고 콜백 함수에는 event 객체가 단 하나의 매개변수로 들어간다. 그래서 x 가 PointerEvent 로 출력된 것이다. addEventListener 가 알아서 콜백 함수를 맛있게 만들어 줬으니 제어권은 addEventListener 에게 있는 것이나 마찬가지이다.




정리하자면, 어떤 함수(A) 의 인자로 콜백 함수(B) 를 넣어 주면, A가 B의 제어권을 갖는다. 그리고 내가 특수한 상황으로 bind 를 걸지 않는 한 A는 지정해 둔 규칙에 따라 B를 호출한다.

필요하면 내가 바꿔 쓸 수 있는, 디폴트가 존재한다는 건 좋은 점 같다. 편하다. 감사합니다. 함수마다 지정해 둔 규칙이 다를 테니 사용할 일이 있을 때마다 공식 문서를 참고해 봐야겠다.




많이 잤는데 졸립다. 요새 왜 이렇게 하루가 길고 힘든지 모르겠다 더워져서 그런지
군생활 지겨워 ~.~

0개의 댓글