callback

1. 다른 함수의 인자로써 이용되는 함수.

2. 어떤 이벤트에 의해 호출되어지는 함수.

쉽게 말하자면 A라는 함수가 실행하는 동안 B함수는 그 일이 끝나길 기다리지 않고 A함수가 부를때까지 B함수를 실행하는것이다
(아니면 실행하지 않고 기다렸다가 나중에 실행할 수도 있다)
자바스크립트의 비동기 처리 방식의 문제점을 해결해주기 위해 특정 시점에서 호출이 되도록 사용하는 함수이다.

그렇기때문에 비동기 방식을 사용합니다

대표적인 콜백함수

<button id="button" onclick="onClickButton();">버튼</button>
<script>
function buttonClick() {
	alert("버튼을 눌렀습니다!!");
}
</script>

Html의 onclick에 buttonClick함수는 브라우저의 javascript API에서 DOM 이벤트 핸들러에 전달(등록)되고, 해당 버튼에 클릭이벤트가 발생했을때 이벤트 핸들러가 콜백함수를 호출한다.

function fn_fakeAsync(callback){
  calback();
}

console.log("------- fn_fakeAsync 호출 직전 -------");

fn_fakeAsync(function(){
  console.log("이게 비동기적으로 동작하길 바래");
});

console.log("------- fn_fakeAsync 호출 이후 -------");

// 결과
------- fn_fakeAsync 호출 직전 -------
이게 비동기적으로 동작하길 바래
------- fn_fakeAsync 호출 이후 ------

setTimeout

setTimeout은 콜백함수의 실행을 지정된 밀리초만큼 지연하는 내장함수이다.

function fn_newCallBack(){
  console.log("비동기적으로 호출되고 싶다.");
}

console.log("-------  호출 직전 -------");

setTimeout(fn_newCallBack, 3 * 1000); // 3초 뒤 콜백 호출

console.log("-------  호출 이후 -------");

//결과
-------  호출 직전 -------
-------  호출 이후 -------
비동기적으로 호출되고 싶다.

출처-https://www.hanumoka.net/2018/10/24/javascript-20181024-javascript-callback/