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>

댓글

이 블로그의 인기 게시물

About JVM Warm up

About idempotent

About Kafka Basic

About ZGC

sneak peek jitpack

Spring Boot Actuator readiness, liveness probes on k8s

About Websocket minimize data size and data transfer cost on cloud

About G1 GC

대학생 코딩 과제 대행 java, python, oracle 네 번째