🐨CoalaCoding
DocsExamplesTry itBoardB반B반
🐨CoalaCoding

개발자를 위한 한국어 웹 기술 문서

문서

  • JavaScript
  • Web Publishing
  • React
  • Python

커뮤니티

  • 게시판
  • 예제 모음
  • Try it 에디터

기타

  • GitHub
  • 관리자
© 2026 CoalaCoding. All rights reserved.
  • start
  • class
  • ai이미지-생성기-구현
  • 자료형
  • async--await
  • 변수와자료형
  • xmlhttprequest-부터axios-까지
  • 1-자바스크립트와-ecma
  • reduce
  • 캘린더-만들기
  • generator
  • destructuring
  • spread-operator
  • module-export-import
  • http-통신-이란
  • 시작
  • 2-자바스크립트-코드-실행-과정-및-용어정리
  • map
  • 동기와-비동기
  • 연산자
  • promise-thencatch
  • 3-실행컨텍스트와-스코프
  • 콜백-함수
  • 제어문
  • 4-클로저
  • windowlocation
  • 함수
  • 5-객체
  • 이벤트
  1. 홈
  2. 문서
  3. JavaScript
  4. JavaScript 기초
  5. 동기와-비동기

동기와-비동기

코드 블록의 Try it Yourself 버튼으로 직접 실행할 수 있다.

구문

🔸동기

자바스크립트는 코드가 작성된 순서대로 작업을 처리함 이전 작업이 진행중 일때는 다음 작업을 수행하지 않고 기다림 먼저 작성된 코드를 먼저 다 실행하고 나서 뒤에 작성된 코드를 실행 **→동기 방식 **

동기처리의 단점은 하나의 작업이 너무 오래 걸릴시

하나의 작업이 끝날때 까지 모든 작업이 중단되기 때문에 전반적인 흐름이 느려진다.

❓멀티스레드

🔸비동기

  • 싱글 스레드 방식의 문제점으로 비동기작업이 생겼다

싱글 스레드 방식을 쓰면서 여러 작업을 동시에 실행 먼저 작성된 코드의 결과를 기다리지 않고 다음 코드를 바로 실행함 →비동기방식

이렇게 비동기 처리를 할때는 콜백함수를 붙여서 비동기 처리의 결과값이나 종료가 잘 되었는지 등을 확인하게 된다


SetTImeout ✏️ 예제1

비동기식은 setTimeout 함수의 실행여부와 무관하게 아랫줄의 로그함수를 실행한다."
//setTimeout 함수도 비동기 처리를 지원한다
setTimeout(function(){
	console.log('3초 뒤에 실행!');
}, 3000)
console.log('바로 실행.');

✏️ 예제2

function taskA(){
	console.log('A작업끝');
	setTimeout(()=>{
	console.log('a task end')
},2000)
}
 taskA();
console.log('코드끝');

setTimeout 이 실행된후 console 이 실행되야 하지만 console 실행후 settimeout이 실행되었다

✏️ 예제3

function taskA(a,b,cb){
	console.log('A작업끝');
	setTimeout(()=>{
	const res=a+b;
	cb(res)
	},3000)
}
 taskA(3,4,(res)=>{console.log('result:',res)});
console.log('코드끝');

Info: 💡 javascript 에서는 비동기처리를 지원하는 여러 방식이 있으며 그중 setTimeout, setInterval은 콜백함수를 사용한 비동기 처리 방식이다.

Info: 💡 우리가 사용할 비동기 프로그램들은 네트워크 통신에만 사용하므로 간단히 이해만 해도 충분하다.

목차

  • 구문