비동기 Async) callback

함수가 또 다른 함수를 부르는 것 Callback() 함수라고 한다 

---

자바스크립트는 function으로 호출된 순서대로 작동한다.

<p id = "demo">
</p>

<script>
function myDisplayer(some){
	document.getElementById("demo").innerHTML = some;
}

function first(){
	myDisplayer("hello");
}

function second(){
	myDisplayer("hi")'
}

second();
first();
</script>

 

first()인 hello string이 출력된다. 이 처럼 , 적은 순서(sequence)대로 출력되는 것이 아니라, 호출되는 함수의 순서대로 출력된다.

 

 

JavaScript functions are executed in the sequence they are called. Not in the sequence they are defined.

 

호출 순서를 생각할 떄 , 호출된 함수부터 보고 위로 따라 가자

->(function mydisplayer or function first() 등등 부터 보지 말고 , second() first() 밑에 있는 호출 함수부터 보고 위로 올라가자 

 

 

---

10을 출력하는 코드를 짜보았다.

<script>

function myDisplayer(some){
	document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1,num2){
	let sum = num1+ num2;
    return sum;
}
let result = myCalculator(5, 5);
myDisplayer(result);
</script>

 

출력은 되지만, 함수를 두번 호출하게 되어 시간이 걸린다. 이러한 번거로움을 줄이기 위해 콜백함수를 쓸 수 있다.

 

 

<script>

function myDisplayer(some){
	document.getElementById("demo").innerHTML = some;
}


function myCalculator(num1,num2,callBack){
	let sum = num1 + num2;
    callBack(sum); 
    }

myCalculator(5,5,myDisplayer);

</script>

</body>

함수를 myCalculator()로 딱 한번 호출하는 방법이다. 이 함수 안에 myDisplayer라는 함수를 넣어줘서 함수를 두번 호출하지 않아도 된다.

이 코드의 콜백함수는 myDisplayer이다.

참고로 js는 document에 호출한 함수가 보여야하기 때문에 display함수를 꼭 만들어 준다 !