Async와 Callback
October 31, 2019
Asynchronous (비동기성)
- 절차적으로 진행되지 않는 특성
- 실행 결과가 반환되기 전에 다른 코드를 실행 가능
예제
setTimeout(() => {
console.log('안녕하세요')
}, 2000)
console.log('안녕히가세요')console.log("안녕하세요")가 console.log("안녕히가세요")보다
먼저 작성되어 있지만 아래와 같이 안녕히가세요가 먼저 출력된다.
비동기성의 이유
- 자바스크립트는 웹에 치중되어 있다.
- 인터넷 속도에 의존적이다.
- 사용자의 인터랙션이 존재한다.
속도가 느려도 인터랙션은 되어야 한다.
Call back
다른 코드의 인수로서 넘겨주는 실행 가능한 코드
콜백으로 넘겨받은 코드는 즉시 실행할 수도 있고, 나중에 실행될 수도 있다.
콜백 함수는 보통 아래와 같은 구조를 가진다.
function doSomethingElseAsync(callback) {
console.log('doSomethingElseAsync : Wait for half a sec.')
setTimeout(function() {
callback()
}, 500)
}예제
function sayHello(sayGoodbye) {
setTimeout(() => {
console.log('안녕하세요')
sayGoodbye()
}, 2000)
}
sayHello(() => console.log('안녕히 가세요'))비동기성의 예제와 다르게 안녕하세요가 먼저 출력되고 안녕히 가세요가 출력된다.
여기서 인자로 받은 sayGoodbye는 callback함수로서 받아졌다.
Callback Hell
비동기 로직 처리를 위해 콜백 함수를 연속적으로 사용할 때 발생하는 문제
아래와 같은 연속적인 콜백 함수의 사용으로 가독성을 해친다.
a(function(resultFromA) {
b(resultFromA, function(resultFromB) {
c(resultFromB, function(resultFromC) {
d(resultFromC, function(resultFromD) {
e(resultFromD, function(resultFromE) {
f(resultFromE, function(resultFromF) {
console.log(resultFromF)
})
})
})
})
})
})해결 방법으로는 Promise와 async - Await Func이 존재한다.
