[Javascript] callback(콜백)함수

-함수는 매개변수(parameter)를 넣을 수 있다.

-함수는 값을 반환할 수 있다.

 

함수가 javascript의 꽃이라고 불리는 이유는 함수가 정말 많은 곳에서 사용되기 때문이다.

 

"callback(콜백)함수"

콜백 함수는 함수가 나중에 불린다고 해서 CallBack함수이다.

보통 콜백 함수를 구현할 때 함수의 인자에 함수를 넣는 방식으로 진행한다.

 

//1. sayHello라는 함수가 콜백 함수로 사용되는 예시

function sayHello(){
	console.log('여러분 안녕하세요');
}

function getHuman(callback){  //getHuman 함수의 파라미터에는 함수가 들어간다.
	callbackFunc();  //callbackFunc 파라미터는 함수이기에 실행시킬 수 있다.
}

//getHuman의 파라미터인 callbackFunc에는 sayHello가 들어가고 sayHello가 실행된다.
getHuman(sayHello) //'여러분 안녕하세요' 가 출력

 

아래와 같이 콜백함수를 사용할 때 정의된 변수를 넣지 않고 바로 함수를 넣을 수도 있다.

이를 "익명 함수"라고 부른다.

getHuman(function(){
	console.log('나는 민수이다.')
})

 

콜백 함수를 알아야 하는 이유는?

javascript에서 기본으로 제공해주는 많은 함수, 라이브러리들을 사용할 때 콜백 함수를 사용하기 때문이다.

//대표적으로 setTimeout, setInterval 함수가 있다. 이들은 javascript가 기본으로 탑재되어 있는 내장함수이다.
//이 두 함수는 첫 번째 인자에 콜백 함수를 넣고 두번째에 ms단위의 숫자를 넣는다.
setTimeout(function(){
	console.log('3초 뒤에 실행됩니다.');
}, 3000)

setInterval(function(){
	console.log('1초마다 출력됩니다.')
}, 1000)

 

[참고]

콜백 함수에는 보통 인자를 넣어서 많이 사용

//콜백에 사용될 함수
function callbackFunc(name){
	console.log(name);
}

function sayHello(callback){
	var text = 'hello';
    callback(text);
}

sayHello(callbackFunc); //hello가 출력
sayHello(function(value){ //위와 동일하게 value에는 hello가 들어감
	console.log(value)
})