회사에 입사했을 때, 입대했을 때 동기가 있고 없고는 하늘과 땅차이다.
동기가 있는 사람은 힘든 작업와중에도 어긋나지 않고 서로 의지하며 제시된 순서대로 차근차근 나아가고, 동기가없는 비동기는 혼자니까 자기가 하고 싶은대로 정해진 순서와 다르게 일을 실행한다. (동기없는사람이 서럽긴하다.)

이제 이상한 소리는 각설하고, JavaScript에서 동기처리와 비동기처리를 알아보자.

동기(synchronous)👨‍👨‍👧‍👧👨‍👩‍👦

해당 코드 블록을 실행할 때 thread의 제어권을 넘기지 않고 순서대로 실행하는 것을 의미함.

* 스레드(thread)란?
스레드(thread)란 프로세스(process) 내에서 실제로 작업을 수행하는 주체를 의미
생산직 직원느낌일까...

동기처리는 열차 노선이 하나 밖에 없는 지하철이다. 아무리 많은 객차가 있다고 하더라고 한 정거장 한 정거장 앞에 열차가 출발하지 않으면 일을 진행시킬 수 없다.

비동기(asynchronous)🧟‍♂️

멀티태스킹🤹‍♀️

특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미. 멀티태스킹이 가능해져서 작업을 효율적으로 진행하게 된다.

비동기처리는 노선이 여러개있는 서울 지하철이다. 필요에 따라서 이동이 느리거나 자주 막히는 전철에서 갈아타 목적지에 더 빨리 도착할 수 있는 방법을 제시할 수 있음. 그치만 복잡도는 올라가겠죠?(어디서갈아타...?)

비동기처리는 main thread가 동기 코드를 실행한 후 제어권이 돌아왔을 때 event loop가 task queue에 넣어진 비동기 코드를 실행함.
예를 들어 🚛🛺🚌 자동차 생산직 직원이 차 본체를 만들때까진 정신없다가 바쁜게 어느정도 끝나고 정신을 차렸을 때 사이드미러나 부속품들을 하나씩 인심쓰며 만들어주는 것으로 생각하면 될까?

자바스크립트 엔진과 브라우저의 협업으로 비동기처리가 되는 것이다.

와 그럼 엄청 좋은거아닌가? 콜백지옥🤯

$.get('url', function(response) {
	parseValue(response, function(id) {
		auth(id, function(result) {
			display(result, function(text) {
				console.log(text);
			});
		});
	});
});

콜백 지옥(callback hell) 은 콜백 함수를 익명 함수로 전달하는 과정이 반복되어 코드의 들여쓰기 수준이 감당하기 힘들정도로 깊어지는 현상. 가독성이 떨어지면서 코드 수정이 불가하여 지옥에 가깝다고 함.

콜백지옥 - 이게 얼마나 혐오스러웠는지, express (프레임워크)등을 제작한 node.js의 거물 프로그래머 TJ가 js를 버리고 go로 가며 남긴 말이 callbacks suck이었을 정도.

콜백지옥😈에서 탈출하는 방법이 있는거야?

Promise🤞

비동기 함수를 동기 처리하기 위해 고안한 객체
비동기 작업이 완료된 이후에 다음 작업을 연결시켜 진행할 수 있는 기능을 가짐
작업 결과 따라 성공 또는 실패를 리턴하며 결과 값을 전달 받음

function returnPromise() {
return new Promise(resolve, reject) => {
} setTimeout(() => {
	const randomN = generateRandomNumber(100)
    if(randomN < 50) resolve(randomN) //1~49
    else reject(new Error("random number is too small."))
   }, 1000)
  })
 }
//성공 시 resolve //실패 시 reject // 받아 실행시킴

우리 이거 하기로 약속한겁니다? 예?

비동기 프로그래밍이 뭔가요? 영상으로 이해해버리기

다음편/ Promise >>>