JAVASCRIPT 동기와 비동기 방식의 차이

동기적(synchronous) 방식이란?

▶ 동기적(synchronous)이란, 작업을 진행할 때 한 작업이 끝나야 다음 작업을 진행하는 방식을 말합니다.
예를 들어, 함수 A에서 B를 호출하고 있는 경우라면 B가 실행을 마치기 전까지 A는 실행되지 않습니다. 즉, A는 기다렸다가 B가 끝나면 다시 실행되는 것이 동기적인 방식입니다.
대체로 동기적인 방식은 순차적으로 작업을 수행하고 한 작업이 끝나야 다음 작업을 수행하기 때문에 순서가 중요한 경우에 사용됩니다.

비동기적(asynchronous) 방식이란?

▶ 비동기적(asynchronous)이란, 작업을 순차적으로 기다리지 않고 병렬적으로 진행하는 방식을 의미합니다.
예를 들어, 함수 A에서 비동기 함수 B를 호출하고 있는 경우라면 B가 실행되는 동안에도 A는 다른 작업을 진행할 수 있습니다. 그 사이에 B가 작업이 완료되면 콜백 함수로 A를 호출하여 결과를 처리하는 방식이 흔한 비동기적인 패턴입니다.

그럼 자바스크립트에서는 동기와 비동기 중 무엇을 많이 사용할까?

▶ 자바스크립트에서는 주로 비동기적인 작업을 다루는 경우가 많습니다.
이유는 웹 특성상 네트워크 요청, 파일 읽기/쓰기, 타이머 등과 같은 작업들이 많기 때문에 만약 동기적 방식을 사용하게 된다면 하나의 작업이 끝난 다음에 순차적으로 실행되기 때문에 시간적으로 오래걸릴 수밖에 없습니다.
때문에 이러한 작업들을 기다리지 않고 비동기적으로 처리함으로써 웹을 원활하게 만들어 성능이 향상되도록 만들어주는 것입니다.

동기와 비동기적 방식의 간단한 예시

▶ 간단한 예시를 보면서 동기와 비동기적 방식에 대해 알아보겠습니다.

1. 동기적 방식 예시

function greet(name) {
  return '안녕하세요, ' + name + '님!';
}

console.log('시작');

const message = greet('철수');
console.log(message);

console.log('끝');

• 위의 예시에서는 greet라는 이름으로 함수를 정의하고, 이 함수를 호출한 결과를 변수에 저장하여 출력하고 있습니다.
  동기적인 방식은 순차적으로 진행하기 때문에 코드를 실행하면 “시작”이 먼저 출력되고,
  그다음 greet 함수가 동기적으로 실행되어 “안녕하세요, 철수님!”이 출력됩니다.
  그리고 greet함수 실행이 끝나면 마지막으로 “끝”이 출력됩니다.
  결과는 ‘시작 안녕하세요, 철수님! 끝’ 이 나오지만 이 과정에서 순차적으로 진행되고, 하나의 실행이 끝나기 전까지 다른 함수는 실행이 되지 않는다는 것을 기억하시면 되겠습니다!
  
  

2. 비동기적 방식 예시

console.log('시작');

setTimeout(() => {
  console.log('3초 후에 실행됩니다.');
}, 3000);

console.log('끝');

• 위의 예시에서는 setTimeout 함수를 사용하여 비동기적인 작업을 실행하고 있습니다.
  중간에 있는 ‘setTimeout’은 1번만 실행할 때 사용하는 비동기적 방식의 메서드이며, 뒤에 3000은 3초를 의미하기 때문에 이 함수는 3초 뒤에 1번 실행하겠다고 명령한게 됩니다.
  따라서 코드를 실행하면 “시작”과 “끝”이 먼저 출력되고, 3초 후에 “3초 후에 실행됩니다.”라는 문자열이 출력됩니다.
  결과는 ‘시작 끝 3초 후에 실행됩니다.’가 나오지만 이 과정에서 시작, 문자열, 끝 순서가 아닌 중간에 3초라는 시간을 비동기적으로 실행할 수 있다는 것을 기억하시면 되겠습니다!
  
  

이렇게 오늘은 자바스크립트의 동기와 비동기 방식에 대해 알아봤는데요,
이렇게 예시로 살펴보니 어떤 차이가 있는 확실히 이해가 되시겠죠??
오늘 정리한 내용도 면접을 준비할 때 나올 수 있는 질문인만큼 미리미리 숙지해서 알아두면 좋을 것 같네요.
그럼 다음엔 또 다른 면접 정보들을 가져와보도록 하겠습니다 😁!