JavaScript - Callback

Callback함수

다른 함수가 실행을 끝낸 뒤 실행되는 callback되는 함수를 말합니다. 함수를 만들 때, parameter를 함수로 받아서 쓸 수 있는데 그 함수가 callback 함수 입니다.

 

기본적으로 js를 배울 때 console.log로 따로 함수를 실행시켜 결과값을 확인하곤 합니다.

케릭터를 만드는 함수에서 return 값으로 user의 케릭터를 만들어내고 확인하는 방법입니다.

• callback 사용 X

function makeCharacter(id,job){
  const user = {
    id : id,
    job : job,
    info : id + job
  }
  return user
}
const hoso = makeCharcter('hoso','warrior')
console.log('character:',hoso)}

결과

'character:' { id: 'hoso', job: 'warrior', info: 'hosowarrior' }

 

하지만 이 방법 말고 makeCharacter함수 안에 함수를 만들어서 함수를 실행하게 만들면 그게 바로 callback 함수가 됩니다.

• Callback 사용 O

function makeCharacter(id,job,func){
  const user = {
    id : id,
    job : job,
    info : id + job
  }
  func(user)
}
makeCharcter('hoso','warrior',function(user){console.log('character:',user)})

결과

'character:' { id: 'hoso', job: 'warrior', info: 'hosowarrior' }

makeCharacter 함수를 실행한 후 user를 생성한 다음 callback 함수로 지정한 것을 user값을 넣어서 실행시키면 같은 결과값을 도출해 냅니다.

 

위 두 함수의 차이점은 결과값을 함수 내부에서 수행해주냐와 밖에서 다시 불러오느냐의 차이가 있습니다. 왜 굳이 이렇게 하는지 알기 위해서는 이제 시작해봅니다.

 

Callback함수를 통한 비동기 처리

https://pabeba.tistory.com/25

JavaScript - async 와 defer의 차이(feat.드림코딩)

비동기 함수에 대한 글을 저기에 작성하였습니다. 그림도 있으니 한 번 확인해 보아요ㅎㅎ

그냥 이해하기 쉽게 이야기하면 병렬로 코드를 읽어낸다? 라는 느낌입니다. 

1. 동기 : 하나의 요청이 오면 완료가 된 후 다음 요청을 실행하는 방식 - 순차적 로직흐름
2. 비동기 : 어떤 요청이 오면 완료가 되기 전에 다음 요청을 실행하는 방식
- 동시 효율적 처리 가능, 즉시 응답X 때문에 예상 밖 결과 나올수도 있음

• 콜백함수는 때로는 가독성이나 코드 재사용 면에서도 사용 됩니다.
• 비동기 방식으로 작성된 함수를 동기 처리하기 위해 필요합니다.

 

이해를 돕기 위해 setTimeout()을 이용해서 비동기 함수를 설명해보겠습니다.

function makeCharcter(id,job,func){
  let user
  setTimeout(function(){
    console.log('1초 뒤 실행')
    user ={
      id : id,
    job : job,
    info : id + job
    };
    return user 
  },1000)
  
}
const hoso = makeCharcter('hoso','warrior')
console.log(hoso)

결과

undefined
'1초 뒤 실행'

결과를 확인해 보면 console.log(hoso)의 값이 undefined고 user의 값이 나오지 않습니다. 이렇게 비동기적으로 실행을 하다보니 동기적으로 실행되야하는 console.log가 먼저 실행이 되고 1초뒤에 실행되는 함수가 실행됩니다. 그래서 이럴때를 위해서 callback 함수가 필요로 합니다.

 

function makeCharcter(id,job,func){
  let user
  setTimeout(function(){
    console.log('1초 뒤 실행')
    user ={
      id : id,
    job : job,
    info : id + job
    };
    func(user)
  },1000)  
}
makeCharcter('hoso','warrior',function(a){console.log('character:',a)})

이런식으로 말이죠.

 

그런데 이러한 callback 함수들이 계속계속x100 필요로 하다면... 정말 지옥에 갇힌듯한 느낌이 들겠죠. 이러한 것들을 해결하기 위해 Promise나 async/await를 사용해서 벗어나려고 하고 있습니다. 사실 Promise도 전 지옥이라고 생각합니다.

 

다음에 공부 할 내용은 Promise 입니다. 어떻게 비동기로 실행되는지 확인해 보아요.