19. 동기와-비동기

🔸동기

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

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

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

🔸비동기

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

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

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

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