Function

모던 웹을 위한 JavaScript jQeury 입문

함수를 매개 변수로 받는 함수

익명 함수를 매개 변수로 받는 함수

otherFunction();을 자세히 살펴보자.
(function () { alert('Hello World..!');})(); 익명함수를 만들고 만들어진 익명함수를 바로 호출하는 형식이다.

function() {
alert('Hello World..!')
}

상기의 함수만 가지고는 선언만 되어 있을뿐 실행할 수는 없는 상태이다.

							// 함수를 10번 호출하는 함수
							function callFunctionTenTimes (otherFunction) {
								for (var i=0; i<10; i++) {
									otherFunction();
								}
							}
							// 	callFunctionTenTimes() 함수를 호출
							callFunctionTenTimes(function  () {
								alert('Hello World..!');
							});
						

선언적 함수를 매개 변수로 받는 함수

// 함수를 10번 호출하는 함수
function callFunctionTenTimes (otherFunction) {
	for (var i=0; i<10; i++) {
		otherFunction();
	}
}
// justFunction() 함수
function justFunction () {
	alert("Hello World..!");
}

// callFunctionTenTimes() 함수 호출
callFunctionTenTimes(justFunction);
						

함수를 리턴하는 함수와 클로저

익명함수를 리턴하는 함수

outerFunction()();
아래 코드에서 함수실행문이 2개 중첩되어 있는 것을 확인할 수 있다. 오타가 아니다.
왜그럴까? outerFunction함수를 호출하면 익명함수를 리턴한다. 호출된 함수는 그냥 함수참조가 넘겨질 뿐 실행이 되지 않는다.
따라서 리턴된 함수를 다시 실행하기 위해서는 실행문이 하나 더 필요하다.

function outerFunction () {
	return function  () {
		alert("Hello World .. !");
	};
}
outerFunction()();
						

지역변수의 유효범위

아래 코드를 실행하면 오류발생 경고창이 뜬다.
"Uncaught ReferenceError: output is noe defined"
함수 안에 있는 변수는 지역 변수이므로 함수 외부에서 사용할 수 없다. 지역 변수는 함수가 실행될 때 생성되고 함수가 종료될 때 사라진다.
하지만, 클로저를 사용하면 이 규칙을 위반할 수 있다.

//함수 선언
function test (name) {
	var output = 'Hello '+ name + ' ..!';
}
// 출력
alert(output);
						

클로저1

아래 코드는 오류 발생 없이 정상적으로 실행된다.
자바스크립트 스스로 아직 지역 변수 output을 지우면 안 된다는 것을 익식하고 남겨두므로 발생하는 특징이다. 이것을 클로저라 한다.
클로저의 정의가 워낙 다양하다. 이렇게 지역 변수를 남겨두는 현상을 클로저라고 부르기도 하고, 함수 outFunction() 내부의 변수들이 살아 있는 것이므로 함수 outFunction()으로 인해 생성된 공간을 클로저라고 부르기도 한다. 또한, 리턴하는 함수 자체를 클로저라고 부르기도 하며, 살아남은 변수 output을 클로저라고 부르기도 한다. 정의가 워낙 많으므로 헷갈리 수 있지만, 클로저가 어떤 것인지 확실히 감만 잡으면 된다.

function outerFunction (name) {
	var output = 'Hello '+name+'..!';
	return function  () {
		alert(output);
	}
}
outerFunction('RintIanTta')();
						

클로저2

추가로 지역 변수 output을 남겨둔다고 외부에서 마음대로 사용할 수 있는 것은 아니다. 반드시 리턴된 클로저 함수를 사용해서만 지역 변수 output을 사용할 수 있다. 클로저 함수로 인해 남은 지역 변수는 각각의 클로저의 고유한 변수이다. 아래 코드는 그것을 보여준다.
함수 first()와 second()를 실행하면 각 함수가 아래 실행버튼을 클릭해서 나오는 결과처럼 고유한 지역 변수 output을 가지고 있다는 것을 알수 있다. 클로저 함수를 어디에 사용하는지 감이 잘 잡히지 않을 수 있다. 클로저와 관련된 것은 직접 여러 프로그램에서 접하면서 "이러한 경우에 사용하면 좋겠다"라고 느낄 때 정확히 감을 잡을 수 있는 것이다. 캡슐화 부분에서 다시 한번 클로저와 관련된 내용을 접하게 된다.

function outerFunction (name) {
	var output = 'Hello '+name+'..!';
	return function  () {
		return output;
	}
}

// 변수 선언
var first= outerFunction('Javascript');
var second= outerFunction('jQuery');

// 출력
alert(first());
alert(second());
						

##참고사항 - 함수 호출과 이벤트

case1

window.onload = function  () {
	(function  () {
		alert("함수 실행");
	})();
}
						

case2

window.onload = function  () {
	function  () {
		alert("함수 실행");
	}
}
						

case3

function init() {
	alert("함수 실행");
}
window.onload = init;
						

case4

var init = function () {
	alert("함수 실행");
}
window.onload = init;
						

case5

var init = function () {
	return function  () {
		alert("함수 실행");
	}	
}
window.onload = init(); // return 값으로 함수 참조를 전달한다.
						

case6

var init = function () {
	return function  () {
		alert("함수 실행");
	}()	
}
window.onload = init;
						

case7

var init = function () {
	return alert("함수 실행");
}
window.onload = init;
						

case1과 case2를 비교해 보자. 차이를 찾았는가? 우선 onload 이벤트에 익명함수를 연결하는 모습부터 살펴보면, 두 경우 모두 동일하다. 함수실행을 이벤트에 종속시킬 경우, 이벤트에 함수를 호출하는 것이 아니라 함수참조를 이벤트에 전달한다. 함수실행과 함수참조 전달은 다르다.