ECMAScript6 - var와 let


1. 함수 안에 작성한 let 변수는 함수가 스코프.
2. 함수안에 if(a==0){let sprots= "축구"} 형태로 코드를 작성했을 때, sports 변수는 함수가     스코프가 아니라 if문의 블록 { } 스코프.
3. 같은 스코프에서 같은 이름의 let 변수를 선언할 수 없다.
4. let 변수는 호이스팅(hoisting) 되지 않는다.
5. let과 this
6. for문에서 var 와 let



1. 의 예시


2. 의 예시





호이스팅이란 - 변수나 함수를 선언, 정의하기 앞서서 먼저 호출하는 경우 문제없이 작동되도록 하는 특성이다.

4. 의 예시 - var 로 선언된 sports 변수는 비록 undefined가 출력되었지만 변수로 인식되었다. 반면에  let 으로 선언된 music 변수는 변수로 인식되지 않았다.



5. 의 예시
var로 선언한 변수의 스코프는 글로벌 오브젝트이고 this가 글로벌 오브젝트를 참조한다.
this가 window 오브젝트를 참조한다.








6. 의 예시
for문에서 let 변수는 반복할 때마다 스코프를 갖는 반면, var 변수는 스코프를 갖지 않는다.




<!doctype html>
<html>

<head>
  <meta charset="utf8" />
</head>

<body>

  <ul>
    <li>1~10</li>
    <li>11~20</li>
    <li>21~30</li>
  </ul>

  <script>
    var nodes = document.querySelector('ul');
    for (var k = 0; k < nodes.children.length; k++) {
      var el = nodes.children[k];
      el.onclick = function(event) {
        event.target.style.backgroundColor = "yellow";
        console.log(k);
      }
    };
  </script>
</body>

</html>



<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <ul>
    <li>1~10</li>
    <li>11~20</li>
    <li>21~30</li>
  </ul>
  <script type="text/javascript">
    var nodes = document.querySelector('ul');
    for (let i = 0; i < nodes.children.length; i++) {
      var el = nodes.children[i];
      el.onclick = function(event) {
        event.target.style.backgroundColor = "blue";
        console.log(i);
      }
    };
  </script>
</body>

</html>

댓글

이 블로그의 인기 게시물

Spring Boot Actuator readiness, liveness probes on k8s

About Kafka Basic

sneak peek jitpack

About idempotent

About G1 GC

About ZGC

About JVM Warm up

I need to know a little JVM

HackerRank Java Between Two Sets

Java - HashMap (feat. LinkedList, Tree.. maybe Later)