JS 에서 함수를 생성하고 그 안에서 생성한 변수는 지역변수가 되어 바깥에서는 사용 할 수 없다.
하지만 클로져 기능을 이용하면 함수 바깥으로 꺼내어 사용할 수 있다. (return 기능)
다음 예제를 확인해보자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>클로저</h1>
<h3>지역변수의 스코프</h3>
<p>함수 내부에 선언된 변수는 함수 밖에서 사용할 수 없다.</p>
<button onclick="test1();">실행확인</button>
<script type="text/javascript">
function test1() {
var name = "난이름";
// alert(name);
}
// alert(name);
</script>
<hr>
<h3>클로저</h3>
<p>지역변수는 함수가 실행될 때 생성되고 함수가 종료될 때 사라진다<br>
하지만 함수를 리턴하는 함수(클로저)를 이용하면 규칙을 위반할 수 있다.</p>
<button onclick="callCloser();">실행확인</button>
<script type="text/javascript">
function test2(name) {
var output = "hello " + name + "님!";
// 함수를 리턴한다는 의미
return function(){
return output;
}
}
function callCloser() {
alert(test2(prompt())());
}
</script>
<h3>여러 개의 클로저</h3>
<button onclick="test4(this);" id="js">JavaScript</button>
<button onclick="test4(this);" id="jq">JQuery</button>
<script type="text/javascript">
function test3(subject) {
var out = "오늘 배울 내용은 " + subject + "입니다.";
return function() {
return out;
}
}
function test4(button) {
var btn1 = document.getElementById("js");
var btn2 = document.getElementById("jq");
if(button == btn1){
btn1.style.display = "none";
btn2.style.display = "block";
alert(test3(btn1.innerHTML)());
}else {
btn2.style.display = "none";
btn1.style.display = "block";
alert(test3(btn2.innerHTML)());
}
}
</script>
</body>
</html>