[자바스크립트] 동기, 비동기 처리 방법

동기적으로 작업을 하면 하나의 task가 오랬동안 시간이 소요되면, 다른 작업들이 진행 못하고 대기하게 된다.

모든 작업들을 동시에 작업하기 위해서는 멀티 스레드로 작업하면 소요 시간을 줄일 수 있지만 자바스크립트에서는 쓰레들가 단일 쓰레드 이다. 그래서 비동기 작업이 필요하다. 

동기 방식은 다른 task를 진행하지 못하게 블로킹하고 있기 때문에 비동기 작업을 하면 하나의 작업을 할때 다른 작업을 블로킹 하지 않는다.

 

1. 동기 방식

지금까지 소스코드를 짜던 방식은 동기 방식으로 작성했었다.

소스 코드

function taskA() {

console.log("A 작업 끝");

}

 

taskA();

console.log("코드 끝");

결과

A 작업 끝

코드 끝

"A 작업 끝"로그가 찍히고 난 뒤에 "코드 끝" 로그가 찍힌다. (동기 방식) 

 

2. setTimeout

위 예제에서 비동기 방식을 동기 방식으로 변경해보자. setTimeout 내장 비동기 함수를 사용해보자.

 

소스 코드

function taskA() {

// setTimeout : 내장 비동기 함수, 콜백함수와 딜레이 시간 입력하면 됨

setTimeout(() => {

console.log("A task End");

}, 2000);

}

 

taskA();

console.log("코드 끝");

결과

코드 끝

A task End

setTimeout 내장함수는 비동기 함수이다. 콜백함수 하나와 딜레이 시간(ms)을 넣어주면 비동기로 처리한다.

"코드 끝"로그가 먼저 찍히는 것을 확인할 수 있다.

 

taskB를 하나더 만들어서 차이를 비교해보자.

소스 코드

function taskA(a, b, cb) {

setTimeout(() => {

const res = a + b;

cb(res);

}, 3000);

}

 

function taskB(a, cb) {

setTimeout(() => {

const res = a * 2;

cb(res);

}, 1000);

}

 

taskA(3, 4, (result) => {

console.log("A TASK Result : ", result);

});

taskB(4, (result) => {

console.log("B TASK Result : ", result);

});

console.log("코드 끝");

결과

코드 끝

B TASK Result :8

A TASK Result :7

코드 끝이라는 로그가 가장 먼저 출력되고, B태스크, A태스크 순으로 출력되는 것을 확인할 수 있다. 이처럼 setTimeout 내장함수를 이용하면 작업을 비동기적으로 사용할 수 있다.