ㅁ 콜백함수
- 인자로 다른 함수에 전달되어서 실행되는 함수
ㅁ 콜백함수 예시1
- 로그인 기능 구현시마다 아이디/비번/이메일/토큰 중에 매번 두 개를 체크해야된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 각 체크를 담당하는 함수들을 미리 정의
const fnIdCheck = () => { console.log("아이디체크"); }
const fnPwdCheck = () => { console.log("비밀번호체크"); }
const fnEmailCheck = () => { console.log("이메일체크"); }
const fnTokenCheck = () => { console.log("토큰체크"); }
// 로그인을 처리하는 함수 정의
const fnLogin = (fnCheck1, fnCheck2) => { // 체크해야될 두 개의 함수를 콜백함수로 전달받음
fnCheck1(); // 전달된 각 함수를 실행
fnCheck2();
}
</script>
<h2>콜백함수</h2>
<!-- case1. 로그인 시 아이디 및 비밀번호를 체크해야하는 경우 -->
<button onclick="fnLogin(fnIdCheck, fnPwdCheck)">로그인1</button>
<!-- case2. 로그인 시 이메일 및 비밀번호를 체크해야하는 경우 -->
<button onclick="fnLogin(fnEmailCheck, fnPwdCheck)">로그인2</button>
<!-- case3. 로그인 시 아이디 및 토큰을 체크해야하는 경우 -->
<button onclick="fnLogin(fnIdCheck, fnTokenCheck)">로그인3</button>
</body>
</html>
- 함수 내에서 실행시키고자 하는 함수를 각기 다르게 전달해주면 된다.
ㅁ 콜백함수 예시2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 각 체크를 담당하는 함수들을 미리 정의
const fnIdCheck = () => { console.log("아이디체크"); }
const fnPwdCheck = () => { console.log("비밀번호체크"); }
const fnEmailCheck = () => { console.log("이메일체크"); }
const fnTokenCheck = () => { console.log("토큰체크"); }
// 특정함수와 해당 함수를 실행시킬 횟수를 전달받는 함수 정의
const fnRepeat = (fnAction, count) => {
// fnAction : 콜백함수, count : 콜백함수를 실행시킬 횟수
for(let i=0; i<count; i++) {
fnAction();
}
}
fnRepeat( fnIdCheck, 10 ); // 이미 정의되어있는 함수 전달
fnRepeat( function() {
console.log("Hi EveryOne");
}, 20 );
fnRepeat( () => console.log("Do Action"), 30 );
</script>
</body>
</html>
- 각각 10번, 20번 반복되었다.
'03. 웹 표준 기술 > JavaScript' 카테고리의 다른 글
| [자바스크립트] 08.객체 - (2) (1) | 2024.08.14 |
|---|---|
| [자바스크립트] 08. 객체 (0) | 2024.08.13 |
| [자바스크립트] 07. 함수 (0) | 2024.08.13 |
| [자바스크립트] 실습문제3 - 배열관련 문제 (0) | 2024.08.12 |
| [자바스크립트] 06. 배열 (객체), 배열 관련 속성 및 메소드 (0) | 2024.08.12 |
