Sync/Async

함수의 완료 여부를 누가 신경쓰는가 - 콜백에 담냐?

• Sync
  • 계속 같이감
  • 호출 하는 함수가 호출되는 함수의 완료 여부를 신경쓴다
• Async
  • 같이 안가고 Sub Routine으로부터 나중에 Callback으로 받음
  • 별도의 쓰레드(Sub Routine)로 빼서 실행하고, 완료되면 호출하는 측에 알려주는 것
  • 호출 하는 함수가 호출되는 함수의 완료 여부를 신경쓰지 않음

호출되는 함수가 바로 제어권을 넘기느냐 마느냐가 관심사다. - 제어권 주냐?

• Block
  • 함수가 바로 플로우 제어권을 리턴하지 않으면 Blocking
• NonBlock
  • 플로우 제어권을 아주 짧은 시간만 가지고있음
  • 함수가 바로 플로우 제어권을 리턴하면 nonBlocking
  • 제어문 수준에서 지체없이 반환하는 것
• 제어권을 넘겨야 메인 스레드가 다른 작업 가능하다!!

Sync/Block

const sum = (n, f) => {
	let sum = 0;
	for(let i = 0; i <= n;i++) sum +=i;
	// 플로우제어권 안주고 한큐에 끝냄 (block)
	return sum;
}
sum(10);
// 그냥 리턴 (async)

Sync/NonBlock

const sum => n => {
	const result = {isComplete:false};
	requestAnimationFrame(()=>{
		let sum = 0;
		for(let i = 0; i <= n;i++) sum +=i;
		result.isComplete = true;
		result.value = sum;
	})
	return result;
}

const result = sum(100);
const id = setInterval(()=>{
	if(result.isComplete){
		clearInterval(id);
		console.log(result.value);
	}
}, 10)

• sync nonBlocking 은 미래의 나( 다음 frame )한테 넘기고 그냥 지금 나는 리턴하고 도망가벌임
  • 예전 방식의 api들이 sync이자 nonBlock인 경우가 많다
  • 이 경우 result가 다음 프레임에 제대로 계산되서 리턴됐는지 계속 조사해줘야한다

Async/Block (TRAP!!)

const sum = (n, f) => {
	let sum = 0;
	for(let i = 0; i <= n;i++) sum +=i
	// 플로우제어권 안주고 한큐에 끝냄 (block)
	return f(sum)
}
sum(10, console.log);
// 콜백으로 결과 리턴 (async)
console.log(123);

// 55 -> 123

• 굳이 메인 스레드가 다른 스레드를 기다리는 엄청 비효율적인 상황

Async/NonBlock (우리의 지향점)

const sum = (n,f) => {
	// 플로우제어권 바로 반환하고 다음프레임에 소환
	// (nonBlock)
	requestAnimationFrame(()=>{
		let sum = 0;
		for(let i = 1; i<= n; i++) sum += i;
		f(sum)
 })
}
sum(10, console.log);
// 콜백으로 결과 리턴 (async)
console.log(123);

// 123 -> 55

• 모던 JS는 fetch, Promise, async await 등으로 nonBlock 구현가능
  • 제어권 넘긴 로직이 이벤트 루프타고 WebAPI갔다고 각각 queue 들로 가서 resolve되믄 콜백으로 값준다
• 이걸 지향해야한다

참고

Blocking-NonBlocking-Synchronous-Asynchronous

Block, NonBlock & Sync, Async