😎 자바스크립트는 동기적인 언어이다.

동기(Synchronouse)

정의

한 작업이 실행되는 동안 다른 작업은 멈춤 상태를 유지하고 자신의 차례를 기다리는것을 말한다.
(현재 실행 중인 코드가 끝나야 다음 코드를 실행!!)

👇console이 1부터 3까지 위에서 아래로 흐르듯 실행된다!

console.log(1);
console.log(2);
console.log(3);   /// 1  ,  2   , 3

장/단점 🧐

• 장점: 코드를 순차적으로 하나씩 실행하기 때문에 실행순서가 보장된다!

• 단점: 현재 실행중인 task가 종료될 때까지 다음 task가 실행이 안된다는 것! => 블로킹(blocking)

const arr = [];
for (let i = 0; i < 1000; i++) {
  arr.push(i);
	// 1000번 반복하면서 실행할 더더더더더 복잡한 코드
}
console.log(arr);
for (let i = 1000; i < 2000; i++) {
  arr.push(i);
	// 여기도 진짜~~~ 복잡한 수한 계산식들..
}
console.log(arr);

복잡한 계산을 해야하는 경우, 불러올 데이터가 방대한 경우 하나하나 실행이 완료되고 js가 아무리 빨라도 결국 하나씩 처리하고 넘어가느라 느려질 수 있다! 😭

bloking 예제

👇 alert 창이 뜨고 확인버튼을 누를 때 까지 console은 찍히지 않는다.

const arr = [];

for (let i = 0; i < 1000; i++) {
  arr.push(i);
	// 1000번 반복하면서 실행할 더더더더더 복잡한 코드
}

alert("안녕하세요);  // 확인 누를 때까지 console 안나옴
console.log(arr);

비동기(Asynchronouse)

정의

어떠한 요청을 보내면 그 요청이 끝날 때까지 기다리는 것이 아니라, 응답에 관계없이 바로 다음 동작이 실행되는 방식을 말한다.
(현재 실행 중인 코드가 완료되지 않아도, 다음 코드로 넘어감!!)

★★ 비동기가 필요한 이유!!

예를, 웹 페이지가 로딩되거나, 어떠한 동작(Event) 하나가 30초 이상이 걸린다고 상상해보자.

그렇게 되면, 웹 페이지는 이 동작이 끝날 때까지 화면에 나타나지 않거나 다음 동작을 수행하는데 지장을 주게 된다.

또, 요즘 사용자들은 느리고 응답이 없는 웹 사이트를 원하지 않는다.

그렇기 때문에 자바스크립트가 웹 사이트에서 동작할 때, 비동기적으로 동작할 수 있어야 한다.

비동기 코드 살펴보기 😎

// 화면 그리기 1

axios.get(url)
	.then(response => {
		// api 호출하고 응답받으면 실행
	})

// 화면 그리기 2
// 다른 로직~~

1. api는 호출 했으나 정확히 언제 응답이 올지는 모른다.
2. 화면그리기
3. api 호출!(여기까지는 동기식 진행)
4. 화면그리기 2 하다가
5. 응답이 오면 로직실행
6. 다시 다른 로직 진행!

장/단점 🧐

• 장점: 현재 실행중인 task가 완료되지 않아도, 다음 task를 실행하기 때문에 블로킹이 발생하지 않는다.!

• 단점: 실행 순서가 보장되지 않는다.