일반함수
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>콜백함수-1(일반함수 풀이)</title>
<script>
//일반함수를 사용하게 되면 로직구현, 로직처리 부분까지 아래와 같이
//있으므로 코드의 중복도 있고 기능이 합쳐저 있기 때문에 유지보수에도
//좀 어려움이 존재할 것이다.
function calculator1(op, num1, num2) {
//로직 구현부
var result = "";
switch(op){
case "+" :
result = num1 + num2;
break;
case "-" :
result = num1 - num2;
break;
case "*" :
result = num1 * num2;
break;
case "/" :
result = num1 / num2;
break;
default :
result = "지원하지 않는 연산자임!";
}
//로직 처리부분
document.write("주어진 2개의 수의 연산결과 : " + result + "<br/>");
}
//일반 함수
function calculator2(op, num1, num2) {
var result = "";
switch(op){
case "+" :
result = num1 + num2;
break;
case "-" :
result = num1 - num2;
break;
case "*" :
result = num1 * num2;
break;
case "/" :
result = num1 / num2;
break;
default :
result = "지원하지 않는 연산자임!";
}
document.write("정답 : " + result + "<br/>");
}
calculator1("-", 500, 300);
calculator2("*", 500, 300);
</script>
</head>
<body>
</body>
</html>
콜백함수
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>콜백함수-2(콜백함수 풀이)</title>
<script>
//매개변수로 callback이 들어와서 결과값을 callback함수에 매개변수로 하여
//또 다른 함수를 호출하게 한다.
var result = "";
function calculator(op, num1, num2, callback) {
//로직 구현부
switch(op){
case "+" :
result = num1 + num2;
break;
case "-" :
result = num1 - num2;
break;
case "*" :
result = num1 * num2;
break;
case "/" :
result = num1 / num2;
break;
default :
result = "지원하지 않는 연산자임!";
}
//콜백함수 호출하고 있다.
callback(result);
}
//각각 로직 처리 부분을 함수로 만들었다.
function print1(result){
document.write("print1 주어진 두 수의 연산 결과 : " + result + "<br/>");
//print2(result,print3);
}
function print2(result){
document.write("print2 정답 : " + result + "<br/>");
//callback(result);
}
function print3(result){
document.write("print3 결과 : " + result + "<br/>");
}
//로직 구현 부분은 하나로 가져간 형태이고 로직 처리 부분은 3가지로
//나눠서 만들었다.콜백함수의 장점은 위와 같이 구현, 처리하는 부분을
//분리해둠으로써 유지보수 편리하고 아울러 가독성도 좋다.
calculator("-", 500, 300, print1);
calculator("-", 500, 300, print2);
calculator("-", 500, 300, print3);
</script>
</head>
<body>
</body>
</html>
콜백함수
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>콜백함수-3(콜백함수 풀이)</title>
<script>
//콜백 함수를 선언하고 호출하는 형태
function add(n1, n2, callback){
var temp = n1 + n2;
callback(temp);
document.write("add()함수" + temp + "<br/>");
}
function result(value){
document.write("result()함수 결과 : " + value + "<br/>");
}
add(50, 100, result);
</script>
</head>
<body>
</body>
</html>
댓글남기기