콜백

콜백은 자바스크립트에서 가장 오래된 비동기적 메커니즘으로, 콜백은 보통 익명함수로 사용한다.

간단하게 나중에 호출할 함수라는 의미로, 함수 자체에는 특별한 것이 전혀 없다. 일반 적으로 다른 함수에 넘기거나 객체의 property로 사용한다.

특정 로직의 실행이 끝날 때까지 기다려주지 않고, 나머지 코드를 먼저 실행하는 것을 방지해준다.

설명

비동기적 실행의 가장 큰 목적은 어떠한 것도 차단하지 않는다 라는 것이다.
자바스크립트는 싱글 스레드이기 때문에, 브라우저가 60초 동안 대기한 후 코드를 실행 하라고 지시한다면 (동기적 실행)

• 프로그램이 멈추고, 사용자 입력을 받아들이지 않고, 화면 업데이트를 하지 않을 것이다.

console.log("Before timeout : " + new Date()); // 1

setTimeout(function() {
	console.log("After timeout : " + new Date()); // 익명 함수
}, 60 * 1000) // 1분 // 4

console.log("I happend"); // 2
console.log("Me too!"); // 3

콜백 함수로 비동기 처리 방식 문제점 해결

콜백을 사용하는 경우?

특정 여러가지 기능들 중에, 그 기능들이 동시에 이뤄짐과 동시에, API를 가져온 뒤 특정 기능을 실행해야 하는 경우가 있을 것이다.
이런 경우에 콜백 함수를 사용할 수 있다.

function getData(callbackFunc) {
	$.get('https://domain.com/products/1', function (response) {
		callbackFunc(response); // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌
	});
}

getData(function (tableData) {
	console.log(tableData); // $.get()의 response 값이 tableData에 전달됨
});

콜백 헬

비동기 처리를 위해 콜백 함수를 연속적으로 사용할 때 발생하는 문제로, 비동기적 코드가 늘어나면 늘어날수록 버그가 없고, 관리하기 쉬운 코드를 작성하기에는 매우 어렵다.

콜백 헬을 해결하는 방법에는 Promise나 Async를 사용하는 방법이 있다.

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