[JS] 콜백(callback)함수

구글링을 해도 콜백함수에 대한 내용을 뉴비도 쉽게 이해할 수 있는 글이 잘 없어서 페이스북 생활코딩 및 카톡 치킨모임방에 질문을 했는데 정말 친절하게 답변해주셔서 이를 공유하여 널리 이롭게(?) 하려고 포스팅 합니다. 

다시한번 답변해 주셔서 감사드립니다.

 

콜백 함수란 나중에 호출되는 함수이다. 이 콜백함수는 특별한 함수가 아니라 특정한 용도로 쓰이는 함수를 의미한다.

이벤트 발생, 혹은 특정 상황에 시스템에서 호출하는 함수를 의미한다.

일단 콜백 함수는 네이버에서의 로그인을 예시로 들자면

아이디,비번을 입력하고 로그인을 누르면, 계정 정보 일치여부를 확인하고 페이지이동(로그인 화면 출력)과 같은 프로세스를 따를 때, 아래와 같은 느낌

function 로그인(성공시 로그인 화면 출력) {
	로그인 작업
    성공시 로그인 화면 출력()
   }

즉, 계정정보가 일치할 때, 로그인 완료페이지로 이동해! 라고 하는것이 콜백 함수라고 합니다.

이 콜백함수는 비동기제어를 할 수 있게 하여 작업이 끝날 때 까지 다음작업을 처리하지 않고 계속 대기하는 동기제어와 구분된다.

위의 글을 보고 대략적인 감을 잡으셨다면 좀더 깊은 이해를 위해 하단의 링크로 들어가 개념을 정리하시길 권합니다.

https://jason9319.tistory.com/406

 

아래의 두 코드를 보자, 첫번째 코드는 콘솔창에 1을 출력하고 , 1초 후 2를 출력, 그다음 3을 출력 하는 목적으로 짠 코드이다.

하지만 실제 출력값은 1,3,2가 된다.

왜냐하면 1초를 기다리는 동안 3을 출력하라는 코드가 들어온 순간 3을 먼저 수행하기 때문이다.

 

console.log('1');
setTimeout(function(){
  console.log('2');
},1000);

console.log('3')

 

따라서 원래의 목적과 같이 하려면 아래와 같이 콜백 함수를 이용하여준다.

다시한번 얘기하지만 콜백은 특별한 기능을 가진 함수가 아닌, 함수의 활용방식 이라고 보는게 좋다.

console.log('1');

////콜백설정
function InOrderPrint(callback){
  setTimeout(function(){
    console.log('2');
    callback();
  },1000);
}
////콜백설정

InOrderPrint(function(){
  console.log('3');
})

간단하게 해석을 해보자.

콘솔에 '1'을 출력해라.

////콜백설정~////콜백설정은 1초 대기 후 콘솔에 '2'를 출력하는 InOrderPrint라는 함수를 만듦.

InOrderPrint 함수를 실행한 후 콘솔에 '3'을 출력하는 함수를 실행해라

즉 1을 출력-> 콘솔에 '3' 을출력하는데 그전에 설정된 console에 '2'를 1초 후에 출력한 뒤에 해라 하고 스케쥴링하는 역할이라고 보면 된다.