19 동기와 비동기

🔸동기

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

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

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

🔸비동기

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

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

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

SetTImeout ✏️ 예제1

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

✏️ 예제2

1
function taskA(){
2
  console.log('A작업끝');
3
  setTimeout(()=>{
4
  console.log('a task end')
5
},2000)
6
}
7
 taskA();
8
console.log('코드끝');

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

✏️ 예제3

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