동기적, 비동기적 처리, 콜백 함수 - JavaScript

JavaScript

Synchronous & Asynchronous & Callback function JavaScript

---

이번 포스트를 작성하게 된 이유는 promise 문법에 대해 정리하던 중 머릿속으로만 이해하고 넘어갔던 내용들이 다른 분들에게 필요할 것이라고 생각하여 작성하게 되었습니다.

---

동기적 처리(Synchronous)

코드를 위에서 아래로 한 명령이 끝나면 다음 명령을 해결하는 기본적으로 컴퓨터가 명령을 처리하는 방식을 말한다.

동기적 처리

어떠한 방식으로 실행될지 예상하여 작성할 수 있다.

비동기적 처리(asynchronous)

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

 

통신을 하거나, 명령이 언제 끝날지 모를 때, 주가 되는 작업이 아닐 때 사용하여 빠른 작업이 가능하도록 한다.

비동기적 처리는 제이쿼리의 Ajax, fetch, setTimeout 함수들이 가장 많이 사용되는 사례라고 볼 수 있다.

비동기적 처리

원래라면 1, 2, 3의 순서로 출력해야 하지만 3을 먼저 출력한 것을 확인할 수 있다.

어떠한 작업이 시간이 걸릴 때 그 명령이 완료될 때까지 사용자가 아무것도 할 수 없다고 가정한다면 아마 한국인으로서는 기다려줄 수 없을 정도로 느린 웹앱이 완성될 것이다.

 

콜백(callback) 함수

쉽게 설명하자면 함수에서 파라미터로 함수를 호출하는 방식을 이야기한다.

 

위의 setTimeout에서도 함수를 호출해 2를 출력했다. 다른 예시로 filter 함수의 구문을 보면

arr.filter(callback(element[, index[, array]])[, thisArg])

로 정리된다. 콜백 함수를 사용하라는 점을 확인할 수 있다.

 

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

콜백 함수를 통해 길이가 6 이상인 단어가 true로 표현되어 6 이상의 단어들만 출력되는 것이다.

콜백 함수의 역할은 위의 방식들도 있지만 비동기적 처리를 이용할 때 특정한 로직이 끝나고 실행되었으면 하는 동작이 있다면 콜백을 이용해 문제를 해결할 수 있다.

 

아래의 코드는 제이쿼리 Ajax 통신에서 콜백 함수를 이용한 방법이다.

 

function getData(callbackFunc) {
	$.get('<https://domain.com/products/1>', function(response) {
		callbackFunc(response);// 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌});
}

getData(function(tableData) {
	console.log(tableData);// $.get()의 response 값이 tableData에 전달됨});

쉽게 설명하자면 get을 통해 데이터 받은 후 callbackFunc를 실행시켜 그 값이 출력되도록 한 것이다.

 

콜백 지옥

이러한 장점 때문에 콜백 함수를 사용하게 되지만 가끔 너무 과용하면 콜백 지옥에 빠지기도 한다.

 

setTimeout(function(name) {
  let friends = name;
  console.log(friends);
  setTimeout(function(name) {
      friends += ', ' + name
      console.log(friends)
      setTimeout(function(name) {
        friends += ', ' + name
        console.log(friends)     
    }, 500, 'Lee');
  }, 500, 'Kim');
}, 500, 'mxx');

작성하면서도 헷갈렸다. 값을 전달해가며 이 이상 작성하여 들어간다면 가독성이 더 많이 떨어질 것이고 3개의 setTimeout만 작성했는데도 실수하기 정말 쉬워 보인다.

그렇다면 콜백 지옥을 탈출하는 방법은 무엇이 있을까?

콜백 지옥 탈출법

기명 함수

let friends = '';
const addMxx = (name) => {
	friends = name;
	console.log(friends);
	setTimeout(addKim, 500, 'Kim')
};

const addKim = (name) => {
	friends += ', ' + name;
	console.log(friends);
	setTimeout(addLee, 500, 'Lee')
};

const addLee = (name) => {
	friends += ', ' + name;
	console.log(friends);
};

setTimeout(addMxx, 500, 'Mxx')

 

이 방법도 더 간결하다고 말할 수는 없으나 실수는 줄이고 들여 쓰기를 완화할 수 있다.

이번 글에서는 한 가지의 방식만 소개하고 앞으로 정리할 내용들이 이러한 콜백 지옥 탈출에 도움을 주기 위한 문법이 될 것이다.