eunsol
178
2021-05-03 17:30:06
5
151

javascript 클로저


제로초님 블로그 보고 공부중인데 for 문안에서 (function(){})(i) 의미가 이해가안가서질문드립니다.


<body>
  <button id="test">button</button>
</body>
<script>
  for (i = 0; i < 5; i++) {
    (function(j){
      document.getElementById('test').addEventListener('click',function(event){
        alert(j)
      })
    })(i);
  }
</script>
0
  • 답변 5

  • 굿모닝
    91
    2021-05-03 17:37:54

    익명에 즉시실행함수라고 될듯 해요 

    예전에 모듈화할때 많이 썻던 방식이예요

  • eunsol
    178
    2021-05-03 17:46:17
    즉시실행함수뒤에 즉시실행함수가 붙는건가요?
  • 굿모닝
    91
    2021-05-03 18:11:54

    저 자체가 즉시실행함수예요

    풀어보자면 선언과 동시에 for문의 i로 인자로 호출하고 있는거예요


    아래는 그냥 이해를 돕기위해 

    (function () {  })  <- 선언부 한 단락으로 인식되기위해  () 로 감싸야함

    () <- 호출부 

    두개는 붙어있어야 함


  • eunsol
    178
    2021-05-03 18:22:35 작성 2021-05-03 18:26:22 수정됨


      for(i= 0 ; i < 5 ; i++){
        console.log(i)
        document.getElementById('test').addEventListener('click',function(event){
          console.log(i)
    
        })
      }

    위에 코드를 실행하면 이벤트 리스너 밖은 0,1,2,3,4  이벤트 리스너 안은 5 가 5번찍히는데 

    for 조건이 i < 5  크면 안되는 조건이있는데  가능한 이유가있을까요

  • 굿모닝
    91
    2021-05-03 19:29:38
    상위 컨텍스트의 루프는 
    1 2 3 4로 찍힌걸거고 루프가 다돌았으니 i는 5가 되었겠죠?
    클릭햇을때 외부 컨텍스트 자원인 i는 이미 5가되엇으니 5가 찍힌거예요
    모바일이라 부연설명은 못하겟네요
  • 로그인을 하시면 답변을 등록할 수 있습니다.