[Javascript] 자바스크립트 비동기 처리와 콜백 함수

▶자바스크립트 비동기 처리와 콜백 함수

이번 글에서는 자바스크립트의 특성이라고 할 수 있는 비동기 처리를 알아보고 이어서 콜백 함수까지 알아보도록 하겠습니다 :)

 

🔎 비동기 처리 ?

자바스크립트의 비동기 처리란 특정 코드의 연산이 끝날 때까지 기다리지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미합니다.

동기 처리 방식과 비동기 처리 방식

즉, 자바스크립트는 위에서부터 아래로 순서대로 코드를 실행하지 않고

먼저 실행할 수 있는 코드가 있다면 기다리지 않고 먼저 실행시켜 버립니다.

// #1
console.log('first console');
// #2
setTimeout(function() {
  console.log('second console');
}, 3000);
// #3
console.log('third console');

비동기 처리에 대한 이해가 없는 상태에서 위 코드를 보면 아마 다음과 같은 결과값이 나올 거라고 생각할 겁니다.

• 'first console' 출력
• 3초 있다가 'second console' 출력
• 'third console' 출력

그런데 실제 결과 값은 아래와 같이 나옵니다.

• 'first console' 출력
• 'third console' 출력
• 3초 있다가 'second console' 출력

setTimeout() 역시 비동기 방식으로 실행되기 때문에 3초를 기다렸다가 다음 코드를 수행하는 것이 아니라 일단  setTimeout()을 실행하고 나서 바로 다음 코드인 console.log('third console'); 으로 넘어갔습니다.

따라서, 'first console', 'third console'를 먼저 출력하고 3초가 지나면 'second console'이 출력됩니다.

 

🔎 콜백 함수로 비동기 처리 방식의 문제점 해결하기

앞에서 자바스크립트 비동기 처리 방식에 의해 야기될 수 있는 문제점들을 알아보았었는데요.

이러한 문제점들은 어떻게 해결할 수 있을까요?

바로 콜백(Callback) 함수를 이용하는 것입니다.

 

콜백 함수의 동작 방식은 일종의 식당 자리 예약과 같은데요.

일반적으로 맛집을 가면 사람이 많아 자리가 없어서 대기자 명단에 이름을 쓴 다음에 자리가 날 때까지 주변을 돌아다닐 수도 있겠죠.

만약 식당에서 자리가 생기면 전화로 자리가 났다고 연락이 옵니다.

 

그 전화를 받는 시점이 여기서의 콜백 함수가 호출되는 시점과 같습니다.

손님 입장에서 자리가 날 때까지 식당에서 기다리지 않고 근처 가게에서 잠깐 쇼핑을 할 수도 있고 아니면 다른 식당 자리를 알아볼 수도 있습니다.

 

자리가 났을 때만 연락이 오기 때문에 미리 가서 기다릴 필요도 없고, 직접 식당 안에 들어가서 자리가 비어 있는지 확인할 필요도 없습니다.

자리가 준비된 시점, 즉 데이터가 준비된 시점에서만 저희가 원하는 동작을 수행할 수 있습니다.

 

🔎 콜백 지옥(Callback hell)

콜백 지옥은 비동기 처리 로직을 위해 콜백 함수를 연속해서 사용할 때 발생하는 문제입니다.

 

주로 이벤트 처리나 서버 통신과 같은 비동기적인 작업을 수행하기 위해 이런 형태가 자주 등장하는데,

이와 같은 코드는 가독성이 떨어지고, 코드를 수정하기가 어려워지게 됩니다.

step1(function (value1) {
    step2(function (value2) {
        step3(function (value3) {
            step4(function (value4) {
                step5(function (value5) {
                    step6(function (value6) {
                        // Do something with value6
                    });
                });
            });
        });
    });
});

 

🔎 콜백 지옥을 해결하려면?

단순하게 콜백 함수를 분리해주면 콜백 지옥을 해결할 수 있지만,

Promise나 Async를 이용하면 더 편하게 구현할 수가 있습니다.

 

다음 글에서 Promise에 대해 알아보겠습니다.