JavaScript 동기와 비동기, 콜백함수

JavaScript 동기와 비동기, 콜백함수

 

JavaScript를 공부하다보면 자주 듣게 되는 용어인 ‘동기’와 ‘비동기’. 한자어로 되어 있어서 직관적으로 무슨 뜻인지 알기가 어려운데, 알고보면 쉽기도 하고 CS적으로 깊이 들어가다 보면 어렵기도 한 용어다. 일단 얕게 이해할 수 있을만큼 공부해본다.

 

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

 

동기와 비동기를 간단하게 설명하자면, 동기는 순차적으로 이행되는 방식, 비동기는 비순차적으로 이행되는 방식이라고 할 수 있다. 순차, 비순차라는 말을 보면 무엇엔가 순서가 있다는 말이 된다. 자바스크립트는 싱글스레드 언어다. 그 말인 즉, 문서의 위에서부터 아래로 순서대로 스크립트를 읽어나가며 일을 처리하며, 하나의 순서대로 처리된다는 뜻이다. (멀티스레드는 다중의 실이 꿰어져 있는 순서를 연상하면 된다.)

그러나 어떤 일들은 비순차적으로 일어나야 할 수도 있다. 가령, 엄청나게 큰 데이터를 받아와서 웹 페이지에 뿌려줘야 하는 상황이 있다면, 순차적으로 실행하게 된다면 데이터를 다 받아와서 그 다음 스크립트가 실행되야 하므로, 데이터가 크면 클수록 실행속도가 느려지게 된다. 이러한 경우, 데이터를 받아오는 일은 비동기적으로 처리해야 한다. 이렇게 비동기적으로 처리해야 할 경우 사용하는 것이 콜백함수다.

 

아래와 같은 예시가 있다고 해보자.

function showData() {
	callData();
}

function callData() {
	setTimeout(function() {
		console.log('이 데이터는 불러오는데 1초가 걸립니다.')
// 실제로 데이터를 불러올 때는 AJAX를 사용하지만, 불러오는데 1초가 걸리는 데이터를 가정하여 setTimeout을 사용함
	},1000)
	addDescription();
}

function addDescription() {
	console.log('데이터에 대한 설명을 추가합니다.')
}

showData();

 

이 경우에 콘솔에 찍히는 순서는 '데이터에 대한 설명을 추가합니다.' 가 먼저 보이고, '이 데이터는 불러오는데 1초가 걸립니다.' 가 나중에 보이게 된다. 자바스크립트 엔진은 스크립트를 위에서 아래로 순서대로 읽지만, setTimeout 을 만나는 순간, 가지를 쳐서 옆으로 새 라인을 만들어서 비동기적으로 일이 처리될 수 있도록 요청을 한다. 그리고 바로 또 이어서 다음 스크립트를 읽어 나간다.

 

콜백(CallBack) 함수

 

콜백 함수는 말 그대로 ‘다시 부른다’ 라는 뜻이다. 동기적으로 처리하지 않고 일단 함수 선언만 해둔 뒤 원하는 시점에 다시 불러서 실행시키는 함수를 말한다.

 

아래의 예시를 보자.

const display = document.getElementById('display');
const btn = document.getElementById('plusBtn');

let num = 0;
function addNum() {
  num++;
  display.innerHTML = num;
}

btn.addEventListener('click', addNum)

 

addNum은 콜백함수로 동기적으로 실행되지 않고 버튼이 클릭되었을 때 실행되도록 만들었다.

 

function callBackHell(parameter) {
  function callBackHell2(parameter) {
    function callBackHell3(parameter) {
      function callBackHell4(parameter) {
        console.log(parameter)
      }
    }
  }
}

 

위의 코드는 콜백 지옥을 예시로 든 것인데, 콜백함수의 작업 후에 그 결과를 이용해 처리될 작업은 콜백함수 내부에 작성해야 하기 때문에, 위와 같은 콜백 지옥이 만들어질 수도 있다. 콜백 지옥식으로 코드를 작성할 경우 가독성이 떨어지고, 코드 수정도 쉽지 않게 되어버리기 때문에 콜백 지옥을 방지하기 위해 promise, async, await 같은 API들을 알아두면 좋다.