[JavaScript] 버튼클릭 상태변수 toggle - true false / -1 1 / 1 0, for문 i값 클로저

JavaScript

[JavaScript] 버튼클릭 상태변수 toggle - true false / -1 1 / 1 0, for문 i값 클로저

힘없는염소 2015. 2. 3. 17:21

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
</head>
<body>
 
<button>toggle1</button>
<button>toggle2</button>
<button>toggle3</button>
 
<script>
 
    var isBool = true;
    function toggle0() {
        
        isBool = !isBool;
        console.log(isBool);  // false / true
    }
 
    var count = 1;
    function toggle1() {
        
        count = count * -1;
        console.log(count);  // -1 / 1
    }
 
    var result = 0;
    function toggle2() {
        
        result = !result ? 1 : 0;
        console.log(result);  // 1 / 0
    }
 
 
    // 클로저는 자신의 범위(Scope) 밖에 있는 변수들에 접근할 수 있는 함수를 의미
    for(var i=0; i<=2; i++) {
        
        (function(n) {   // 익명함수를 통해 전달된 i값은 지역변수n에 할당된다.
            
            document.getElementsByTagName("button")[n].onclick = function() {
                // console.log(n);
                // eval("toggle" + n + "()");  // eval함수는 비추
                var fn = window["toggle"+n];
                fn();
            };
            
        })(i); // 익명함수에 i값을 넘기며 즉시 함수실행
    }
 
</script>
 
</body>
</html>

저작자표시 (새창열림)