콜백함수란?
JavaScript 문은 한 줄씩 실행됩니다.
그러나 효과를 사용하면 효과가 완료되지 않은 경우에도 다음 코드 줄을 실행할 수 있습니다.
이로 인해 오류가 발생할 수 있습니다.
이를 방지하기 위해 콜백 함수를 만들었다!
콜백 함수는 현재 효과가 완료된 후에 실행됩니다.
자세하게 설명을 해보자!
js에서 함수도 객체이다.
그래서, 함수는 다른 함수의 인자로 쓰일 수도 어떤 함수에 의해 리턴될 수도 있다.
이런 함수를 고차 함수라고 한다.
결국, 인자로 넘겨지는 함수를 콜백 함수라고 한다.
또한,
단지 함수를 등록하기만 하고 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수!
아래 예제에는 숨기기 효과가 완료된 후 실행될 함수인 콜백 매개변수가 있습니다.
아래 예제에는 콜백 매개변수가 없으며 숨기기 효과가 완료되기 전에 경고 상자가 표시됩니다.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
alert("The paragraph is now hidden");
});
});
</script>
</head>
<body>
<button>Hide</button>
<p>This is a paragraph with little content.</p>
</body>
</html>
This is a paragraph with little content.
또다른 예제이다.
function introduce (lastName, firstName, callback) {
var fullName = lastName + firstName;
callback(fullName);
}
introduce("홍", "길동", function(name) {
console.log(name);
});
// 결과는 홍길동
위 예제를 보면, introduce 함수를 실행하면,
callback자리를 새로운 함수 function(name)으로 지정 해주면서 함수 안에서
callback(fullname)으로 실행 되는 함수가 된다.
필요한 이유
콜백함수를 설명할 때에는 변수의 유효범위(scope)에 대한 이야기,
동기/비동기(synchronous/Asynchronous)처리에 대한 이야기도 하면 좋을 것 같다.
1. 동기 : 하나의 요청이 오면 완료가 된 후 다음 요청을 실행하는 방식 - 순차적 로직흐름
2. 비동기 : 어떤 요청이 오면 완료가 되기 전에 다음 요청을 실행하는 방식
- 동시 효율적 처리 가능, 즉시 응답X 때문에 예상 밖 결과 나올수도 있음.,
콜백함수는 가독성이나 코드 재사용 면에서도 사용되지만,
비동기방식으로 작성된 함수를 동기 처리하기 위해 필요하다.
function findUserAndCallBack(id, cb) {
const user = {
id: id,
name: "User" + id,
email: id + "@test.com",
};
cb(user);
}
findUserAndCallBack(1, function (user) {
console.log("user:", user);
});
함수 findUserAndcallBack의 인자로 id 와 콜백 함수를 선언 하여 호출 하였다.
그래서 cb 매개변수는 function 익명 함수를 콜백 함수로 할당 받으며,
cb(user); 가 실행될 때 이 콜백 함수는 실행되게 된다.
결국 콜백 함수를 넣음에 따라 함수 내부에서 수행해주 때문에 결과값을 return 할 필요가 없다
function findUserAndCallBack(id, cb) {
setTimeout(function () {
console.log("waited 0.1 sec.");
const user = {
id: id,
name: "User" + id,
email: id + "@test.com",
};
cb(user);
}, 100);
}
findUserAndCallBack(1, function (user) {
console.log("user:", user);
});
결과
waited 0.1 sec.
user: {id: 1, name: "User1", email: "1@test.com"}
setTime()은 비동기 함수의 호출이다.
위에 예제는 결과값을 바로 리턴받지 않고,
그 결과값을 통해 처리할 로직을 콜백 함수로 넘겨서 제대로 구현을 하였다.
참고사이트 : https://velog.io/@ko1586/Callback%ED%95%A8%EC%88%98%EB%9E%80-%EB%AD%94%EB%8D%B0
'Web > jQuery' 카테고리의 다른 글
| TREE 구조를 이용한 jQuery 관련 메서드 (0) | 2022.12.30 |
|---|---|
| jQuery HTML DOM 조작 (0) | 2022.12.30 |
| jQuery 효과 메서드 (0) | 2022.12.30 |
| jQuery개념 (0) | 2022.12.29 |