[Javascript] 콜백함수(Callback Function)란?

자바스크립트를 공부하다가

개인적으로 제일 때려치우고 싶었던..ㅠㅡㅠ 그만큼 난관이었던 비동기 프로그래밍

앞으로 비동기를 완벽하게 내 것으로 만들기 위한 공부를 시작하려 한다.

가장 먼저 콜백 함수에 대해 공부를 해보았다.

---

콜백 함수란?

정의 함수에 파라미터로 들어가는 함수를 의미한다.
용도 함수를 순차적으로 실행하고 싶을 때 사용한다.

 

말 그대로 나중에 호출되는 함수를 의미한다.

콜백 함수라 하여 그 자체로 특별한 선언이나 문법적인 특징을 가지고 있지 않다.

 

document.querySelector('.button').addEventListener('click', function() {
얘가 콜백 함수}

---

왜? 콜백 함수가?

자바스크립트의 비동기 처리방식은 동기 처리 방식과 다르게

동기 처리는 코드가 순서대로 실행이 되는 반면(ex. 1번 함수 실행 -> 1번함수 끝 -> 2번 함수 실행..... 3 순서대로)

비동기 처리는 1번 함수가 종료되지 않아도 2번 실행 3번 실행되는 방식이다.

 

그만큼 예측하기 어렵게 실행되는 이유로 함수를 순차적으로 사용하기 위해 사용된다

---

콜백 함수의 원리

first라는 함수 다음에 second 함수가 오게 하기 위한 코드를 작성해보자

function first(파라미터) {
 console.log(1)
 파라미터()
}

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

first(second) //first 함수안의 코드를 실행해라 그런데 파라미터에 second 집어넣어서!

결과

 

물론 위와 같은 방법 말고도

 

first()
second()

 

를 입력해도 똑같은 결과가 나올 것이다.

하지만 first 함수가 setTimeout과 같은 메서드를 통해 비동기 처리가 되었을 때는 

같은 결과를 기대하기는 어렵다.