[JS] 자바스크립트 콜백 함수(Callback Function)

1. 동기(Synchronous)와 비동기(Asynchronous)

동기적인 작업은 한 번에 하나의 작업만 처리하기 때문에 현재 실행 중인 코드가 종료되기 전까지 다음줄의 코드를 실행하지 않는 것.

비동적인 작업은 한 번에 여러 작업을 처리할 수 있기 때문에 현재 실행중인 코드가 종료되기 전에 다음 라인의 코드를 실행하는 것. 비동기로 처리하는 방식은 효율성을 상승시켜 처리 속도를 높여준다.

 

자바스크립트는 한 번에 한 가지 일만 처리가 가능한 싱글 스레드로 동기식 언어이지만, 비동기 동작을 처리할 수 있다.

어떻게 비동기 처리를 할 수 있을까?

 

2. 콜백함수

함수의 파라미터로 들어가는 함수 (함수 안에서 실행하는 또 다른 함수)

'호출하다' + '되돌아오다' = '되돌아 호출해 달라'는 명령으로 비동기 방식으로 작성된 함수를 동기 처리를 하기 위해 사용한다.

function sayHello(name, callback) {
  console.log(`hello! ${name}`);
  callback();
}

function myFunc() {
  console.log('callback function')
}

sayHello('john', myFunc)

// hello! john
// callback function

sayHello 함수는 name과 callback 두개의 매개변수를 받고, 먼저 'hello! john'을 출력한 후 전달된 콜백함수를 호출한다.

이렇게 함으로써 myFunc 함수가 실행되어 비동기 동작을 처리할 수 있다.

 

콜백함수 언제 쓸까?

콜백함수는 저렇게 비동기적인 작업을 처리하는데 사용되는데

예를 들어, 일정 시간 지난 후 특정 작업을 수행하도록 하려면 브라우저에서 제공하는 비동기 함수인 setTimeout 함수를 사용하면 된다.

console.log('1');
setTimeout(function() {
    console.log('2');
}, 1000)
console.log('3');

//1
//3
//2

 

위 코드는 setTimeout() 함수에 파라미터로 콜백함수를 전달했다.

먼저 동기적으로 실행되기 때문에 '1' 출력

다음 setTimeout 비동기 함수로 인해 지정된 시간(여기선 1초)이 경과한 후에 출력할 수 있으니 응답을 기다리지 않고 다음 코드로 넘어가게 된다.

다음은 동기적으로 실행되기 때문에 '3'출력 후 1초가 경과한 후 '2'가 출력된다.

 

이벤트가 발생했을 때 특정 동작을 수행하도록 하는 것도 콜백함수를 이벤트 리스너로 등록하면 된다.

button.addEventListener('click', function() {
    console.log('버튼이 클릭되었습니다.');
});

DOM 요소에 이벤트 리스너를 추가하는 addEventListener 함수의 두번째 매개변수엔 클릭이 발생했을 때 실행할 함수를 등록한다.

그래서 버튼을 클릭했을 때 콘솔에 메시지가 출력된다.

 

하지만 비동기 제어로 인해 콜백함수를 중첩해서 사용하게 되면 가독성도 떨어지고 콜백지옥에 빠지게 된다.

콜백 지옥을 해결하기 위해 Promise와 async / Awaita 문법이 제공되고 있다.