Javascript 콜백과 익명함수

🎪 Javascript 콜백과 익명함수

- callback(콜백) 함수 : 함수가 나중에 불리는 함수

- 보통 콜백 함수 구현 시, 함수의 인자에 함수를 넣는 방식으로 진행한다

//1. sayHello라는 함수가 콜백 함수로 사용되는 예시를 보여줍니다.

function sayHello(){ //sayHello 라는 함수를 만듭니다.
	console.log('수강생 여러분 안녕하세요');
}

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

//getHuman의 파라미터인 callbackFunc에는 sayHello가 들어가고 sayHello가 실행됩니다.
getHuman(sayHello); //'나는 그랩이다'가 출력됩니다.

// 파라미터가 함수가 아니어서 아래 코드는 오류가 납니다.
getHuman(1);

 

- 또한 콜백함수 사용시 함수로 정의된 변수를 넣지 않고 바로 함수를 넣을수도 있는데 이를 "익명함수"라고 한다.

- 우선 익명함수부터 보자!

 

> 익명함수

// 익명함수 : grab이라는 변수에 익명함수를 저장한다
const grab = function(){
	console.log('this is grab');
}

 

- 콜백함수를 꼭 알아야 하는 이유는! javascript에서 기본으로 제공해주는 많은 함수, 라이브러리들을 사용할 떄 콜백 함수를 사용하기 때문이다!!

// 대표적으로 setTimeout, setInterval 함수가 있습니다.
// 이들은 javascript 기본으로 탑재되어 있는 내장함수입니다.

//이 두 함수는 첫 번째 인자에 콜백 함수를 넣고, 두번째에 ms 단위의 숫자를 넣는다.

// 함수가 3초 뒤에 실행된다
setTimeout(function(){
	console.log('3초 뒤에 실행됩니다!');
}, 3000)

// 함수가 1초마다 실행된다 - timer, 스톱워치 구현 시 많이 사용되는 내장함수이다
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) 
})