자바스크립트 Callback 사용하는 방법

안녕하세요.

오늘은 자바스크립트에서 Callback을 사용하는 방법에 대해서 알아보겠습니다.

간단하게, Callback이 무엇인지 알아보고, 언제 사용이 되는지 예제를 통해 알아보도록 하겠습니다.

Callback이란?

• 모든 명령의 실행을 마친 후에 넘겨받은 함수(객체)를 실행 하는 것을 Callback이라고 합니다.
  (자바스크립트에서는 함수도 객체이기 때문에 파라미터로 넘길 수 있습니다. 또한, 넘겨 받은 함수(객체)를 언제 실행할지 결정할 수 있습니다.)
  
• 자바스크립트는 자바와 다르게 비동기적으로 처리되기 때문에, Callback을 구현하여 사용 합니다.

Callback 사용 전

• 예제 코드
  
  for(var i = 0; i < 5; i++)  {
      console.log(i);
  }
  console.log("완료");
  
  

• 실행 결과
  
  0
  1
  2
  3
  4
  완료
  
  

• 예제 코드2
  
  for( var i = 0; i < 5; i++) {
      setTimeout(function() {
          console.log(i);
      }, 10);
  }
  console.log("완료")
  
  

• 실행 결과
  
  완료
  5
  5
  5
  5
  5

Callback 사용 후

• 예제 코드
  

  // 함수 정의
  repeatConsoleLog = function(i, callback) {
  	setTimeout(function() {
  		console.log(i);
  		if (i >= 5) {
  			callback();
  		} else {
  			repeatConsoleLog(i+1, callback);
  		}
  	}, 10);
  }
  
  // 함수 실행
  repeatConsoleLog(0, function() {
  	// 함수의 실행이 모두 끝난 뒤에 이곳에 있는 코드가 실행된다.
  	console.log('완료');
  });

  
  

• 실행 결과
  
  0
  1
  2
  3
  4
  완료

모두 즐거운 코딩하세요~