04-009 게시글에서 설명한 것 처럼 이번 내용은
함수가 변수처럼 선언하는 것이다. 하나의 자료형이다. 라는 내용이 기반이 된다.
인자에 함수 선언은 함수가 object 타입의 자료형으로
함수를 호출 할 때 인자 값으로 보낸다는 의미이다.
function 함수이름(var){
함수 내용
}
함수이름(function(){
전달할 함수 내용
});
함수를 매개변수로 전달은 위의 내용과 비슷한데
함수1(함수2)와 같이 이미 선언된 함수를 인자로 사용한다.
function 함수이름(var){
}
function 함수이름2(){
}
함수이름(함수이름2);
위와 같이 사용한다.
익명 함수를 리턴은 함수가 하나의 자료형이기 때문에 return 값에도 이용 할 수 있다.
단, 함수를 리턴 받았을 경우 리턴 받은 함수에는 (), 괄호가 안 붙어 있기 때문에 괄호를 한번 더 써 주어야 한다.
function 함수이름(){
var f = function(){
}
return f;
}
함수이름()();
다음의 예제로 확인해보자.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
</style>
</head>
<body>
<h1>함수2</h1>
<h3>매개변수로 함수 전달</h3>
<p>함수도 하나의 자료형이기 때문에 매개변수로도 전달 가능하다.</p>
<h4>익명함수를 매개변수로 활용</h4>
<div id="area1" class="area"></div>
<script>
function callFunctionTenTimes(otherFunction) {
for(var i = 0; i < 10; i++){
otherFunction(i);
}
}
callFunctionTenTimes(function (i) {
var area1 = document.getElementById("area1");
area1.innerHTML += (i + 1) + "번째 함수 호출<br>";
})
</script>
<h4>선언적 함수를 매개변수로 전달</h4>
<button onclick="callJustFunction(justFunction);">실행하기</button>
<div id="area2" class="area"></div>
<script type="text/javascript">
function callJustFunction(otherFunction) {
for(var i = 10; i > 0; i--){
otherFunction(i);
}
alert("펑펑! 폭파되엇습니다!!")
}
function justFunction(i) {
if(i > 5){
alert(i + "번만 더 클릭하면 자동으로 폭발합니다.");
}else if (i > 3) {
alert("마지막 경고입니다! " + i + "번만 더 클릭하면 자동으로 폭발합니다.");
}else if (i > 1) {
alert("분명 경고했습니다! " + i + "번만 더 클릭하면 진짜 폭발합니다.");
}else{
alert("한번만 더 클릭하면 폭발합니다!!!!!!");
}
}
</script>
<!-- 함수를 하나의 자료형이라고 받아들여야 쉽게 이해할 수 있다. -->
<h4>익명함수를 리턴하는 함수</h4>
<input type="text" id="name">
<button onclick="callFunction();">실행확인</button>
<div id="area3" class="area"></div>
<script type="text/javascript">
function returnFunction() {
var name = document.getElementById("name").value;
var f = function() {
alert(name + "님 환영합니다.");
}
return f;
}
function callFunction() {
returnFunction()();
// 괄호를 한번 더 해야한다. returnFunction() 자체가 함수 이름이라고 생각하면 된다.
}
</script>
</body>
</html>