ECMAScript 2015 특강
by jbee

[ES6] 1. let & const

자바스크립트의정체
ES6의문법을알아보기 전에자바스크립트의정체부터짚고 넘어가자. 자바스
크립트(JavaScript)는스크립트언어(script language)이다. 스크립트언어
란언어를해석하고 실행하는소프트웨어가 따로존재하는언어를말한다. 자
바스크립트를해석하고 실행하는소프트웨어는브라우저이다. 이러한의미에
서Node.js는스크립트언어라고 부르기 애매하고 자바스크립트의문법을차
용한다른종류의언어라고 생각해도된다. 우선자바스크립트가 해석되고 실
행될때일어나는확보, 선언, 할당의차이를짚고 넘어가야한다.

확보
브라우저가 자바스크립트를해석할때두번파싱(parsing)하는데첫번째파
싱과정이Lexical parsing이다. 실행하려는자바스크립트파일이어느정도
의메모리를필요로하는지를파악하기 위해거치는파싱과정인것이다. 이때
자바스크립트의모든선언문은호이스팅(Hoisting)된다.

선언
말그대로선언하는것이다. 값을할당하지않는다. 자바스크립트에서는선언
만하고 값을할당하지않으면 undefined 값이할당된다. 확보만하고 선언
하지않으면 Reference error 가 발생하고 선언을하게 되면
undefined 값이나타난다.

할당
특정변수에값을할당하는과정이다. 위세가지를파악해야var와let 그리고
const의차이를이해할수있다

let 으로변수선언및할당하기
let 으로정의된변수들은호이스팅되지않는다(?)
많은책에서이렇게 표현을하고 있지만이것은잘못된표현이다. let 으로
선언해도호이스팅된다. lexical parsing 단계에서해당자바스크립트파일을
실행하기 위한메모리공간을 확보 해야하기 때문이다. 다만let 변수로선언이
되기 전해당변수를사용하려고 하면 Reference error 를발생시키는것
이다. 예제코드를보자.

//ES5 code :: var>>
console.log(foo); //undefined
var foo;
console.log(foo); //undefined
foo = 123;
console.log(foo); //123
//ES6 code :: let>>
console.log(foo); //ReferenceError
let foo;
console.log(foo); //undefined
foo = 123;
console.log(foo); //123
let은유효범위의시작에서부터 선언 될때까지 temporary dead zone (일
시적사각지대)에있다. 이dead zone에서사용하게 되면
ReferenceError 가 발생한다.

let ‑ in for loop
let 으로정의된변수들은가장가까운블록으로scope이지정된다. 여기서
블록이란 if , else , for , while 같은문법으로지정된{ } 블록을의미
한다. let 키워드를사용한변수들은그들각각의함수block에귀속된다.
var 변수는함수의상단으로호이스팅(hoisting) 된다음에, 각 루프의반복
변수가 공유하게 된다. 그 결과, 콜백이실행될때는 i 변수가 루프의마지막
변수로할당된다. 즉콜백에서반복문을제어하는변수에접근할때문제가 발
생하는것이다. 이러한문제를해결하기 위해 let 을사용할수있다.

//ES5 code
function loadFiles( userNames ) {
for(var i in userNames){
_fetchProfiles(userNames[i], function() {
console.log(userNames[i]);
}
}
}
loadFiles(["A", "B", "C", "D"]);
console >
D // userNames[4]
D // userNames[4]
D // userNames[4]
D // userNames[4]

ES6 code
//ES6 code
function loadFiles( userNames ){
for( let i in userNames ){
_fetchProfile(userNames[i], function(){
console.log(userNames[i]);
}
}
}
loadFiles(["A", "B", "C", "D"]);
console >
A // userNames[1]
B // userNames[2]
C // userNames[3]
D // userNames[4]

let cannot be redeclared
let 으로정의된변수는같은블록에서재할당될수는있지만재정의는될수
없다.

//ES6 code
let a = 'hello';
a = 'world' // available
let a = 'hello';
let a = 'world'; // false -> TypeError : Identifier ‘a’ has alr
let flashMessage = 'hello';
function loadFiles(userNames){
let flashMessage = 'world'; // available
return flashMessage;
}

const ‑ declaration
const 키워드는상수라고 불리는읽기 전용변수를생성하는키워드이다. 한
번할당되면, 상수는새로운값으로할당될수없다. 명시적으로변경을시도해
도바뀌지않는다. const 로정의된변수는초기에정의할때, 반드시값을할
당해줘야한다. 그렇지않으면 Syntax Error 가 발생하게 된다. const 로
정의된변수는 let 과 마찬가지로, 가장가까운블록에scope이지정된다.

여기서한가지주의할점은객체를const로참조했을때이다.
const obj = {a: 1};
이런식으로객체 obj 를const로지정했다고 해서객체프로퍼티를변경할
수없는것은아니다. 즉다음은가능하다는것이다.
console.log(obj.a); // 1
obj.a = 2;
console.log(obj.a); // 2
참조값을변하지않게 하는것이지객체자체를 immutable 하게
freeze 하는것은별개의문제이다.

chapter 1. end