다음은 숫자 2개를 받고 원하는 계산을 해주는 함수를 콜백함수를 이용해서 만들어 보았습니다.
계산식을 고정하면 한가지 기능만을 가지지만 계산식을 함수로 받으면 하나의 함수가 다양한 기능을 가지는 똑똑한 함수가 되어 더욱 효과적으로 사용이 가능해 집니다.
다음과 같은 게산식을 받는 함수를 만들어 봅시다,
|
// 세번째 매개변수가 계산해 주는 함수이다.
function calc(num1, num2, callback){
return callback(num1, num2); // 함수 호출!!!
}
|
두 수의 덧셈을 하고 싶다면 다음과 같이 호출 합니다.
|
calc(num1, num2, (a,b)=>a+b)
|
두 수의 곱셈을 하고 싶다면 다음과 같이 호출 합니다.
|
calc(num1, num2, (a,b)=>a*b)
|
위와 같이 그떄 그때 세번째 매개변수로 계산을 수행하는 함수를 전달하면 1개의 함수를 다양한 형태로 사용이 가능해지는것 입니다.
ex02.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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바스크립트 콜백 함수 란?</title>
<script>
// 세번째 매개변수가 계산해 주는 함수이다.
function calc(num1, num2, callback){
return callback(num1, num2); // 함수 호출!!!
}
let num1 = 10, num2=3;
document.write(`${num1} + ${num2} = ${calc(num1, num2, (a,b)=>a+b)}<br/>`);
document.write(`${num1} - ${num2} = ${calc(num1, num2, (a,b)=>a-b)}<br/>`);
document.write(`${num1} * ${num2} = ${calc(num1, num2, (a,b)=>a*b)}<br/>`);
document.write(`${num1} / ${num2} = ${calc(num1, num2, (a,b)=>a/b)}<br/>`);
document.write(`${num1} % ${num2} = ${calc(num1, num2, (a,b)=>a%b)}<br/>`);
document.write(`${num1} ** ${num2} = ${calc(num1, num2, (a,b)=>a**b)}<br/>`);
</script>
</head>
<body>
</html>
|
cs |
실행 결과 입니다.
'Front End > Javascript' 카테고리의 다른 글
| [JavaScript] 콜백(Callback) 함수 4(활용 사례) (1) | 2024.10.24 |
|---|---|
| [JavaScript] 콜백(Callback) 함수 3(인사하기) (0) | 2024.10.24 |
| [JavaScript] 콜백(Callback) 함수 1 (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 |
