특정 코드의 연산이 끝날 때까지 기다리지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성입니다.
function getUserName (userId) {
let userName;
axios
.get(`http://domain.com/user/${userId}`)
.then(response => userName = response.username)
return console.log(userName)
}
console.log(getUserName('devCarrot'));
// undefined
비동기처리의 특성으로 axios의 response를 기다리지 않고 곧바로 return
이 실행되어 결과가 undefined가 됩니다.
이러한 문제를 callback
을 통해 해결해 보겠습니다.
function getUserName (userId, callback) {
axios
.get(`http://domain.com/user/${userId}`)
.then(response => callback(response))
}
getUserName('devCarrot', function(response){
console.log(response.username);
})
// yourcarrot0214
getUserName 함수의 두 번째 인자로 전달한 함수가 바로 callback
함수입니다.
콜백함수는 함수 내부의 기능이 완료된 뒤에 실행됩니다.
위 코드에서는 getUserName이 실행되고 axios 통신이 끝나고 나서 callback 함수에 response 결과를 전달하고 있습니다.
callback 함수는 axios의 동작이 완료된 뒤 실행되어 username값을 출력할 수 있습니다.
한 번쯤 들어본 콜백지옥이라는 말은 콜백 안에서 또다른 콜백을 호출하는 상황이 중첩될 때 발생합니다.
콜백은 비동기처리 뒤에 이어지는 작업들을 처리하기 위해 반드시 필요하지만 과도한 콜백 남용은 가독성이 떨어지고 디버깅이 어려워지는 문제점을 유발합니다.
때문에 코드 분리 또는 promise
, async/await
를 통해 기능은 유지하고 보다 간결한 코드관리가 필요하겠습니다.