[JavaScript] Callback 함수와 비동기처리🔥

callback 함수란?

• 함수의 매개변수(parameter)로 전달되는 함수를 의미합니다.
• 어떤 이벤트(event)에 의해 호출되어지는 함수를 의미합니다.

매개변수로 사용되는 콜백함수의 예시 코드

function hello() {
	console.log("안녕하세요 :)")
}
function func (cb) { 
	console.log('콜백함수 실행~');
  	cb();
}
func(hello);

위와 같이 함수에 매개변수로 함수(hello())를 받아 함수에 매개변수로 받은 함수(hello(): callback 함수)를 호출합니다.

이벤트에 의해 호출되어지는 함수

function hello() {
	console.log("안녕하세요 :)")
}
window.addEventListener("keydown", hello);

위와 같이 이벤트에 인자 값으로 콜백 함수가 들어가게 됩니다.

callback 함수의 특징

장점

• 함수를 인자로 받기 때문에 필요에 따라 함수의 정의를 원하는대로 전달할 수 있습니다.
• 익명함수로도 전달이 가능합니다.
• 비동기 처리가 가능합니다.

단점

• 콜백함수를 많이 사용하면 코드의 가독성이 매우 떨어집니다. => callback hell
• 에러 처리가 어렵다.

Callback 함수의 비동기 처리

callback 함수는 비동기(Asynchronous) 처리에 사용될 수 있습니다.
비동기(Asynchronous)란 코드의 실행이 끝날 때 까지 기다리지 않고 다음 코드로 바로 넘어가는 것을 의미합니다.
동기(synchronous) 처리 코드의 실행이 끝날 때 까지 기다리는 것과 상반되는 개념입니다.

JavaScript에서 대표적인 비동기 함수로는 setTimeout()이 있습니다.

callback 함수를 통한 비동기 처리 코드

예를 들어 서버에서 데이터를 받아온다고 가정해 보겠습니다.

• 먼저, 서버에 통신 시작 합니다.
• 서버에 데이터를 가져옵니다.
• 통신 성공적으로 이루어지면 데이터를 출력합니다.

비동기 처리 전

let result;
console.log("서버통신시작");
setTimeout(()=>{
   result = "데이터";
   console.log("데이터를 성공적으로 받았습니다."); 
},1000);   
console.log("서버통신종료");
console.log("결과 : ", result);

비동기 처리 전 코드의 결과로 알 수 있듯,
데이터를 받아오기전 통신이 먼저 완려되기 때문에 result는 undefined가 반환 됩니다.
서버에서 데이터를 가져오는 것은 비동기로 이루어지기 때문에 그 다음의 코드인
서버의 통신이 종료되었다는 콘솔이 먼저 출력되고 결과 값인 result는 값을 받아오지 못하기 때문입니다.

cabllback 함수를 통한 비동기 처리 후

let result;
console.log("서버통신시작");
func(end);
function end() {
  console.log("서버통신종료");
  console.log("결과 : ", result);
}
function func(cb){
    setTimeout(()=>{
      result = "데이터";
      console.log("데이터를 성공적으로 받았습니다."); 
      cb();	
    },1000);    
}

callback 함수로 비동기 처리를 하면 데이터를 받아올 때 까지
기다린 후 통신이 완료되었다는 콘솔을 실행할 수 있게 되어, result에 값을 전달 받을 수 있게 됩니다

하지만 이런 콜백함수로 비동기 처리가 너무 많이 발생되면 callback hell🔥에 빠질 수 있습니다.
callback hell은 코드의 가독성을 저해하고 유지보수를 어렵게 합니다.
출처:https://dev.to/jerrycode06/callback-hell-and-how-to-rescue-it-ggj