아래는 일상생활에서의 동기 처리방식과 비동기 처리방식을 표현하는 이미지이다. 동기와 비동기의 가장 큰 차이점을 잘 표현한 것 같다. 이 차이점을 잘 기억하며 두가지 처리방식의 차이점들에 대해 알아보자👀

동기(Synchronous)

동기(Synchronous)는 동시에 일어난다는 뜻으로, 요청과 그에따른 결과가 동시에 일어난다

동기 처리방식은 직렬적으로 작업을 수행하는 방식이다.
서버에서 요청을 보냈을 때 응답이 돌아와야 다음 동작을 수행할 수 있게되며, 서버에서 데이터를 요청하고 데이터가 응답될때까지 이후 태스크들은 작업이 중단된다.

이러한 동기 처리방식은 설계가 매우 간단하고 직관적이라는 장점이 있으나 결과가 주어질 때까지 어떠한 작업도 하지 못하고 대기해야 한다는 단점이 존재한다.

• 동기 처리방식 예시코드

function user1(){
    console.log('나는 영희입니다.');
    user2();
}

function user2(){
    console.log('나는 철수입니다.');
    user3();
}

function user3(){
    console.log('나는 소망입니다.');
}

user1();

// 출력결과
  // 나는 영희입니다.
  // 나는 철수입니다.
  // 나는 소망입니다.

비동기(Asynchronous)

비동기(Asynchronous)는 동시에 일어나지 않는다는 뜻으로, 요청과 그에따른 결과가 동시에 일어나지 않는다

비동기 처리방식은 병렬적으로 작업을 수행하는 방식이다.
서버에서 요청을 보냈을 때 상태에 관계없이 다음 동작을 수행하며, 결과값이 나오는대로 작업이 수행된다.

자바스크립트 대부분의 DOM이벤트와 Timer함수(setTimeout/setInterval), Ajax요청은 이러한 비동기적 처리방식으로 작동된다.

이러한 비동기 처리방식은 결과가 주어지는데 시간이 걸리더라도 그 시간동안에 다른 작업을 수행할 수 있어 시간과 자원을 효율적으로 사용할 수 있다. 그러나 동기 처리방식에 비해 설계가 복잡하다.

• 비동기 처리방식 예시코드

function users(){
  console.log('username1');
  setTimeout(()=>{
    console.log('username2(setTimeout 함수 내부)')
  }, 2000);
  console.log('username3');
}

users();

//실행결과
//username1 -> username3 -> username2 순으로 콘솔에 찍힌다.