[JS 자바스크립트] 비동기식과 동기식의 차이점

동기식 처리(Synchronous)

동기식 처리는 작업이 순차적으로 실행됩니다. 

즉, 한 작업이 완료된 후에 다음 작업이 시작됩니다.
코드의 실행 순서가 보장되며, 코드를 읽고 이해하기 비교적 쉽습니다.
하지만 한 작업이 오래 걸릴 경우 다음 작업은 그 작업이 완료될 때까지 기다려야 합니다. 이로 인해 전체 시스템의 성능 저하나 지연(time blocking) 문제가 발생할 수 있습니다.

 

예시 코드

console.log('첫 번째 출력');
alert('버튼을 클릭하세요.'); // 사용자가 확인 버튼을 클릭할 때까지 기다림
console.log('두 번째 출력');

 

위 코드에서 alert 함수는 동기적으로 동작하는 함수로

사용자의 확인 버튼 클릭을 기다리고 그 후에 두번째 출력 로그를 출력합니다.

 

비동기식 처리 (Asynchronous)

비동기식 처리는 여러 개의 작업이 병렬적으로 실행됩니다. 

즉, 특정 작업의 완료 여부와 상관 없이 다음 작업을 시작합니다.
결과가 바로 반환되지 않아도 다른 일을 계속 할 수 있으므로 시간 효율성에 좋습니다.
하지만 비동기 메소드 호출 순서와 결과 반환 순서가 일치하지 않으므로 

로직 구현 및 디버깅에 어려움이 있을 수 있습니다.

 

예시 코드

console.log('첫 번째 출력');
setTimeout(function() {
    console.log('세번째 출력');
}, 2000);
console.log('두 번째 출력');

 

위 코드에서 setTimeout 함수는 비동기적으로 동작하는 함수입니다.

2초 대기하는 동안 두번째 출력 로그를 바로 출력하고, 

대기 시간 후 세번째 출력 로그를 출력합니다.

 

JavaScript에서는 주로 콜백 함수, 

프로미스(Promise), async/await 등을 사용하여 비동기 처리를 합니다.