콜백-함수
코드 블록의 Try it Yourself 버튼으로 직접 실행할 수 있다.
구문
함수는 매개변수(parameter)를 넣을 수 있다.
함수는 값을 반환할 수 있다
함수는 javascript의 꽃이라고 불리는 이유는 함수가 정말 많은 곳에서 사용되기 때문입니다.
함수 중 callback(콜백) 함수의 개념을 이해 한다면 함수의 세계는 일차정복 하시는 겁니다.
콜백 함수는 함수가 나중에 불린다고 해서 CallBack 함수입니다. 보통 **콜백 함수를 구현할 때 함수의 인자에 함수를 넣는 방식으로 진행합니다. **
//1. sayHello라는 함수가 콜백 함수로 사용되는 예시를 보여줍니다.
function sayHello(){ //sayHello 라는 함수를 만듭니다.
console.log('안녕하세요');
}
**
f**unction getDog(callback){ //getDog 함수의 파라미터에는 함수가 들어갑니다.
callback(); //callback 파라미터는 함수이기에 실행시킬 수 있습니다.
}
//getDog의 파라미터인 callbackFunc에는 sayHello가 들어가고 sayHello가 실행됩니다.
getDog(sayHello) //'나는 댕댕이다'가 출력됩니다.
Info: 💡 모든 함수의 파라미터 이름은 자유롭게 설정할 수 있습니다. 즉 getDog(callback)을 getDog(cb) 이렇게 바꿔도 됩니다.
이렇게 콜백함수를 사용할 때 아래와 같이 함수로 정의된 변수를 넣지 않고 바로 함수를 넣을 수도 있습니다. 이것을 익명 함수라고 부릅니다
//아래와 같은 형식으로도 사용 할수 있습니다.
//1회용 함수인데 이런 함수는 메모리에 부담을 적게 줍니다.
getDog(function () {
console.log("나는 댕댕이다.");
});
Info: 1. getDog안에 있는 익명함수는 실제로 코드가 실행될 때 위에서 선언한 callback이라는 파라미터에 들어가게 됩니다.
- 만약 getDog(1) 이렇게 넣으면 어떻게 될까요? 1은 int형으로 실행할 수 없기에러가 반환 됩니다.
우리가 콜백 함수를 꼭 알아야 하는 이유는, javascript의 내장 함수나 라이브러리 사용시 주로 콜백 함수를 사용하기 때문입니다
// 대표적인 콜백함수인 setTimeout, setInterval 은
//javascript 내장함수입니다.
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)
})