[입문] callback함수 정리하기

🥉 초보자 레벨로 이해하기

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

1-2. 예시
아래 소스에서는 addEventListener의 argument자리에 function(){...}이라는 anonymous function이 들어간 것을 볼 수 있다. 이러한 함수를 콜백함수라고 한다. 당연히 EventListener를 Add한 객체를 클릭했을 때 function(){...} 함수가 실행된다.

document...addEventListener('click', function(){
// 버튼 클릭 시 이 부분에 들어가는 내용이 실행됨
})

1-3. 특징
- 다른 곳에서 만든 함수도 콜백함수로 넣을 수 있음
- 콜백함수에 함수명을 아무렇게나 작명할 수도 있다.(무조건 anonymous function이 아니라는 뜻)
- 콜백함수가 필요한 함수들에만 콜백함수를 사용할 수 있음

🥇 심화학습

2-1. 어떻게 짜야할까?
함수에 파라미터로 들어가는 함수. 순차적으로 실행하고 싶을 때 씀.

<script>
	function first(파라미터){
   	파라미터()
    }
    function second(){
    }
    
    first(second); // first 함수를 실행한 뒤 second 함수를 실행시킬 수 있다.
</script>

2-2. 어쩔 때 사용해야할까?
- 협업을 할 때 특정 함수 뒤에 여러 함수들이 올 일이 생길 때
- 비동기처리시 함수 실행 타이밍이 애매해질 때

2-3. 단점
- 함수가 많아지면 지저분해질 수 있음
- 콜백함수로 디자인하지말고 Promise 또는 async await을 이용할 수 있음

참고 :  https://www.youtube.com/watch?v=-iZlNnTGotk&t=21s