[js] closure 개념

출처 : medium.com/@alvin.h/oop-js-7-%ED%81%B4%EB%A1%9C%EC%A0%80-8e5adbe67722

OOP JS (6) — 클로저

간단예제

var glo = 'global';

 

function outer() {

  var out = 'out';

  function inner() {

      var a = 'in';

      //var out = 'inner-out'

      console.log(a);

      console.log(out);

      console.log(glo);

  }

  inner();   

}

function outer2() {

  var out = 'out';

  function inner() {

      var a = 'in';

      //var out = 'inner-out'

      console.log('outer2 : ' + a);

      console.log('outer2 : ' + out);

      console.log('outer2 : ' + glo);

  }

  return inner;  

}

 

var outerReturn = outer2(); // closure반환

outerReturn(); // closure 실행

console.log(outerReturn);

 

<script>
function closureTest(a){
	//  return되는 함수가 클로저
	// 클로저란 특정 함수 내에 정의된 지역 변수(Local Variable)를 외부에서도 참조(By Reference) 할 수 있는 함수
	return function(b){
		return a + b;
	}
}

var test = closureTest(1); // a = 1 인수로 “1”을 지정하면 중첩 함수인 클로저는 그 값을 참조한다.
// test = function(b) {
//	return 1 + b // 최종적인 클로저는 ‘인수로 받은 b에 기존에 포인터로 가지고 있던 “1”을 더해서 반환
// }
//alert(test(2)); // b = 2



function buildList(list) {
	var result = []; //함수를 담을 배열

	for(var i = 0; i < list.length; i++) {
		var item = 'item' + list[i];
		result.push( function() {alert(item + ' ' + list[i])} ); 
		// 클로저 안의 list[[i]가 undefined로 나타남.
		// item과 list[i] 값은 result 배열에 push 될 때, 값 자체가 복사되서 들어가는 것이 아니라 참조되어 들어간다.
	}

	return result; // 함수 담은 배열 반환시 i의 값은 3이므로 list[[i]가 undefined로 나타나고 item도 마지막값이 item3으로 보인다.
}

function testList() {
	var fnlist = buildList([1,2,3]);

	for(var j = 0; j < fnlist.length; j++) {
		fnlist[j]();
	}
}

testList();

function buildList2(list) {
	var result = [];

	for (var i = 0; i < list.length; i++) {
		// “i”의 값을 익명 함수의 매개변수로 넘겨 “ii” 인자 변수로 받음으로써 “i” 변수의 참조에서 벗어날 수 있다.
		(function(ii) {
			var item = 'item' + list[ii]; // ii는 상수가 된다.
			result.push( function() {alert(item + ' ' + list[ii])} );
		})(i);
	}

	return result;
}

function testList2() {
	var fnlist = buildList2([1,2,3]);

	for (var j = 0; j < fnlist.length; j++) {
		fnlist[j]();
	}
}

testList2();
</script>

------------

    <div id="div0">click div0</div>
    <div id="div1">click div1</div>
    <div id="div2">click div2</div>

function func(i) {
    return function() {
        console.log('div' + i);
    }
}
for(var i=0; i< 3; i++) {
    document.getElementById('div'+i).addEventListener('click',
        func(i)
    )
}

function add() {
    var num=0;
    return function(){
        console.log(num);
        num++;
    }
}
var fn = add();
for(var i=0; i< 3; i++) {
    fn();
}