<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
/*
함수 표현식
- 자바스크립트에서 함수는 특수한 구조라기보다는 특수한 형태의 값으로 취급됨
- 따라서, 값으로서 변수에 대입하거나 출력하는 등의 작업도 가능함
*/
// 함수 선언
function func1() {
alert("Hello, World!");
}
// 함수 호출
// func1();
// alert(func1); // func1 함수의 문장이 그대로 출력됨
// 함수 표현식(함수의 이름 없이 선언문 만으로 함수를 정의하여 변수에 대입)
var f = function() {
alert("함수 표현식으로 선언된 함수");
}
// 함수 표현식으로 선언된 변수 f 값 출력
// alert(f); // 함수 코드가 출력됨
// f(); // 함수를 저장한 변수명을 함수 호출 문장 형식으로 사용 시 함수 실행 가능함
// => 주의! 반드시 () 를 포함해야한다!
// 기존에 선언된 함수를 복사하여 다른 변수에 저장도 가능
var copyF = f;
// copyF(); // 복사된 함수를 실행(출력문이 실행됨)
// 함수 표현식이 아닌 기본 함수 선언 방식으로 선언된 함수도 이름을 사용하여 복사 가능
var copyF2 = func1; // func1() 함수 복사
// func1(); // 이 함수 호출 결과와
// copyF2(); // 이 함수 호출 결과는 같다!
// =================================================================
/*
콜백 함수
- 함수 내에서 어떤 조건에 따라 나중에 실행되는 함수
- 자바스크립트에서는 보통 함수 파라미터에 다른 함수들을 전달한 뒤
특정 조건을 만족할 경우 전달받은 함수 중 하나를 호출하는 용도로 사용
- 콜백 함수는 즉시 실행되지 않고, 전달된 함수 내에서 따로 호출됨
*/
function showOk() {
alert("종료하겠습니다.");
}
function showCancel() {
alert("종료를 취소하겠습니다.");
}
function selectMale() {
alert("남성");
}
function selectFemale() {
alert("여성");
}
// 함수 호출 시 파라미터로 함수를 전달하면 변수를 지정하여 해당 함수를 저장 가능
// => 이 때, 파라미터로 전달받아 함수 내에서 별도로 호출되는 함수를 콜백함수라고 함
function ask(question, yes, no) {
// 함수를 yes, no 변수에 대입했으므로 함수 내에서 전달받은 함수 호출 가능함
if(confirm(question)) { // Confirm 창에서 확인 버튼 클릭 시
yes(); // yes() 함수 호출 시 showOk() 함수 내용과 동일한 코드가 실행
} else { // Confirm 창에서 취소 버튼 클릭 시
no(); // no() 함수 호출 시 showCancel() 함수 내용과 동일한 코드가 실행
}
}
// ask 함수 호출
// => 질문으로 매개변수에 "종료하시겠습니까?" 전달
// => 파라미터로 2개의 함수(showOk(), showCancel())도 함께 전달(호출이 아니므로 소괄호는 제외)
ask("종료하시겠습니까?", showOk, showCancel);
// 동일한 ask() 함수를 호출하여 전혀 다른 질문과 전혀 다른 작업을 실행 가능
ask("여성입니까?", selectFemale, selectMale);
// --------------------------------------
// 함수 표현식을 활용한 콜백 함수 사용 예
function ask2(question, yes, no) {
if(confirm(question)) { // Confirm 창에서 확인 버튼 클릭 시
yes();
} else { // Confirm 창에서 취소 버튼 클릭 시
no();
}
}
// ask2() 함수를 호출할 때 파라미터에 전달할 값으로 함수를 직접 선언하여 전달도 가능
ask2(
"주문을 취소하시겠습니까?",
function() { alert("주문을 취소하셨습니다."); }, // 두번째 파라미터(yes)에 전달되는 함수
function() { alert("주문을 계속하겠습니다."); } // 세번째 파라미터(no)에 전달되는 함수
);
</script>
</head>
<body>
</body>
</html>
