[JavaScript] 자바스크립트 동기 작업과 비동기 작업

[JavaScript] 동기 작업과 비동기 작업

자바스크립트는 single thread로 실행된다.

 

single thread에서 한번에 하나의 작업씩 수행하는 것을 동기 작업 또는 블로킹 작업이라고 한다.

single thread에서 여러개의 작업을 동시에 수행하는 것을 비동기 작업 또는 논 블로킹 작업이라고 한다.

 

비동기 처리를 할 때는 자바스크립트에서 함수를 호출할 때 콜백함수를 붙여서 비동기 처리가 잘 끝났는지 확인할 수 있다.

 

아래와 같이 실행되는 것이 동기적 방식이다. (taskA 함수가 끝나야지 함수 바깥의 두번째 console.log가 실행된다.

 

function taskA() {
	console.log("A 작업 끝");
}

taskA();
console.log("코드 끝");

>>> A 작업 끝
>>> 코드 끝

 

 

아래와 같이 실행되는 것이 비동기적 방식이다.

taskA()보다 console.log("코드 끝");이 먼저 실행된다.

 

function taskA(a, b, cb) {
	setTimeout(() => {
    	const res = a + b;
        cb(res);
    }, 3000);
}

// 비동기 처리의 결과값을 이용할 때는 아래와 같이 콜백 함수를 이용해서 전달할 수 있다.

taskA(3, 4, (res) => {
	console.log("A TASK RESULT:", res);
});
console.log("코드 끝");

>>> 코드 끝
>>> A TASK RESULT: 7