TIL) JS의 비동기 뽀개기 - callback 함수

이 함수는 callback 함수인데....., 이것은 callback 방식으로....

여기저기서 많이 들리는 이 말....
비전공자 입장에서는 .أنا مسرور بلقائك 처럼 들리는 이 말....

번역을 해봐도 callback은 콜백이라는데......

   callback은 대체 무슨 뜻일까?!   

stackoverflow에서 본 한 답변은 callback 을 이렇게 설명했다.

in other words "called at the back" of the other function.

다른 기능의 "뒤에서 호출" 하는것이 바로 callback이라는 것!
(오피셜한 용어은 아니지만 개념을 이해하는데 좋은 말인것 같다.)

🤷🏻‍♀️ 그렇다면 callback function은 뭘까?

callback 뒤에 function만 붙었으니까....
다른 기능의 뒤에서 호출하는 함수가 바로 콜백 함수 되시겠다.

그런데 이렇게 말하면 간지가 안사니까.... 간지나게 이렇게 말할 수 있다.

• 다른 함수의 인자로써 이용되는 함수
• 어떤 이벤트가 발생한 후, 수행될 함수

---

   다른 함수의 인자로써 이용되는 함수   

function plus(a, b, callback) {  // 콜백 함수가 될 매개변수 설정
  const add = a + b;
  callback(add);
}

plus 함수의 매개변수로 전달 된 callback !

plus 함수를 실행할 때, 이 callback 매개변수를 함수 형태로 전달하면 비로소 다른 함수의 인자로써 이용되는 callback function이 된다.

plus(4, 2, function(result) { // 콜백 함수로 사용할 익명 함수 전달
  console.log(result); // 6
});

함수 호출식이 길어지다 보니 이게 함수 선언인가 호출인가 대략 멍해지지만, 결국은 plus 함수의 callback 매개변수 자리에 인자로써 function(result) { console.log(result); } 라는 익명 함수가 들어간 것!

👉 익명 함수가 아닌 이미 정의된 함수를 인자로 전달해도 문제 없다!

function plus(a, b, callback) { // 콜백 함수가 될 매개변수 설정
  const add = a + b;
  callback(add);
}
function print(result) {  // 콜백 함수로 사용할 함수 정의
  console.log(result);
}                         
plus(4, 2, print); // 6

👉 plus 함수의 결과값인 6은 어떻게 console에 보일 수 있었을까?

plus 함수 호출 → a, b 의 인자로 각 6, 2 전달 → plus 함수의 a + b 값인 6이 변수 add에 저장 → callback 매개변수의 인자로 익명 함수 / print 함수 전달 → 이 함수(=콜백 함수)가 맨 뒤에 있기 때문에 모든 로직이 처리되고 난 시점에서 호출 → 콜백 함수에 정의된 console.log(result); 가 실행 → console 창에 6 출력

⚠️ 이 때, 콜백 함수의 매개변수인 result 는 중요하지 않다. 어차피 plus 함수에서 add 변수 값을 인자로 받아오기 때문!
실제로 result 자리에 다른 어떤 글자를 넣어봐도 잘 실행된다.

   어떤 이벤트가 발생한 후, 수행될 함수   

$("button").click(function() { // 이벤트 발생 마다 실행할 콜백 함수
  alert(1);
});

위 예시같은 경우는, click 이벤트가 발생할 때마다 = 다시 말해 click 이벤트가 발생한 뒤에 콜백 함수가 실행되어 alert(1) 이 실행된다.

이렇게 특정 이벤트가 발생한 뒤에 함수를 실행시키고 싶을 때 사용되는 것이 바로 이벤트에서의 콜백 함수!

   그래서 callback function은 왜 쓰는거지?!   

그래서 콜백 함수는 왜 쓰는 걸까?

function plus(a, b) {
  const add = a + b;
  return add;
}  

function print(result) {
  console.log(result);
}

print(plus(4,2)); // 6 // print 함수의 인자로 plus 함수 전달

사실 첫번째 예시도 이렇게 작성해도 충분히 잘 동작하는데!!

callback function을 사용하는 이유는, 바로 비동기식 처리방법을 위해서이다!

사실 위 예제는 함수가 너무 간단하기 때문에 굳이 callback 함수를 이용하지 않아도 0.000000#@$%.... 대략 말도 안되게 짧은 시간만에 컴퓨터가 계산을 끝내버린다.

하지만 이게 매우매우 복잡하고 긴 로직이라고 가정한다면?

우리는 print 함수의 실행을 기다리고, print 는 plus 함수의 로직이 모두 실행되서 return 을 만나 결과값을 반환할 때 까지 기다려야 한다.

근데 callback function 을 사용하여 비동기식으로 처리하면 속도 개선에 매우 유리하다.

...사실... 비동기식 처리방법? ajax? 너무 어렵다...
여기까지가...끝인가보오......는 아니고
비동기식 처리방법에 대해 열심히 공부해서 나중에 따로 정리하겠습니다.........

< 참고 : http://javascriptissexy.com/understand-javascript-callback-functions-and-use-them/,
https://webcoding.tistory.com/entry/JavaScript-자바스크립트-콜백함수란,
https://victorydntmd.tistory.com/48 ,
https://velog.io/@surim014/JavaScript-callback-콜백에-대해-알아보자>

---

개발 왕초보 코린이입니다!
이 내용은 혼자 동영상 강의&구글링을 통해 배운 내용을 정리하는 것으로, 제가 이해하고 넘어간 개념이 틀렸거나 더 보충할 개념이 있다면 댓글 남겨주시면 정말 감사하겠습니다!!