[JavaScript] 동기(Synchronous)와 비동기(Asynchronous)

동기(Synchronous)와 비동기(Asynchronous)

https://adrianmejia.com/asynchronous-vs-synchronous-handling-concurrency-in-javascript/

동기식

• 동기 방식은 요청을 보냈을 때 응답이 돌아와야 다음 동작을 수행할 수 있다.
  즉 A작업이 모두 진행 될때까지 B작업은 대기해야한다.
• 실제로 속도가 느려진 것은 아니지만 작업의 효율이 내려간다
• 설계가 간단하고 직관적이지만, 결과를 볼 때까지 다른 작업을 할수 없다는 단점이 있다.

function func1(){ 
  console.log("1번입니다"); 
  func2(); 
} 
function func2(){ 
  console.log("2번입니다"); 
  func3(); 
} 
function func3(){ 
	console.log("3번입니다"); 
} 

func1(); 
//1번입니다 
//2번입니다 
//3번입니다

비동기식

• 비동기 방식은 반대로 요청을 보냈을 때 응답 상태와 상관없이 다음 동작을 수행 할 수 있다.
  즉 A작업이 시작하면 동시에 B작업이 실행된다. A작업은 결과값이 나오는대로 출력된다.
• A작업이 진행되는 동안 다른 작업도 동시에 진행되기 때문에 효율적이라고 할 수 있다.
• 비동기 요청시 응답 후 처리할 '콜백 함수'를 함께 알려준다. 따라서 해당 작업이 완료되었을 때,
  '콜백 함수'가 호출된다.
• 동기에 비해 복잡하지만 결과가 주어지는데 시간이 걸려도 그 시간 동안 다른 작업을 할 수 있기 때문에 효율적이라는 장점이 있다.

function func1(){ 
  console.log("1번입니다"); 
  func2(); 
} 
function func2(){ 
  setTimeout(
    console.log("2번입니다");
    , 3000
  ); // 3초 뒤에 실행된다.
  func3(); 
} 
function func3(){ 
	console.log("3번입니다"); 
} 

func1(); 
//1번입니다 
//3번입니다 
//2번입니다

비동기식의 단점

데이터통신이 되기도 전에 값을 return해버리게 되거나 이 값을 이용하는 어떠한 동작이 동시에 이루어질 경우 undefined값을 사용할 수 밖에 없다. 여기서 콜백 함수를 사용해 이 점을 해결한다.

콜백함수란?  [JavaScript] 이벤트 루프, 콜백 함수

1. 다른 함수의 인자로서 이용되는 함수
2. 어떤 이벤트에 의해 호출되는 함수