callback 함수 지옥편 promise로 극복

문제

콜백함수는 동기적으로 한번 함수가 실행되고 끝나는 동기적 방식과 달리 함수 인자에 함수 값을 넣음으로써 함수를 여러번 호출할 수 있는 장점이 있다.(비동기적이라는 의미)

---

 

첫 번째: 콜백함수 이해하기 

콜백함수 여러 함수를 여러번 호출할 수 있다.

---

function show(a,callback){

	console.log(a)
	callback(a)
	a++
	console.log(a)


}

function minus(a){

	a--
	console.log(a)
}


show(1,minus)

결과

---

1,0,2

 

두 번째: 콜백함수 이해하기 2

---

//타입이 문자면 에러 메세지 보내줘

function show(a,callback){

	callback(a)
	console.log("이제 함수를 종료합니다")


}


function checkString(a){

	if(typeof a === 'string'){
		console.log("error")
	}else{
		console.log("맞는 인자입니다")
	}

}


show(3,checkString)

show("가",checkString)

결과

---

맞는 인자입니다
이제 함수를 종료합니다
error
이제 함수를 종료합니다

세 번째 함수 실행: 콜백지옥

 

문제 : 커피 목록에 커피 이름 계속적으로 추가

새로운 변수에 계속적으로 새로운 콜백함수들을 추가 ( 처음 함수가 종료되지 않아도 계속적으로 다른 함수들을 요청할 수 있음)

만약 서버에 데이터를 요청하는 함수를 만들면 비동기적으로 처리해야 좋다. 왜냐하면 처음 요청이 뻑날 경우 다음 요청이 진행이 안될 수 있기 때문이다.

 

---

//콜백 지옥 
// 커피 이름을 전달하고 목록에 이름을 추가하기 


setTimeout((name) => {
	let coffeeList= name
	console.log(coffeeList)
	setTimeout((name) => {
		coffeeList +=`, ${name}`
		console.log(coffeeList)
		setTimeout((name) => {
			coffeeList +=`, ${name}`
			console.log(coffeeList)
		}, 500,'latte');
	}, 500,'coffee');
}, 500,'espresso');