[JavaScript] var vs let

var vs let

* 공통

자바스크립트에서 변수선언은 코드가 실행되기 전에 처리된다.

스크립트단에는 선언한 변수를 또 선언한다는 의미가 없다. 즉, var a; var a; 가능. 스크립트에서 자동으로 var a; 하나로 해석하기 때문이다. 단, let에서는 오류가 뜬다. 규칙은 아래에서 설명한다.

자바스크립트에서 변수선언은 var, let, const(상수) 3가지가 있다.

- var

1) function x() { a = 1; var b = 2; }

// a는 window로 전역변수로 생성되고, b는 x함수의 지역변수로 생성.

여기서 x함수는 b를 실행하는 것이 context이다.

2) function x() { var a = b = 1; }
// a는 x의 지역변수이지만 b는 x가 아니라 window로 생성. 결과는 1로 동일.
하지만 { var a, b = 1, a = b; }라고 했다면 a와 b 둘다 지역변수로 선언된다.

>>> 함수단위로 선언된다. 선언된 곳 기준으로 {}로 묶인 최상위 함수 바로 밑에 생성된다.

- let
>>> '{}' 단위로 선언된다. es6부터 나오기 시작했다.
참고 : http://es6-features.org/#Constants

1) function a() { let x = 1; if(true) { x = 4;} }
// x는 1이다. 하지만 if구문에서 let x로 선언했다면 x는 4이다.

2)

window.onload = function a() {
var list = document.getElementById("list");
for (var i = 1; i <= 5; i++) {
var item = document.createElement("LI");
item.appendChild(document.createTextNode("Item " + i));
let j = i;

item.onclick = function (ev) {
console.log("Item " + j + " is clicked.");
};
list.appendChild(item);
}
}

// window.onload는 JQuery의 $(document).ready()와 같다. 이게 없다면 getElememtById는 코드를 순차적으로 읽어가며 해석하므로 list가 비게 되어버린다.

// let은 {}단위로 선언되므로 위 코드에서 j는 for문 i=1, i=2...를 각각 가리키게 됨. let을 var로 고치면 j는 계속 5가 된다. var는 함수단위로 선언되므로 위 코드에서 가장 최상위 함수인 a의 바로 아래에서 먼저 선언되기 때문이다. 즉, 아래와 같아진다.
.... function a() { var j; ..... for(var i = 1; i <= 5; i++) { var j = i; .... };

// onclick 함수부분은 이벤트구문이다. 따라서 i=1, i=2... 각각에 가지고 있게 된다.

* let 사용규칙
1) 블럭({})안에서 같은 변수를 사용할 수 없다. 즉, let a; let a; 불가능.
2) 선언하기 전에는 사용이 불가하지만 호이스팅 개념은 있다.
※ 호이스팅이란?
코드상에서 변수선언 구문들이 가장 먼저 실행되는 것. (!=스코프체인)
(아래의 Mozilla Developer Network에 설명된 변수 호이스팅 참조)

Variable hoisting

Another unusual thing about variables in JavaScript is that you can refer to a variable declared later, without getting an exception. This concept is known as hoisting; variables in JavaScript are in a sense "hoisted" or lifted to the top of the function or statement. However, variables that are hoisted will return a value of undefined. So even if you declare and initialize after you use or refer to this variable, it will still return undefined.
>>> 변수들이 함수나 구문의 최상위로 "올려진다". 하지만 아래 예시처럼 호이스팅된 변수는 undefined를 반환한다. example 2에서는 전역으로 var myvar가 선언되기는 했지만, 함수 안에서 var myvar;로 올려지므로 이 또한 undefined반환. 이를 통해 호이스팅은 일단 변수정의부만 위로 올려짐을 알 수 있다.

/**
 * Example 1
 */
console.log(x === undefined); // true
var x = 3;

/**
 * Example 2
 */
// will return a value of undefined
var myvar = "my value";
 
(function() {
  console.log(myvar); // undefined
  var myvar = "local value";
})();

The above examples will be interpreted the same as:

/**
 * Example 1
 */
var x;
console.log(x === undefined); // true
x = 3;
 
/**
 * Example 2
 */
var myvar = "my value";
 
(function() {
  var myvar;
  console.log(myvar); // undefined
  myvar = "local value";
})();

ROOMY - NATION

2016. 9. 6.