[ javascript ] 동기 비동기의 이해

1. 동기적(Synchronous)

동기적으로 작업을 처리한다면 1번이 작업중이라면 2번은 작업 준비상태이고 1번이 끝이 나야 2번이 작업을 합니다

2. 비동기적(Asynchronous)

비동기적으로 작업을 처리한다면 동시에 여러가지 작업을 처리할 수도 있고 기다리는 과정에서 다른 함수를 호출할 수도 있습니다

---

예시

동기적

function work() {
	const start = Date.now(); // 현제 시간을 표시해줍니다
	for(let a = 0; a < 100000000; a++){}
	const end = Date.now();
	console.log(end - start + 'ms');
}

work(); // 521ms
console.log('다음작업'); // 다음작업

코드윗줄부터 순서대로 실행하고 작업이 끝날 때까지 다음 코드는 준비상태가 됩니다.

비동기적

function work() {
	setTimeout(() => {
		const start = Date.now(); // 현제 시간을 표시해줍니다
		for(let a = 0; a < 100000000; a++){}
		const end = Date.now();
		console.log(end - start + 'ms');
	}, 0);// 0ms 후 호출 실제로는 4ms이후에 호출되고 4ms는 브라우저의 최소호출시간입니다
};

work();
console.log('다음작업');

//console.log 출력 순서
// 다음작업
// 521ms

setTimeout 을 사용하게 된다면 이 작업은 백그라운드에서 실행이 돼서 코드 흐름을 막지 않고 다음 코드가 동시에 실행이 됩니다

function work(callback) {
	setTimeout(() => {
		const start = Date.now(); // 현제 시간을 표시해줍니다
		for(let a = 0; a < 100000000; a++){}
		const end = Date.now();
		console.log(end - start + 'ms');
		callback(end-start);
	}, 0);// 0ms 후 호출 실제로는 4ms이후에 호출되고 4ms는 브라우저의 최소호출시간입니다
};

console.log('작업시작');
work((ms) => {
	console.log('작업이 끝났습니다');
	console.log(ms + 'ms 걸렸다고 해요');
});
console.log('다음작업');

//console.log 출력 순서
// 작업시작
// 다음작업
// 521ms
// 작업이 끝났습니다
// 521ms 걸렸다고 해요

처리 순서

• 처음에 작업시작 이 console에 출력되고
• work함수는 작업 중이라 다음 작업인 '다음 작업'이 console에 출력
• 함수 작업이 끝나고 end - start +'ms'가 console에 출력
• 함수의 callback(end - start) 를 ms파라미터로 받아 온 다음 '작업이 끝났습니다' console에 출력
• 마지막으로 '521ms 걸렸다고 해요' 출력

---

비동기로 처리해야한는 작업

1. Ajax Web API 요청 : 서버 쪽에서 데이터를 받아와야 할 때 서버에서 응답할 때까지 대기해야 하기 때문에 비동기 작업을 해야 합니다
2. 파일 읽기 : 서버 쪽 에서 파일을 읽어 와야 할 때
3. 암호화/복호화 : 암호화/복호화 시간이 걸릴 때
4. 작업 예약 : 시간이 지난 뒤 작업이 시작되어야 할 때