Callback Function

김회민·2022년 5월 13일
0

Typescript

목록 보기
5/5

함수 Parameter에 함수를 전달하는 것

  • 인자로 함수를 전달받아, 함수 내부에서 실행하는 함수이다.

작동 순서

function myFunc( callback ) {
  // 매우 복잡한 로직
  // ...
  // 매우 복잡한 로직 끝!

  // Callback !
  callback();
}

function printHelloWorld() {
	console.log("Hello World!");
}

myFunc( printHelloWorld );
  1. 호출 : myFunc( printHelloWorld );
  2. 진입 : function myFunc( callback )
  3. 호출 : callback();
  4. 진입 : function printHelloWorld()
  5. 호출 : console.log(”Hello World!”);
  6. 종료 : function printHelloWorld()
  7. 종료 : function myFunc( callback )

효용성

위의 코드를 기준으로 설명하겠다.

myFunc 함수 중간에 callback을 호출할 수 있다.

function myFunc( callback ) {
	callback();

	// 매우 복잡한 로직 시작
	// ...
	callback();
	// ...
	// 매우 복잡한 로직 끝

	callback();
}

만약 myFunc이 비동기 함수라면 callback을 확정적으로 호출할 수 있다.

예시) setTimeout( callback, ms ); , setInterval( callback, ms );

console.log("프로세스 시작");

// 1초를 기다린후 callback 함수 실행
setTimeout(() => {
	console.log( "1초가 지남" );
}, 1000 );

console.log("프로세스 종료");
// 실행 결과
프로세스 시작
프로세스 종료
1초가 지남

주의사항

Callback 지옥

  • Callback이 신박한 방법이라고 생각해서 남발을 해버리면 아래와 같은 상황이 펼쳐진다.
myFunc(() => { () => { () => { () => { () => { ... } } } } });

myFunc(() => {
	myFunc(() => {
		myFunc(() => {
			myFunc(() => {
				// ...
			});
		});
	});
});
  • 이게 반복되다보면 들여쓰기가 많아지게 되고, 코드를 한 눈에 파악하기가 힘들다.
profile
백엔드 개발자 지망생

0개의 댓글