자바스크립트 핵심 개념 : 콜백 함수

1. 콜백 함수가 탄생한 배경

1-1. 자바스크립트의 비동기 처리방식

콜백함수를 이해하기 이전에 자바스크립트와 비동기 처리방식에 대해 생각해보자.
자바스크립트는 기본적으로 이벤트가 중심이 되는 언어이다.
이벤트는 즉각적이고, 동적이기 때문에 일일히 다른 코드를 기다려줄 수 없다.
그래서 자바스크립트에서는 비동기 처리방식을 채택하여 사용하고 있다.

동기처리는 코드가 1,2,3이 있을 때
1이 종료되면 2 실행, 2가 종료되면 3 실행 이런식으로 진행되는 반면,
비동기 처리는 1이 종료되지 않아도 2 실행, 2가 종료되지 않아도 3 실행되는 방식이다.
그럼 콜백 함수는 왜 나왔을까? 바로 비동기처리 방식의 문제점 때문이다.

1-2. 비동기 처리방식의 문제 

비동기 처리의 문제는 뭘까? 아마 여러 코드가 예측하기 어렵게 실행된다는 점일 것이다.
예시를 들면 이해가 쉽다.

 // 1번
 function a() {
  console.log('a');
 }
 
 // 2번
 function b() {
  console.log('b');
 }

 a();
 b();

이건 누가 봐도 분명히 a,b가 차례대로 나온다.

 // 1번
 function a() {
   setTimeout(function() {
   console.log('a');
  }, 5000)
 }
 
 // 2번
 function b() {
  console.log('b');
 }
 
 a();
 b();

다음의 코드 결과는 자바스크립트의 비동기 처리방식 특성을 잘 보여준다.
만약에 중간에 5초 뒤 실행하게 만드는 코드가 들어간다면?
나는 어떤 이유로 이걸 써야하는 상황이고, 내가 원하는 출력은 5초 뒤 a, b이다.
그러나 출력은 b, a이다.

위에 설명한 비동기 처리방식의 특성에 빗대어 해석해보면
자바스크립트는 1번에서 5초 뒤에 b를 출력하는 걸 결코 기다리지 않고,
2번부터 실행한 뒤에 5초가 지난 후 b를 출력한다.

1-3. 콜백 함수의 등장

비동기 방식의 문제로 등장했다고 하니, 당연히 비동기의 반대가 될 것이다.
즉, 콜백함수의 의미는 "코드의 실행을 기다려주기 위해 존재하는 함수"이다.
그리고 콜백함수의 사용법은 "다른 함수의 매개변수로 함수를 전달하는 방식"이라는 것이다.

그러니까 쉽게 말해서 콜백함수는 해당코드를 그 자리에 묶어두기 위해 사용한다.
의미와 이용방법을 새기고 또 새기면 반드시 이해할 수 있다.

 

2. 그 이론을 눈으로 확인하고 흐름을 외우자

자바스크립트의 비동기방식, 비동기 방식의 모습과 문제, 그래서 나온 콜백함수까지
이론을 마음속에 새겼다면 이제 콜백함수의 흐름을 이해하고 외우자!

 // 1번
 function a(callback) {
   setTimeout(function() {
   console.log('a');
    callback();
  }, 5000)
 }
 
 // 2번
 function b() {
  console.log('b');
 }

 a( function() { 
    b();
 })
 

두번째 코드를 콜백함수로 바꾸면 이렇게 된다.
뭔가 어려워 보이지만 추가된 부분을 중점적으로 이해해보자.

중요한 부분은 콜백함수의 사용법이
앞서 설명한 "다른 함수의 매개변수로 함수를 전달하는 방식"이라는 부분이다.

(1) 우선 평범하게 a(), b() 함수가 선언된다.
(2) a( 여기 ) 부분에서 여기안에 함수 b를 실행하라는 함수가 매개변수로 들어간다.
(3) 1번이 실행된다. a(callback)안에는 (2)의 함수인 매개변수가 들어간다.
(4) setTime~에 들어가면 우선 5초를 기다린 뒤 a가 콘솔에 찍힌다.
(5) 그 뒤 callback()을 만나면 넘겨받은 함수인 b()를 실행하여 b가 콘솔에 찍힌다. 

3. 이 글의 핵심

콜백함수가 익숙하지 않으면 계속 진행에 렉이 걸린다.
1번은 배경지식 정도로 이해하고, 
2번에서처럼 콜백함수는 매개변수로 함수로 전달한다는 것과
코드의 진행방식을 계속 보고 연습해봐야 한다.

 

* 처음에 저에겐 콜백함수가 너무 어려웠어서 최대한 쉽게 설명하려고 노력했습니다.