콜백 함수와 비동기 처리

자바스크립트는 동기적이다.
=> 호이스팅이 된 이후부터, 코드가 우리가 작성한 순서에 맞춰서 하나씩 동기적으로 실행되다는 말이다.

• 호이스팅?? 필자가 정리한 호이스팅
  
  var, function declaration 이런 선언들이 자동적으로 제일 위로 올라가는 것을 말한다.
  
  그래서 호이스팅이 된 이후부터 코드가 나타나는 순서대로 한줄씩 자동적으로 실행이 된다.

CallBack 함수

콜백 함수는 함수 안에 파라미터로 들어가는 함수이다.
또한,
=> 성공의 결과를 받아줄 수있는 함수 이다.

용도 : JS에서 뭔가를 순차적으로 실행하고 싶을 때, 자주 쓰는 디자인 패턴

특징

• 다른데서 만든 함수도 콜백함수로 집어넣을 수있다.

document.querySelector('.button').addEventListener('click', 함수명);

• 콜백함수가 필요한 함수들에만 콜백함수 사용 가능하다.
  ex) map, filter, addEventListener 등등

함수에는 동기적 함수와 비동기적 함수가 존재한다.

1. 동기적 함수 : 코드가 쓰여진 순서대로 작동하는 함수

ex) if 절, while 루프, for 루프, 일부 콜백함수 등등

2. 비동기적 함수 : 코드에 먼저 쓰여졌다고 자동으로 실행되는 것이 아닌 비동기 함수를 실행해줘야지만 실행되는 함수

ex) 일부 콜백 함수 => setTimeout, onclick 등등
ex)
addEventListener

document.querySelector('.button').addEventListener('click', function(){
  alert('깔깔깔깔깔깔!!!'); // 버튼을 클릭시, 이거 실행됨
  // 순차적으로 실행되죠?? 콜백이니까...
})

setTimeout

setTimeout( function() {
  console.log('깔깔깔깔깔깔!!!'); // 1초 후에, 실행해죠. 순차적이죠?? 콜백이니까...
}, 1000)

콜백 함수는 동기적으로도 비동기적으로도 작동한다.

위의 코드 예시와 같이, 특정 이벤트( ex 버튼) 가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수가 콜백함수이다.

그렇다고 해서, 모든 콜백 함수들이 비동기인 것은 아니다. 콜백 함수 역시, 동기적인 함수가 존재한다. 그저 비동기처리지원하는 함수들이 콜백함수 가끔 요구할 뿐이다.

다음의 예시를 보자!

Case 1 ) 콜백 함수이지만, 동기적인 경우

위의 fakeSetTimeout() 콜백 함수는 함수가 불려진 순서대로 출력 된다.

Case 2 ) 비동기적인 콜백 함수

이제 대표적인 비동기 함수인 setTimeout()을 써보자

=> 뭔가 이상하다. 분명히 setTimeout() 함수의 작동시간도 0초로 line 14에 만들어 줬는데... 가장 마지막에 작동된다. 왜 이럴까??
이 부분은 이벤트 루프 시간 때, 더 알아보자!!

콜백 함수가 JS에서 중요한 이유

자바 스크립트에 콜백 함수가 존재하는 이유가 크게 2가지 있는데,
첫번째는, map, reduce, fliter 같은 중요한 메소드들이 콜백 방식으로 만들어졌다는 것이고,
두번째는, 비동기적인 프로그래밍이 가능하다는 것이다.

콜백 함수 작동 원리

콜백 함수는 순차적으로 실행하고 싶을 때, 자주 쓰는 디자인 패턴이다.

이 콜백 함수를 직접 만들어보면, 다음과 같다.

function first( a ){
  console.log('first');
  a();
}

function second(){
  console.log('second');
}

// 이렇게하면, first() 다음에 second()가 실행되도록 할 수 있다. 
first(second);

그런, 구지 이렇게 해야될 필요가 있을까??

그냥 이렇게 해도 결과는 똑같다.

first();
second();

그러나, 협업을 했을 때는 콜백의 강력함이 발휘된다.

안정적으로 확실하게 특정 코드를 순차적으로 실행할 수 있다.

예를 들어, 필자가 first()를 만들었는데, 너무 유용해서 다른 사람들이 갖다 쓴다고 하자.

그런데, 개발자 A는 first() 이후에 console.log(1)을 실행하고 싶다면 어떻게 해야 할까??

직관적으로는

first();
console.log(1);

이렇게 구현할 수 있겠지만, first()가 비동기처리가 되면 순서대로 작동하지 않는다.

확실한 안전빵으로 first()를 업그레이드 하면 된다.
first( 파라미터 )에 파라미터를 추가하고,

function first( 파라미터 ){
  console.log('first');
  파라미터();
}

function second() {
  console.log(1);
}

first(second);

이렇게 콜백 함수 패턴을 사용하면, 안전하게 순차적으로 원하는 코드를 실행시킬 수 있다.

콜백 함수의 문제점 Callback Hell

예를 들어서,

콜백 함수가 가장 많이 등장하는 DB에서 데이터를 뽑고 싶다면??

DB에서 A를 뽑고, 그 다음에 B를 뽑고, 그 다음에 C를 뽑고...

db.collection('post').findOne(A, function(){
  db.collection('post').findOne(B, function(){
    db.collection('post').findOne(C, function(){
      ... // 대충 이런 코드가 나온다.
    })
  })
})

근데, 이렇게 되면, 코드가 너무 우측으로 길어진다.
별 수 없다. JS가 이렇게 생겨먹은 것을 어쩌겠나...
=> 특히 자바스크립트로 서버개발시, 이런 패턴이 흔하다.

이런 식으로 콜백 함수를 계속 사용하다보면, 코드가 너무 길어져서 그것을 읽는 사람이 지옥을 맛 본다는 뜻으로 콜백 지옥이라는 이름이 붙었다.

콜백지옥의 문제점
1. 가독성이 떨어진다.
2. 가독성이 떨어지면, 에러가 발생했을 때 디버깅하기가 어렵다.
3. 체인이 길어지면 길어질수록, 문제를 분석하고 디버깅하기 어렵다.
4. 결국, 유지보수도 어렵다 ㅠ.ㅠ

이게 넘 가독성이 떨어져서, ES6에서 Promise가 등장하기는 했는데, Promise chaining도 길어지면 콜백하고 달라질게 없다.

또 그래서 나온게, async & await 같이 동기적으로 코드를 짜는 것같은 느낌을 주는 애들도 있다.

다음 시간에는 콜백지옥에서 우리는 구원해줄 Promise와 async & await에 대해서 알아보자!!

참고자료 및 자료출처

• 코드스테이트 학습자료
• 콜백함수가 뭔지 한국어로 쉽게 설명하는 영상
• 프로미스 (Promise), 쉽게 알아보기
• async await, 정말 좋은데... 이게 왜 좋은걸까요?
• 프로미스와 async await의 활용, 비동기 개념 확장하기
• 비동기 처리의 시작 콜백 이해하기, 콜백 지옥 체험
• 프로미스 개념부터 활용까지 JavaScript Promise
• 비동기의 꽃 JavaScript async 와 await 그리고 유용한 Promise APIs