Javascript 콜백 📞

콜백함수, 콜백함수 지옥, Promise의 등장, generator를 이용한 promise.then 지옥의 탈출, es8에서의 async/await 등장 이와 같은 흐름을 들어보셨고 콜백에 대한 이야기 또한 많이 접했었습니다.

 

위의 흐름이 등장하게 된 원인인 콜백 함수에 대해서 알아보려고 합니다.

 

콜백 함수란 다른 함수에 매개변수로 넘겨준 함수를 말합니다.

 

아래와 같은 두개의 예시가 있을것 같아요

// 1번 //
button.addEventListener('click', function() { 
    console.log(this)  // button element
})

// 2번 //
function sayHi(name) {
  console.log(`hi ${name}`)
}

function wrongInput() {
  console.log('sorry something wrong')
}

function Person() {
    this.name = name;
}

Person.prototype.sayName = function() {
  this.name === 'logan' ? sayHi(this.name) : wrongInput()
}

 

1번 예시에서는 콜백함수를 같이 등록하고 click이 발생하면 등록해놓은 콜백함수를 실행합니다.

2번 예시에서는 saynName에 콜백함수로 두개의 함수를 등록해놓고 호출된 상황에 따라 알맞은 콜백함수를 실행합니다.

 

이 모든 것은 javascript의 함수가 일급객체이기 때문에 가능합니다.

1급 객체란 어떤 것일까요?

1급 객체는 다음과 같은 특성을 가지고 있습니다.

1. 함수의 결과값으로 반환될 수 있다.
2. 함수의 인자로 전달될 수 있다.
3. 변수나 배열에 담길수 있다.

위에서 콜백함수는 다른 함수에 인자로 전달된 함수를 의미한다고 하였습니다.

1급객체의 특성중 2번의 특성으로 인해 함수는 다른 함수의 매개변수로 전달될 수 있고 이를 콜백(call back) 함수라 합니다.

이름 그대로 나중에 실행하겠다. (내가 나중에 다시 전화할게) 이런 의미로 이해하면 좀 더 수월하지 않을까 싶습니다.

 

---

 

콜백 함수의 실행후에 연달아 다른 동작들을 수행하기 위해서 콜백 hell이 등장하게 됩니다. 

봄이 오고 여름이 오고 가을이 오듯, 이전의 결과값을 가지고 다음의 동작을 수행해야 하는 과정이 필요하게 되었고

이를 콜백 함수로 구현하다 보니 너무 길어져서 hell이 된것 입니다.

아래의 예시에서 확인할 수 있습니다.

function test() {
  setTimeout(function() {
   console.log('first');
   setTimeout(function() {
     console.log('second');
     setTimeout(function() {
       console.log('third');
       setTimeout(function() {
         console.log('fourth')
         setTimeout(function() {
           console.log('fifth')
           setTimeout(function(){
             console.log('sixth')
             setTimeout(function() {
               console.log('seventh');
               setTimeout(function() {
                 console.log('eighth??');
                 setTimeout(function() {
                   console.log('nineth')
                   setTimeout(function() { 
                     console.log('tenth')
                   }, 1000)
                 }, 1000)
               }, 1000)
             }, 1000)
           }, 1000)
         }, 1000)
       }, 1000)
     }, 1000)
   }, 1000)
  }, 1000)
}


test()

 

 

 

이 콜백 hell이 Promise로 일부 해결되었지만 Promise의 then이 점점 길어지면서 대체제가 필요하게 되었고 es8에서 async/await이 등장하게 된것으로 알고있습니다.

여담으로 promise, async/await은 콜백 큐에서의 동작이 약간 다릅니다. 그 부분도 한번 찾아보시면 재밌을 것같네요 ㅎㅎ 

2022.04.15 - [Frontend/Javascript] - Javascript Promise, async/await MicroTask queue 동작차이 🖇

 

 

---

 

출처: https://bigtop.tistory.com/35

[JavaScript] 자바스크립트 콜백함수(callback) 가볍게 이해하기