콜백(Callback) 함수는 간단히 말하면 매개변수로 함수 객체를 전달해서 호출 함수 내에서 매개변수 함수를 실행하는 것을 말합니다.
콜백 함수 사용
다음과 같은 함수가 있다고 하면 다음과 같이 3가지 방법으로 실행이 가능합니다.
|
// 두번째 매개변수가 함수 입니다.
function greeting(name, callback){
let say = `안녕하세요!! ${name}님 반갑습니다.!!!`;
callback(say); // 함수 호출!!!
}
|
1. 익명의 함수 사용
|
greeting('한사람', function(message){ // 익명함수 전달
console.log(message);
});
|
2. 화살표 함수 사용
|
greeting('한사람', (message)=>{ // 화살표 함수 전달
document.querySelector("#result").innerHTML = message;
});
|
3. 함수의 이름 사용
|
greeting('한사람', showAlert); // 함수 이름 전달
function showAlert(message){
alert(message);
}
|
ex01.html 파일을 다음과 같이 만듭니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>자바스크립트 콜백 함수 란?</title> </head> <body> 콜백(Callback) 함수는 간단히 말하면 매개변수로 함수 객체를 전달해서 호출 함수 내에서 매개변수 함수를 실행하는 것을 말한다. <br> 콜백 함수 사용 원칙<br> 1. 익명의 함수 사용 <br> 2. 화살표 함수 모양의 콜백 <br> 3. 함수의 이름을 넘기기 <br> <hr> <div id="result"></div> <hr> <script> // 두번째 매개변수가 함수이다. function greeting(name, callback){ let say = `안녕하세요!! ${name}님 반갑습니다.!!!`; callback(say); // 함수 호출!!! } greeting('한사람', function(message){ // 익명함수 전달 console.log(message); }); greeting('한사람', (message)=>{ // 화살표 함수 전달 document.querySelector("#result").innerHTML = message; }); greeting('한사람', showAlert); // 함수 이름 전달 function showAlert(message){ alert(message); } </script> </html> | cs |
실행 결과 입니다.
greeting( ) 함수를 3번 호출했습니다.
콜백 함수를 이용하면 동일한 내용을 다양한 형태로 사용이 가능해집니다.
한번은 html로 다른 한번은 console창으로 그리고 마지막은 alert()창으로 호출했습니다.
'Front End > Javascript' 카테고리의 다른 글
| [JavaScript] 콜백(Callback) 함수 3(인사하기) (0) | 2024.10.24 |
|---|---|
| [JavaScript] 콜백(Callback) 함수 2(계산기) (0) | 2024.10.24 |
| [JavaScript] 맵(Map) to string, string to Map (0) | 2024.10.23 |
| [JavaScript] 맵(Map) to Object, Object to Map (0) | 2024.10.23 |
| [JavaScript] 맵(Map) 객체의 메서드들 (0) | 2024.10.23 |
