동기/비동기, 콜백함수

동기/비동기 처리란?

 

동기처리

동기 처리의 가장 기본적인 뜻은 한번에 코드를 한 줄씩 차례대로 실행한다는 뜻이다.
자바스크립트를 실행하는 웹 브라우저에는 stack이라는 코드 실행 공간이 있는데, 거기서 코드를 한 줄씩, 차례대로 실행한다.
예제 코드를 한 번 보자.

<script>
  console.log(1); 
  console.log(2); 
  console.log(3);
</script>
//출력 결과
//1
//2
//3

자바스크립트는 한 번에 코드 한 줄씩 차례차례 실행하기 때문에 출력 결과는 당연하게도 1,2,3이 차례로 출력된다. 

이러한 처리 방식을 동기라고 한다.

 

비동기처리

만약 특정 코드를 1초 후에 실행하고 싶어서 다음과 같은 코드를 작성했다고 가정해보자.

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

// 출력 결과
// 1
// 2 (1초 안기다리고 바로 출력)

 위와 같은 코드를 실행시켜보면 예상과는 다르게 1과 2가 거의 동시에 출력된다.
 왜냐하면 자바스크립트 실행머신인 웹브라우저에서 setTimeout() 이라는 함수와 같이 시간이 오래 걸릴 것 같은(컴퓨터 기준) 코드는 약간 제쳐두고(Web API라는 공간으로 일단 코드를 보내놓는다.) 다른 코드부터 실행하려고 한다.
 따라서 setTimeout()을 제쳐두고 그 밑에 있는 console.log(2)라는 코드부터 먼저 실행한다.
이런 처리방식을 바로 비동기(asynchronous) 라고 한다.
 실행이 오래걸리는 그런 코드들은 잠깐 대기실에 제쳐두고, 실행이 바로바로 가능한 코드들부터 처리하는 방식을 뜻한다.
 이건 자바스크립트 언어 자체의 기능이 아니라 자바스크립트 실행을 도와주는 웹브라우저 덕분에 가능한 기능이다.

결론적으로 자바스크립트 자체는 동기처리방식을 사용하며, 

자바스크립트를 실행시켜주는 웹브라우저에서 비동기처리방식을 지원하는 것 이다.

 

따라서 처음 의도처럼 특정 코드를 1초 후에 실행하고 싶으면
아래와 같이 콜백 함수(함수 안에 들어가는 함수)를 사용하여 코드를 작성하면 된다.

console.log(1);
setTimeout(function(){
  console.log(2);
}, 1000); // 1 출력 후, 1초 뒤에 2 출력

 

 

콜백함수란?

콜백함수를 간단하게 정의하자면 '함수 안의 함수'이다.
위와 같이 자바스크립트는 비동기 상황 등에서 코드를 순차적으로 실행하고 싶을 때, 콜백함수를 적극 활용한다.
예를 들어 순차적으로 실행하고 싶은 함수가 두 개가 있는 상황에서 다음과 같이 코드를 짰다고 가정하자.

function 첫째함수(){
  console.log(1)
}

function 둘째함수(){
  console.log(2)
}

첫째함수();
둘째함수();

 왠지 첫째함수 실행 후, 둘째 함수가 순차적으로 잘 실행될 것 같지만, 

 실상은 그럴 수도 있고, 아닐 수도 있다.(왜냐하면 첫째함수가 setTimeout등의 Web API 대기실로 보내는 코드라면 나중에 실행될 수 있어서)
 이 문제를 해결하기 위해서 아래 코드와 같이 콜백함수를 만들어서 첫째함수(둘째함수);
이런 식으로 실행시킬 수 있게 만들어놓으면 순차적으로 실행할 수 있다.

function 첫째함수(콜백){
  console.log(1);
  콜백(); // 첫째함수 실행 시, 1 출력 후, 콜백함수인 둘째함수가 실행된다.
}

function 둘째함수(){
  console.log(2)
}

첫째함수(둘째함수);

// 출력결과
// 1
// 2

 함수의 순차적 실행 방식은 위 코드처럼 함수에 파라미터를 하나 지정한 후,
그 파라미터에 소괄호를 붙여서 실행하라고 함수 안에 함수를 집어넣어서 실행이 가능하다.
그리고 콜백함수는 동기/비동기 처리의 개념이라기 보다는 그저 디자인패턴 중 하나이다.

[출처] 코딩애플 "매우쉽게 이해하는 JavaScript 객체지향 & ES6 신문법"