콜백함수

---

javascript 콜백함수란?

콜백 함수는 매개변수로 함수 객체를 전달해 호출한 함수 내에서 전달받은 매개변수 함수를 실행하는 것입니다.
간단히 말해 콜백함수는 다른 코드의 인자로 넘겨주는 함수입니다. 아래는 Introudce함수를 실행하면서 매개변수로 첫번째는 name을 두번째로는 함수자체를 전달하여 호출 하였습니다.

function introduce(name, callback){
  const text = `제 이름은 ${name} 입니다.`
  
  callback(text)
}

introduce("영재", function(name) {
  console.log(name) // '제 이름은 영재 입니다.'
})

콜백함수는 다른 함수나 메서드에 인자로 넘겨주며 그 제어권 역시 함께 위임하는 함수입니다.

콜백함수 사용시 주의점

this

콜백함수에서 this가 원하는 대상객체를 바라보지 않을 수 있다.

let data = {
  text:'',
  setText: function(name){
    this.text = `안녕? ${name}`
  }
}

function introduce(name, callback){
  callback(name)
}

introduce('영재', data.setText)
console.log(data.text) // ''
console.log(window.text) // '안녕? 영재'

메서드가 아닌 함수로 호출된 경우 this는 전역객체를 바라본다. 콜백 함수도 함수이니 this가 전역 객체를 참조할거란 생각이 든다. 위의 코드에서 data.setText 를 인자로 넘겼으니 어떻게 보면 setText함수는 메서드로 호출된 것이 아니냐라고 생각할 수 있지만 위의 코드는 결국 아래의 상황과 같다.

let data = {
  text:'',
  setText: function(name){
    this.text = `안녕? ${name}`
  }
} 
function introduce(name, callback){
  callback(name)
}

introduce('영재', function(name){
    this.text = `안녕? ${name}`
  })
console.log(data.text) // ''
console.log(window.text) // '안녕? 영재'

이렇게 해당 콜백함수는 setText와 아무 관계 없는 함수만 비슷한 형태를 띄고있다. 그리고 이렇게 콜백 함수를 호출하는 함수들은 별도 this를 설정하지 않았으니 전역객체가 기본적으로 바인딩 되는 것이다.

이런 상황에서 콜백함수 내부에 this를 다른값을 바인딩 하려면apply, call, bind메서드를 사용할 수도, 화살표함수를 사용 할 수도 setText내 self란 식별자를 가진 변수를 선언후 this를 할당해 줄 수도있겠네요.

introduce('영재', data.setText.bind(data)) // bind메서드를 사용한 경우

let data = { // 화살표 함수를 사용한 경우
  text:'',
  setText: (name) => {
    var self = this
    self.text = `안녕? ${name}`
  }
}

콜백 지옥

콜백 지옥은 함수의 매개변수로 넘겨지는 익명 함수의 과정이 반복적으로 나타나 코드의 들여쓰기가 심각해 지는 상황을 이야기합니다.

// 콜백 지옥
function add(x, cb){
  let sum = x + x;
  console.log(sum)
  cb(sum)
}

add(1,function(result){
  add(result, function(result){
    add(result, function(result){
      ...
    })
  })
})

이런 코드는 가독성도 떨어지고 코드도 수정하기 힘듭니다.

비동기 제어

자바스크립트는 싱글 스레드로 하나의 작업만 동시에 처리할 수있다. 하지만 개발하면서 사용자 요청에 의해 시간이 경과 되기 전까지 어떤 함수 실행을 보류하는 setTimeout, 사용작의 직접적인 개입이 있어야 특정 함수를 실행하도록 대기하는 addEventListner, 또는 네트 워크 요청 등과 같은 요청, 실행대기, 보류 관련 코드는 작업 시간이 오래 걸립니다. 그래서 javascript는 비동기 방식으로 처리할 수 있도록 제공합니다.

비동기적인 코드는 현재 실행 중인 코드의 완료 여부와 관계없이 다음 코드로 넘어가 다른 작업을 병렬적으로 처리하도록 해줍니다. 결과 적으로 최종 작업 수행이 빠르게 처리된다. 이런 비동기 처리 방식 중 하나가 콜백함수이다.

[링크: 자바스크립트 비동기]