자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다

비동기 → 콜백 함수

하지만 전통적인 콜백 패턴은 콜백 헬로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가 곤란하여 여러 개의 비동기 처리를 한번에 처리하는 데도 한계가 있다

비동기 처리를 위한 콜백 패턴의 단점

콜백 헬

const get = url => { 
	const xhr = new XMLHttpRequese(); //xml~객체 생성
	xhr.open('GET', url); //http 요청 초기화
	xhr.send();//http 요청 전송
	
	xhr.onload = () => { //이벤트 핸들러 프로퍼티에 이벤트 핸들러 바인딩하고 종료
//비동기 이벤트 핸들러 : get함수가 종료된 이후에 실행된다 
//그러므로 onload에서 서버의 응답 결과를 반환하거나 상위 스코프의 변수에 할당하면 X
	if(xhr.status === 200){ 
		return JSON.parse(xhr.response;
	} else { 
	console.error(`${xhr.status} ${shr.statsusText}`)
		}
	}
}

const response = get(url) 
console.log(response);

xhr.onload 이벤트 핸들러 프로파티에 바인딩한 이벤트 핸들러의 반환문은 get함수의 반환문이 아니다

그러므로 get함수는 undefined를 반환한다

함수의 반환값은 명시적으로 호출한 다음에 캐치할 수 있으므로

서버의 응답 결과를 콘솔에 출력한다.

⇒ 비동기 함수

⇒ 함수 내부에 비동기로 동작

<aside> 💡 콜백 함수가 고차함수가 종료된 이후에 호출된다

</aside>

그러므로 내부 콜백 함수에서 처리 결과를 외부로 반환하거나 상위 스코프의 변수에 할당하면 기대한 대로 동작하지 않는다