자바스크립트 비동기

 

 

자바스크립트는 동기적인 언어이다.

동기적인 것이 무엇이냐 하면은

 

 

동기 (Synchronous: 동시에 일어나는)

 

말 그대로 동시에 일어나는 뜻인데

프로그래밍적인 개념으로 말하자면 요청과 그에 대한 결과가 동시에 일어나는 것이다.

 

 

function add(a,b){
	return a + b;
}

let a = 3;
let b = 6;
let c = add(a,b);		// add함수의 호출(요청)과 결괏값을 반환(결과)전까지 다음코드로 진행되지 않는다.
console.log(c);

 

 

이러한 특성때문에 대부분의 프로그래밍 언어는 절차지향처럼 코드가 위에서 아래로 작동한다.

아래에 있는 코드는 위에 있는 코드보다 먼저 실행될 수 없다.

 

 

여기서 비동기라는 것은 무엇이냐하면 동기가 아닌 것들이다.

 

 

 

비동기(Asynchronous : 동시에 일어나지 않는)

 

비동기는 요청과 그에 대한 결과가 동시에 일어나지 않습니다.

예로 들면

 

 

console.log('1');       //실행 순서 1
//비동기는 언제 실행되지 모르는 것들이다 예로 들면 setTimeout()
setTimeout(() => console.log('2'),1000);       //실행 순서 4        //이 함수가 실행될려면 1초가 필요한데 그 시간을 기다리지 않고 바로 다음 코드를 실행한다. 이것이 비동기이다.
console.log('3');       //실행 순서 2

//동기 콜백
function printImmediately(print){
    print();
}
printImmediately(() => console.log('hello'));       //실행 순서 3

//비동기 콜백
function printWitdhDelay(print, timeout){
    setTimeout(print, timeout);
}
printWitdhDelay(() => console.log('async callback.'),2000);       //실행 순서 5

 

 

이렇게 시간이 지연되는 setTimeout()함수를 들 수 있다.

setTimeout() 함수는 두 번째 인자만큼 시간이 지나면.

첫 번째 인자의 콜백함수가 실행되는 것이다.

 

비동기에 특성에 의해

setTimeout()에 지연되는 시간만큼 프로그램이 멈춰있는 것이 아니라

 setTimeout()이 실행되기 전에 기다리지 말고 바로 다음 코드를 실행된다.

 

 

이러한 특성이 생긴 이유는

우리가 웹이나 앱이든 무엇을 구현하든

시간이 걸리는 작업이 존재한다.

서버에서 데이터 받아오기, 네트워크 접속 대기 등

언제 끝날지 모르는 작업들이 있다면

끝날때까지 기다리지 말고 다른 것부터 해야

기다리기 싫은 사용자들 입장에서 불편하지 않게 된다.