Jam's story

[JS] 클로저 본문

WEB/JavaScript

[JS] 클로저

애플쩀 2022. 6. 9. 11:42

지역변수 , 전역변수

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>2022.06.09 09:41:24</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h3>ex04.html</h3>
<!-- js함수 클로저  -->
<pre>
    1.js 변수- 지역(로컬) 변수, 전역변수
    지역변수: 함수 호출될때 생성-> 종료 삭제 
    전역변수: 다른 페이지로 이동, 창닫힐때, 즉  페이지가 유지될때까지 
    클로저: 전역변수를 로컬(지역)에 비공개로 만들 수 있다. 
</pre>
<p id="demo"></p>
<script>
    var a; //전역변수
    let b; //전역변수
    
    function test(x){
        //지역변수, 매개변수
        var c; //지역변수
        y=100; //전역변수
        {
            let d; //이 블럭에서만 사용 할 수 있는 지역변수 
        }
    
    }


</script>
</body>
</html>

 

 

중첩함수

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>2022.06.09 09:47:35</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h3>ex04_02.html</h3>
<p id="demo"></p>
<button onclick="incCounter()">counter증가 </button>
<!-- <script>
    let counter=0; //전역변수
    
    function add(){
        counter+=1;
        return counter;
    }
    add();
    add();
    add();
    document.getElementById("demo").innerHTML=counter;
</script> -->
<script>
 //counter를 버튼 누를 때마다 누적시키자 => 전역변수로 쓰면 바로 가능하지만
 //중첩함수를 사용해서 해결해보자 
    function add(){
       //clousers
        //counter를 지역변수로 선언한 이유 
        // 버튼을 누를때마다 함수가 호출될때마다, 초기화가 됨 (누적x)
        let counter=0; 
        counter+=1;
        return counter;
        }
  

   function incCounter(){
    document.getElementById("demo").innerHTML=add();
   }
</script>
</body>
</html>

 

클로저- 중첩함수

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>2022.06.09 10:16:49</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h3>ex04_03.html closures작업</h3>
<button onclick="incCounter()">카운터증가</button>
<p id="demo"></p>
<!-- <script>
    document.getElementById("demo").innerHTML=add();
//중첩함수이해 
function add(){
    let counter=0;
    //counter+=1; //1씩 증가 =>add()함수 안에 함수선언
    function plus(){
        //중첩 함수 안에서 상위(부모) 함수의 지역변수를 접근 가능
        counter+=1;
    }
    plus();
    return counter;
}
</script> -->
<script>
    document.getElementById("demo").innerHTML=add();
function add(){
    let counter=0;
    function plus(){
        counter+=1;
    }
    plus();
    return counter;
}
</script>
<script>
    //클로저
    function incCounter(){
        document.getElementById("demo").innerHTML=add();
    }
    //자체호출함수+중첩함수
    //return 함수:
    var add=(function (){
        let counter=0; //지역변수 -> 전역변수처럼 유지 
        return function(){
            counter+=1;
            return counter;
        } //중첩함수
    })();

function incCount(){
    document.getElementById("demo").innerHTML=add();
}
</script>
</body>
</html>

 

클로저를 쓰면 더 편안한 이유 예제 

버튼을 누르면 그 안의 숫자 증가 

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>2022.06.09 10:35:59</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h3>ex04_04.html</h3>
<button>0</button><button>0</button><button>0</button><button>0</button><button>0</button><button>0</button><button>0</button><button>0</button><button>0</button><button>0</button><button>0</button><button>0</button><button>0</button><button>0</button><button>0</button><button>0</button><button>0</button><button>0</button><button>0</button><button>0</button>
<script>
    var btns=document.getElementsByTagName("button");
    for (let i = 0; i < btns.length; i++) {
        btns[i].onclick=(function(){
            let counter=0;
            return function(){
                event.srcElement.innerHTML=++counter;
            };
        })();
    };
</script>

<!-- //js
<script>
    var btns=document.getElementsByTagName("button");
    for (let i = 0; i < btns.length; i++) {
        btns[i].onclick=function(){
            var n=parseInt(event.srcElement.innerHTML);
            event.srcElement.innerHTML=++n;
        }
    }
</script> -->

//jquery
<!-- <script>

    $("button").click(function(event){
        var n=parseInt($(this).html());
        $(this).html(++n);
    });
</script> -->

