[JavaScript] 동기 처리, 비동기 처리, 콜백함수

JavaScript는 싱글스레드 기반의 동기적 언어이다.
(* 싱글스레드 : 호출한 함수들이 쌓이는 호출스택이 1개인 것으로, 이벤트를 처리하는 호출스택이 1개여서 한 번에 하나의 작업만 가능)

 

따라서 여러 이벤트를 처리 시 하나의 이벤트가 많은 시간을 소요하게 되면 해당 작업이 끝날 때까지 다른 작업을 못하게 되는데, 웹에서 자주 사용되는 JavaScript가 이렇게 한 번에 한 작업만 하게 된다면 이용자들에게 불편함을 줄 것이다. 그래서 지원하게 된 것이 바로 비동기 처리 방식이다.

즉, 기본적으로 JavaScript는 동기 처리 방식으로 진행되지만 setTimeout이나 서버 요청 같은 비동기 처리 방식으로 진행되는 예외 방식이 존재하는 것이다.

그런데 이런 비동기 처리 방식에서도 비동기 작업들을 순차적으로 진행해야 할 필요가 있는데 그럴 때 사용하는 것이 콜백함수, Promise, async/await이다.

이번 포스트에서는 동기, 비동기 처리와 콜백함수에 대해서 정리해 보겠다.

1. 동기 처리

: 프로그램이 위에서부터 아래로 순차적으로 실행되어 우선순위 작업이 끝날 때까지 다른 작업을 할 수 없다.

console.log("Hello");
console.log("World");
// 실행결과 순서대로
// "Hello"
// “World"

 

2. 비동기 처리

: 프로그램이 순차적으로 실행되지 않아 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 실행할 수 있다.
: 동시에 여러 작업을 처리할 수 있다.
: 실행 결과의 순서가 보장되지 않는다는 단점이 있다.
ex) ajax, 파일 읽기, 암호화 복호화, 작업 예약

 

  2-1. ajax

  : ajax는 대표적인 jQuery의 비동기 처리 방식으로 ajax통신을 통해 서버로부터 데이터를 가져올 수 있다.

  다음은 ajax를 활용해 데이터를 요청하는 예제이다.

 

function getData() {
    var tableData;
    $.get('https: 서버 URL', function (response) {
        tableData = response;
    });
    return tableData;
}

console.log(getData()); // undefined

ajax는 비동기 처리로 서버로 데이터를 요청한 후 다 받을 때까지 기다리지 않고 다음 코드를 바로 실행하기 때문에 위 예제의 결과값은 undefined가 나오게 된다.

 

  2-2. setTimeout()

  : setTimeout은 web Api의 한 종류로 지정 시간만큼 기다렸다가 로직이 실행되게 하는 메서드이다.

다음은 setTimeout을 활용한 코드 예제이다.

// #1
console.log('Hello');
// #2
setTimeout(function() {
	console.log('Bye');
}, 3000);
// #3
console.log('Hello Again');
//실행 결과 순서대로
// "Hello"
// "Hello Again"
//(3초뒤) Bye

setTimeout도 마찬가지로 비동기 처리 방식이기 때문에 setTimeout 실행 후 다음 코드인 "Hello Again"을 콘솔로 먼저 출력하고 3초 뒤 “Bye”가 출력되게 된다.

이렇듯 비동기 처리 방식은 순서를 보장할 수 없다는 문제가 있는데 이를 해결하기 위해 사용되는 것 중 하나가 바로 콜백함수이다.

 

 

3. 콜백함수

: 특정 이벤트 발생 시 호출되는 함수

다음은 위 2-1의 ajax 예제에서 발생했던 비동기 처리의 문제를 해결한 콜백을 이용한 ajax 예제이다.

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

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

기존처럼 return으로 받지 않고 콜백함수에서 작업을 수행하여 로직이 다 끝난 뒤 다음 동작이 실행되어 원하는 결과를 얻을 수 있다.

 

  3-1. 콜백 지옥

  : 이러한 비동기 처리에서 콜백함수를 중첩해서 연속으로 사용 시에 발생하는 문제를 콜백지옥이라고 한다.

 

$.get('url', function(response) {
	parseValue(response, function(id) {
		auth(id, function(result) {
			display(result, function(text) {
				console.log(text);
			});
		});
	});
});

  : 콜백지옥에 빠지게 되면 가독성이 떨어질 뿐만 아니라 로직 변경에 어려움이 발생한다.
  : 이러한 문제점을 해결하기 위한 방법이 Promise와 Async이다. 다음 포스트에서 해당 내용에 대해 정리해 보겠다.

 

 

*참고 자료*
https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/

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

https://velog.io/@elena_park/JavaScript-%EC%BD%9C%EB%B0%B1%ED%95%A8%EC%88%98%EB%9E%80

[JavaScript] 비동기처리와 콜백함수