[JavaScript] 동기 처리와 비동기 처리, 그리고 콜백함수

1. 동기 처리와 비동기 처리

- 동기(synchronous) 처리 : 현재 실행 중인 태스크가 종료될 때까지 다음에 실행될 태스크가 대기하는 방식

   (예 : 코드 한 줄 실행 완료 -> 다음 줄 실행)

  ▪️장점 : 실행 순서가 보장됨

  ▪️단점 : 앞 태스크가 완료될 때까지 뒤의 태스크들이 블로킹(작업중단)됨

 

- 비동기(asynchronous) 처리 : 현재 실행 중인 태스크가 완료되지 않았더라도 다음 태스크를 곧바로 실행하는 방식

   (예 : 코드 한 줄을 실행하면 해당 코드 한 줄의 완료 여부와 관계없이 다음 줄이 실행된다.)

 

2. 비동기적 처리 방식으로 동작하는 기능의 예

 - 타이머 함수인 setTimeout과 setInterval

 - HTTP 요청

 - 이벤트 핸들러

 

3. setTimeout으로 보는 비동기 처리의 예

setTimeout(function, milliseconds)

 

- 설정한 milliseconds 만큼 기다린 후 function 함수 호출

 

▪️예시

function introduce() {
	console.log("I am cokadood!")
}

function wannabe() {
	console.log("I wanna be a backend engineer!")
}


setTimeout(introduce, 3000); //3000ms 후 introduce 함수 실행
wannabe(); //wannabe 함수 실행

 

▪️콘솔 결과

 

4. 비동기 처리의 문제점과 콜백함수

함수 호출 후 결과가 리턴되지 않은 채로 다음 코드가 실행되면 전체 코드 실행 로직에 문제가 발생함

function introduce() {
	console.log("I am cokadood!")
}

function wannabe() {
	console.log("I wanna be a backend engineer!")
}

function func1(callback){
setTimeout(() => {
	introduce();
    callback();
    }, 3000); 
}

func1(wannabe);

 

콜백함수는 태스크 큐에 푸시되어 대기하다가 호출된 함수가 모두 종료되어 콜 스택이 비면 콜 스택에 푸시되어 실행된다.