<!-- <script>
    //카운터변수를 배열로 선언 
    var counters=[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
    $("button").click(function(event){
        var idx = $(this).index();
    counters[idx]++;
    $(this).html(counters[idx]);
    });
</script> -->
</body>
</html>
2022.06.09 10:35:59

ex04_04.html

//jquery 
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>2022.06.09 10:55:21</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h3>ex04_05.html -js 클로저 예제 </h3>
<script>
        var counterObject=(function(){
        let counter=0;
        function changeBy(value){
            counter+=value;
        }
        return{
            //js객체 
            increment:function(){
                changeBy(1);
            },
            decrement:function(){
                changeBy(-1);
            },
            value:function(){
                return counter;
            }
        };

    })();
    counterObject.increment();
    counterObject.increment();
    counterObject.increment();
    document.write(counterObject.value()+"<br>");
    counterObject.decrement();
    document.write(counterObject.value()+"<br>");
</script>
</body>
</html>

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>2022.06.09 11:15:19</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
    .myProgress{
      width:100%;
      background-color: #ddd;
      border:solid 1px gray;
    }
    .myBar{
      width:1%;
      height: 30px;
      background-color: #4CAF50;
      text-align: right;
      color:red;
    }
  </style>
</head>
<body>
<h3>ex04_06.html</h3>

<div id="myProgress1" class="myProgress">
    <div id="myBar1" class="myBar"></div>
    <button id="btn1">진행</button>
</div>
<div id="myProgress2" class="myProgress">
    <div id="myBar2" class="myBar"></div>
    <button id="btn2">진행</button>
</div>
<div id="myProgress3" class="myProgress">
    <div id="myBar3" class="myBar"></div>
    <button id="btn3">진행</button>
</div>
<div id="myProgress4" class="myProgress">
    <div id="myBar4" class="myBar"></div>
    <button id="btn4">진행</button>
</div>
<div id="myProgress5" class="myProgress">
    <div id="myBar5" class="myBar"></div>
    <button id="btn5">진행</button>
</div>
<script>
    var btns=document.getElementsByTagName("button");
    for (let i = 0; i < btns.length; i++) {
     btns[i].onclick=function(){
        var btn= event.srcElement;
     var width=1;
     var timer=setInterval(function(){
        if(width<100){
            width++;
            btn.previousElementSibling.style.width=width+"%";
            btn.previousElementSibling.innerHTML=width+"%";
        }else{
            clearInterval(timer);
        }
     },30);
     }
    }
</script>
</body>
</html>

JQuery

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>2022.06.09 11:15:19</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
    .myProgress{
      width:100%;
      background-color: #ddd;
      border:solid 1px gray;
    }
    .myBar{
      width:1%;
      height: 30px;
      background-color: #4CAF50;
      text-align: right;
      color:red;
    }
  </style>
</head>
<body>
<h3>ex04_06.html</h3>

<div id="myProgress1" class="myProgress">
    <div id="myBar1" class="myBar"></div>
    <button id="btn1">진행</button>
</div>
<div id="myProgress2" class="myProgress">
    <div id="myBar2" class="myBar"></div>
    <button id="btn2">진행</button>
</div>
<div id="myProgress3" class="myProgress">
    <div id="myBar3" class="myBar"></div>
    <button id="btn3">진행</button>
</div>
<div id="myProgress4" class="myProgress">
    <div id="myBar4" class="myBar"></div>
    <button id="btn4">진행</button>
</div>
<div id="myProgress5" class="myProgress">
    <div id="myBar5" class="myBar"></div>
    <button id="btn5">진행</button>
</div>
<script>
    var btns=document.getElementsByTagName("button");
    for (let i = 0; i < btns.length; i++) {
     btns[i].onclick=function(){
        var btn= event.srcElement;
     var width=1;
     var timer=setInterval(function(){
        if(width<100){
            width++;
            btn.previousElementSibling.style.width=width+"%";
            btn.previousElementSibling.innerHTML=width+"%";
        }else{
            clearInterval(timer);
        }
     },30);
     }
    }
</script>
</body>
</html>

var btn=$(this) , btn.prev~ 로 바꿈 

$(tihs).prev,로 썼다가 다같은 this 가 아니기 때문에 

 

2022.06.09 11:15:19

ex04_06.html

 

 

 

저작자표시

'WEB > JavaScript' 카테고리의 다른 글

[JS] 새창 열고 닫기  (0) 2022.06.09
[JS] 드래그  (0) 2022.06.09
[JS] function (함수) 정리  (0) 2022.06.09
[JS] 이벤트 버블링  (0) 2022.06.09
[JS] onclick 이벤트 처리  (0) 2022.06.09
'WEB/JavaScript' Related Articles more
Comments