Java Script - 함수 : 콜백함수

콜백함수 

정의 : 함수에 파라미터 형태로 들어가는 함수

용도 : 순차적으로 코드를 실행하고 싶을 때 사용

 

주로 이벤트리스너를 배우게되면 콜백 함수를 가장 먼저 발견하게 되는데요

HTML의 어떤 버튼을 눌렀을 때 특정 자바스크립트 코드를 실행하고 싶다면 이벤트리스너를 만들게 됩니다.

        <script>
            document.querySelector('.button').addEventListener('click', function(){ 	//콜백함수
            어쩌꾸 저쩌구 버튼 실행해주세용
           })
        </script>

addEventListener함수의 파라미터 자리에 또 하나의 함수(function(){})를 집어넣고 있습니다. 이것이 콜백함수입니다.

 

 <script>
 	setTimeout(function(){
    	어쩌구 저쩌구
    }, 1000)
 </script>

위의 setTimeout함수에서도 콜백함수를 발견할 수 있습니다. 1초 경과 후에 어쩌구저쩌구 실행해주세요 라는 뜻입니다. 

이 함수에서도 콜백함수를 집어넣게 되어있습니다. 

 

콜백 함수의 특징이 있는데요

첫 번째. 다른 곳에서 정의한 함수도 콜백함수로 넣을 수 있다. 

두 번째. 콜백함수에 함수명 작명 가능하다.

세 번째. 콜백함수가 필요한 함수들에만 콜백함수 사용가능 (ex. addEventListener, setTimeout ...)

 

 

---

 

 

콜백함수의 원리 

앞에서 콜백함수가 무엇인지 알아보았습니다. 그럼 어떤 식으로 코드를 짜야 함수를 집어넣을 수 있는지 알아보도록 합시다.

1과 2가 순차적으로 출력되도록 하는 코드를 짜보겠습니다.

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

 위 코드는 "first함수안의 코드 실행해주세요 근데 파라미터에 second집어넣어서요"라고 말하고 있습니다.

결과는 1과 2가 순차적으로 출력됩니다.  근데 왜 콜백함수를 쓰는걸까요? 

first()

second()

이렇게 써도 순차적으로 1, 2가 출력 될텐데 말이죠?

 

 보통은 남이 쓸 코드 만들 때 자주 씁니다. 팀원들이 first함수를 자주 사용한다면 first()이후에 새로운 요구사항이 생길 수 있습니다. "first()후에 3출력하고 싶어요"  "first()후에 4를 출력하고 싶어요" 등등 first()에 콜백함수를 뚫어놓으면 여러번 사용가능하고 안전성도 보장되게 사용 가능합니다.

 

그외에 추가로 promise, async, await 로도 순차적으로 디자인 가능합니다.

 

참고영상 https://www.youtube.com/watch?v=-iZlNnTGotk