동기/비동기

동기/비동기화에 대해서 알아보자

JavaScript 는 단하나의 실행컨텍스트를 갖는 엔진이라고한다 .

컨텍스트란 문맥,맥락이라는 뜻이다

컨텍스트를 이제 javascript에서 뜻을 보면

코드의 배경이 되는 조건, 환경 정도를 뜻한다.

예를들어

let a = 0;

function callB() {
	let b =10;
    
    console.log(b);
}
function callC() {
	let c = 20;
    
    console.log(c);
}
callB();
callC();

이코드의 실행 결과는 차례에 맞게
callB 10
callC 20 이 출력된다
차례에 맞게 순차적으로 1번부터 시작해서 실행되는 방식을 동기적 방식이라고 한다 .
이경우를 살펴보면 callC는 callB가 출력이 되고 난 후 출력이 되는걸 알고 싶다
callC 는 callB 의 출력에 영향을 받는 다는것이다 그게 무슨소리냐 callB의 출력에
무한 로딩이 걸린다면 callC는 출력되지 못한다

이처럼

let a = 0;

function callB(delaytime) {
	let b = 10;
    
    const delay = Date.now() + delayTime;
    
    while (Date.now() < delay) {}
    
    console.log(b);
}

function callC(){

	console.log(c);
}

callB(3000)
callC()

위의 코드를 실행해보면 callB에 딜레이를 걸어
현재시간에 딜레이타임 3초를 넣어
지금 시간이 딜레이된시간이 될때까지의 조건을 맞추면 callB가 출력이된다
그리고 그이후 callC는 출력이된다. callB가 출력이 3초딜레이된다고해서 callC의 우선순위는
바뀌지 않는다.

비동기 처리를 위해서는

callback함수,async와await를 사용한다.

callback 함수는
함수안에서 또다른 함수가 실행되는것을 칭한다.
다음 코드를 살펴보자

function add(num1,num2,cb) {
	let result = num1 +num2;
    
    cb(result);
}

const printResult = (result) =? {
	console.log("print Result", result);
};

add(1,2, printResult);

이렇게 작성이 되면 printResult 함수가 add의 결과에 따라 실행이 된다는것을 알수있다.

그리고

async 와 await

function resolveAfter2Seconds() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("resolved");
    }, 2000);
  });
}

async function asyncCall() {
  console.log("calling");
  const result = await resolveAfter2Seconds();
  console.log(result);
}
asyncCall();

이처럼 함수앞에 비동기 함수를 지칭하는 async키워드를 붙이고
비동기 로직이 시작될 코드에 await를 붙임으로 비동기 처리를 할수있다.
비동기처리를 하게되면 결과값은

이렇게 비동기 처리되어 나온다.