콜백지옥 & 동기 비동기

✅ 콜백지옥이란(엉망진창 함수)

콜백 함수를 **익명 함수**로 전달하는 과정이 반복되어 코드의 **들여쓰기 수준이 헬 수준**인 경우를 말해요! 😂😂😂

주로 이벤트 처리 및 서버 통신과 같은 비동기적 작업을 수행할 때 발생하죠.

뭐가문제일까요? 가독성이 정말 **지옥(hell)**(오랜 상태로 이렇게 짜여왔기 때문에, 수정도 어렵습니다.)

✅동기 vs 비동기

1. 동기 : synchronous
   1. 현재 실행중인 코드가 끝나야 다음 코드를 실행하는 방식을 말해요!
   2. CPU의 계산에 의해 즉시 처리가 가능한 대부분의 코드는 동기적 코드구요.
   3. 계산이 복잡해서 CPU가 계산하는 데에 오래 걸리는 코드 역시도 동기적 코드에요 😎
2. 비동기 : a + synchronous ⇒ async라고들 흔히 부르죠
   1. 실행 중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어가는 방식
   2. setTimeout, addEventListner 등
   3. 별도의 요청, 실행 대기, 보류 등과 관련된 코드는 모두 비동기적 코드

3. 웹의 복잡도가 올라갈 수록 비동기적 코드의 비중이 늘어남.

3. 콜백지옥의 예시와 해결방안

우리가 그래도 조금은 익숙한 **setTimeout**을 통해 콜백 지옥의 간단한 예시를 살펴볼게요!

// setTimeout 함수의 동작원리
setTimeout(function(){
	// 기본적으로 1000ms이 지나야 여기 로직이 실행이 된답니다 :)
	console.log('hi');
}, 1000);

아래 예시코드는 다음과 같은 문제가 있는데, 한번 볼까?

• 들여쓰기 수준 📉
• 값 전달 순서 : 아래 → 위

첫 번째 해결방법은 **[기명함수로 변환]**하는 방법이에요.

물고 물리면서 결국 끝까지 수행하죠!

 

가독성 좋죠? 위에서 아래로 코드 흐름이 이어지니까요.

그러나, 한 번만 쓰고 말텐데, 이렇게 이름을 다 붙여야 하는건 좀 그렇지 않을까요?

아쉽지만 위 코드는 근본적인 해결책은 아닌 것 같아요. 이런 경우 때문에 자바스크립트에서는 비동기적인 작업을 동기적으로(동기적인 것 처럼 보이도록) 처리해주는 장치를 계속해서 마련해주고 있어요.

Promise, Generator(ES6), async/await(ES7)같은 것들이죠.

비동기 작업의 동기적 표현이 필요합니다.