콜백(Callback)함수의 모든것

콜백(Callback)함수

정의 : 함수에 파라미터로 들어가는 함수
용도 : 순차적으로 실행하고 싶을 때 씀

<script>
  document.querySelector('.button').addEventListener('click',function 함수명(){})
	setTimeout(function 함수명(){
    }, 1000)
</script>

특징 1) 다른데서 만든 함수도 콜백함수로 넣을 수 있음
특징 2) 콜백함수에 함수명 쓸데없이 작명할 수 있음
특징 3) 콜백함수가 필요한 함수들에만 콜백함수 사용가능

<script>
  function first(파라미터){
  	second()
}

function second(){
}

first(second) =>"first 함수안의 코드 실행해주세요~ 근데 파라미터에 second 집어넣어서요"

</script>

<script>
  function first(파라미터){
  	console.log(1)
  	second()
}

function second(){
  console.log(2)
}

first(second) =>"first() 실행해주세요. 파라미터로 second 넣어서"

</script>

콜백함수를 사용하지않고도 같은 결과를 나타낼 수 있다.

first() 
second()

하지만 콜백함수 없이 이래도 결과는 같음 == 굳이 콜백함수를 쓸필요가 없음

협업을 하다보면

팀원1 : first() 후에 console.log(2) 바로 하고싶어요.
팀원2 : first() 후에 console.log(4) 바로 하고싶어요.
특정코드를 순차적으로 실행할수있기때문에 남이쓸코드를 만들때 사용하는게 콜백함수이다.
콜백함수의 단점 : DB에서 데이터뽑을때 A뽑고 B뽑고 C뽑고 하고싶은데 이게 싫으면 callback함수가아니라 promise라던가, async await를 사용하면된다.

<script>
  db.collection('post').findOne(A,function(){
  	db.collection('post').findOne(B,function(){
      	db.collection('post').findOne(C,function(){
        })
      })
  })

	first(second)

</script>

마치며

요즘엔 callback를 비효율적인 코드라해서 사용하지 않는 추세인것으로 알고있다. 사용하지않는다고 몰라도 된다는 건 아니라고 생각한다. callback함수의 단점을 보완한 promise, async await는 다음 글에서 정리할예정이다.