JavaScript TIL 16

2021년 7월 27일에 작성된 문서 2번 입니다.
javascript 배운 내용을 정리했습니다.

Callback

Async(비동기)가 좋은건 알지만, 순서를 제어하고 싶은 경우는? "Callback"

Async

const printString = (string) => {
	setTimeout(
		() => {
			console.log(string)
		},
		Math.floor(Math.random() * 100) + 1;
	)
}

const printAll = () => {
	printString("A")
	printString("B")
	printString("C")
}
printAll() // B A C

위의 경우를 CallBack으로 조금 바꿔보자.

const printString = (string, callback) => {
	setTimeout(
		() => {
			console.log(string)
			callback()
		},
		Math.floor(Math.random() * 100) + 1;
	)
}

const printAll = () => {
	printString("A",() => {
		printString("B", () => {
			printString("C", () => {})
		})
	})
}
printAll() // A B C

Callback error handling Design

const somethingGonnaHappen = callback => {
	waitingUntilSomethingHappens()

	if(isSomethingGood){
		callback(null, something)
	}
	if(isSomethingBad){
		callback(something, null)
	}
}

Usage

somethingGonnaHappen((err, data) => {
	if(err){
		console.log('ERR!!');
		return
	}
	return data
})

물론 콜백은 좋지만, 자칫 콜백 체인(지옥)에 빠질 수도 있다... 적절히 사용하자.

Promise

콜백 체인(지옥)의 대응 방법

Callback

const printString = (string, callback) => {
	setTimeout(
		() => {
			console.log(string)
			callback()
		},
		Math.floor(Math.random() * 100) + 1;
	)
}

const printAll = () => {
	printString("A",() => {
		printString("B", () => {
			printString("C", () => {})
		})
	})
}
printAll() // A B C

Callback의 경우를 Promise로 조금 바꿔보자.

const printString = (string) => {
	return new Promise((resolve, reject) => {
		setTimeout(
			() => {
				console.log(string)
				callback()
			},
		Math.floor(Math.random() * 100) + 1;
		)
	})
}

const printAll = () => {
	printString("A")
	.then(() => {
		return printString("B")
	})
	.then(()=>{
		return printString("C")
	})
}
printAll() // A B C

Async / Await

아래의 코드를 참조하자.

functon gotoCodestates(){
	return new Promis((resolve, reject) => {
		setTimeout(() => {resolve('1. go to Codestates')}, 100)
	})
}
functon sitAndCode(){
	return new Promis((resolve, reject) => {
		setTimeout(() => {resolve('2. sit and Code')}, 100)
	})
}
functon eatLunch(){
	return new Promis((resolve, reject) => {
		setTimeout(() => {resolve('3. Eat Lunch')}, 100)
	})
}
functon goToBed(){
	return new Promis((resolve, reject) => {
		setTimeout(() => {resolve('4. goToBed')}, 100)
	})
}

const result = async () => {
	const one = await gotoCodestates();
	console.log(one)

	const two = await sitAndCode();
	console.log(two)

	const three = await eatLunch();
	console.log(three)

	const four = await goToBed();
	console.log(four);
}
result();

Written with StackEdit.