
자바스크립트는 기본적으로 싱글 스레드(Single-thread), 동기(Synchronous) 처리 언어이다.
즉, 한 번에 하나의 작업만 처리할 수 있으며 코드가 작성된 순서대로 실행된다.
하지만 자바스크립트에서도 비동기 처리를 할 수 있는데,
자바스크립트의 동기 처리와 비동기 처리에 대해 각각 알아보자.
1) 동기(Synchronous) / 비동기(Asynchronous)란?
1-1) 동기(Synchronous) 처리
: 동기 처리는 코드가 순차적으로 실행되는 방식이다.
앞선 작업이 끝나야 다음 작업이 실행된다.
1-2) 비동기(Asynchronous) 처리
: 비동기 처리는 시간이 오래 걸리는 작업을 처리할 때,
그 작업이 끝나기를 기다리지 않고 다음 작업을 먼저 실행하는 방식이다.
대표적으로 API 요청, 파일 읽기, 타이머 등이 있다.
비동기 처리를 하기 위한 방법으로는 아래와 같다.
- setTimeout() 함수나 fetch() 함수를 활용하여 처리
- Ajax 방식으로 처리
2) 동기, 비동기 처리의 특징
2-1) 동기 처리 특징
- 코드가 작성된 순서대로 실행됨
- 하나의 작업이 끝나야 다음 작업이 실행됨
- 실행 흐름이 단순하고 직관적
- 시간이 오래 걸리는 작업이 있을 경우, 전체 코드 실행이 멈출 수 있음
2-2) 비동기 처리 특징
- 작업 완료를 기다리지 않고 다음 코드를 실행함
- 비동기 작업이 끝난 후 콜백, Promise, async/await 등을 통해 후속 처리함
- 실행 순서가 코드 순서와 다를 수 있음
- 동시에 여러 작업을 처리할 수 있어 성능 최적화에 유리함
- UI 렌더링, 서버 요청 등 실무에서 자주 사용됨
3) 사용 예시
3-1) 동기 처리
console.log("1. 시작");
function sayHello() {
console.log("2. 안녕!");
}
sayHello();
console.log("3. 끝");
결과값

3-2) 비동기 처리
console.log("1. 시작");
setTimeout(() => {
console.log("2. 2초 후 실행");
}, 2000);
console.log("3. 끝");
결과값

4) 콜백 함수란?
: 콜백 함수(callback function)란, 다른 함수에 인자로 전달되어 나중에 실행되는 함수를 말한다.
주로 비동기 작업이 완료된 이후에 실행될 동작을 정의할 때 사용된다.
4-1) 사용 예시
function fetchData(callback) {
setTimeout(() => {
console.log("데이터 준비 완료");
callback();
}, 1000);
}
fetchData(() => {
console.log("콜백 함수 실행");
});
결과값

위 예제에서는 fetchData 함수 내부에서 비동기 작업을 수행한 후, 콜백 함수를 실행하고 있다.
이처럼 작업이 끝난 후 실행할 함수를 인자로 넘기는 방식이 콜백 함수이다.
5) 동기/비동기 처리 정리
구분 | 동기 처리 | 비동기 처리 |
실행 순서 | 순차적 | 순서가 바뀔 수 있음 |
멈춤 여부 | 앞 작업이 오래 걸리면 멈춤 | 다음 작업 먼저 실행 가능 |
사용 예 | 일반 함수, 계산 | setTimeout, fetch, 이벤트 처리 등 |
장점 | 흐름이 단순함 | 성능, 반응성 향상 |
단점 | 느린 작업이 전체 흐름을 막을 수 있음 | 순서 예측이 어려워질 수 있음 |
'JavaScript > JavaScript,jQuery' 카테고리의 다른 글
[JavaScript] 비동기 처리 - async/await 문법 정리 (0) | 2025.06.23 |
---|---|
[JavaScript] 비동기 처리 방식 - 콜백 함수와 Promise (1) | 2025.06.19 |
[JavaScript/jQuery] 회원가입 input값 공백 제거하기(onChange event) (0) | 2025.03.26 |
[JavaScript] 회원가입 페이지 입력 검증하기(정규표현식, 유효성검사) (0) | 2025.03.25 |
[JavaScript] 배열인지 확인하기 isArray 함수, 배열을 시각화하여 출력 (0) | 2025.03.25 |