콜백 함수

정의

-다른 함수에 인자로 전달되는 함수.

예시)

function print(callback){
	
 	callback();
}

-다른 코드(함수 or 메서드)에게 인자로 넘겨 줌으로써 그 제어권도 함께 위임한 함수.

var count = 0;
var cbFunc = function(){
 console.log(count);
 if(++count > 4)clearInterval(timer);
};

var timer =  setInterval(cbFunc, 300);
//setInterval 함수가 첫번째 인자로 cbFunc를 콜백함수로 사용하면서
//0.3초마다 실행 시킨다 = 제어권을 setInterval이 위임 받았다.

사용이유

-주로 비동기적인 처리 방식을 위해 쓰인다.

비동기 처리(Asynchronous) 방식

-특정 연산이 끝날 때까지 기다리지 않고, 다음 연산을 실행하는 자바스크립트 특성.

예시)

console.log('Hello');

setTimeout(function() {
	console.log('Bye');
}, 3000);

console.log('Hello Again');

비동기 처리에 대한 이해가 없는 상태에서 위 코드를 보면
다음과 같은 결과값이 나올 거라고 생각할 듯(나도 이랬었지..)

'Hello
3초 후 'Bye'
'Hello Again'

그런데 실제 결과 값은 아래와 같이 나오죠.

‘Hello’
‘Hello Again’
3초 있다가 ‘Bye’ 출력

단점

콜백 지옥

예시)

$.get('url', function(response) {
	parseValue(response, function(id) {
		auth(id, function(result) {
			display(result, function(text) {
				console.log(text);
			});
		});
	});
});

가독성과 유지보수에도 좋지 않은 코드가 작성된 상태.

콜백 지옥 해결방법

1. 익명함수를 기명함수로 바꾼다.

   function parseValueDone(id) {
   	auth(id, authDone);
   }
   function authDone(result) {
   	display(result, displayDone);
   }
   function displayDone(text) {
   	console.log(text);
   }
   $.get('url', function(response) {
   	parseValue(response, parseValueDone);
   });
   

2. promise(ES6) , async/await(ES2017(ES8)) 를 사용한다.

   promise 와 async/awit에 대해 다룰 예정

   참고: 코어자바스크립트, 벨로그

   去去去中知 行行行裏覺(거거거중지 행행행리각).

   "가고 가고 가는 중에 알게 되고, 행하고 행하고 행하는 가운데 깨닫게 된다"
   -노자 왈 -