열정 실천

[JavaScript] CallBack 함수 본문

개발 공부/JS

[JavaScript] CallBack 함수

구운오니 2023. 5. 18. 03:22

CALLBACK FUNCTION

: 함수의 매개변수에 함수를 넘겨주는 것 

 

파라미터로 콜백함수를 전달받고 나중에 필요할 때 실행되는 함수이다.

 

 

//더하기 함수
function add(a,b){
	return a+b
}

//출력 함수
function printFunc(value){
	console.log(value);
}
 
printFunc(add(3,4));


이 코드는 add 함수에 a와 b 를 매개변수 값으로 넣어서 나온 결과값을

출력 함수의 매개변수로 전달해서 최종적으로 콘솔에 출력한다.

 

이 코드를 콜백함수로 구현하면 다음과 같다. 

 

function add(a, b, print){
	print(a+b);
}

function printFunc(value){
	console.log(value);
}

add(3, 4, printFunc);

 

add 함수의 마지막 매개변수로 printFunc 함수를 넘겨주었다. 

여기서 콜백함수가 printFunc이고,  add함수를 통해서 실행된다. 

 

 

 

 

🙄

 

 

 

자바스크립트에서 비동기적 처리를 하기 위해 콜백함수를 사용하는데 가장 대표적인 함수로는 setTimeOut이다. 

 

setTimeout(printFunc,3000);  //파라미터1 : 실행할 함수, 파라미터2 : ?초뒤

 

콜백함수를 중첩해서 사용하게 되면 코드 가독성이 떨어지고 콜백지옥에 빠지는 위험도 있다. 

그래서 요즘에는 Promiseasync/await을 많이 이용한다‼