[ES6] 자바스크립트 ES6 - 1. 변수와 상수

 

* javascript 공부 준비, 변수, 상수, VAR, LET, CONST

 

 

 

1. 에디터 준비 - 코드펜

* 이미 환경이 갖춰진 분은 1번 패스하셔도 됨.

* 크롬 개발자도구에서도 가능.

2021.10.12 - [IT/Web] - [WEB] 스크립트 에디터 "코드펜" (js, css, html 등)

[WEB] 스크립트 에디터 "코드펜" (js, css, html 등)

 

2. 상수 - Const

* ES6에서 추가된 상수로 const는 한번 선언하면 변경 불가하다.

 

 

 

3. 변수 - VAR와 LET의 차이

* let을 알기위해서는 var와 똑같은데 몇가지가 금지된 var라고 보면 이해가 쉽다.

* 아래 3가지 var와의 차이를 보면서 let을 이해하자.

 

1) 중복 선언 금지

* let은 한번 선언되면 다시 선언할 수 없다.

 

var v = 1;
let l = 1;

var v = 2; // 정상
let l = 2; // Syntax Error

 

 

2) Scope 외 참조 금지

* let은 다른 Scope에서 선언되면 바로 가져다 쓸 수 없다. (클로져를 통해 접근 가능)

 

var v = 1;
let l = 1;

{
   var v = 2;
   let l = 2; // 다른 Scope에서 중복 선언은 가능하지만 접근은 불가
}

console.log(v); // 2
console.log(l); // 1

{
   l = 2; // 값은 바꿀 수 있다.
}

console.log(l); // 2

 

 

 

3) 호이스팅 금지

* 호이스팅이란? 자바스크립트에서 var와 function의 선언문이 위로 끌어올려지는 것을 말한다. 

v = 1;
l = 1;

console.log(v); // 1
console.log(l); // Reference Error

var v = 2;
let l = 2;

 

* 위 소스의 실제 자바스크립트 내부에서의 실행 순서

var v;  // var의 선언이 끌어올려진다. (호이스팅)
v = 1;
l = 1;

console.log(v); // 1
console.log(l); // Reference Error

v = 2;
let l = 2; // let은 호이스팅 되지 않는다.

 

* 위 소스는 var의 유연성을 보여준다. 선언안해도 실행되고, 나중에 선언해도 돌아간다.

  이는 쉬운 코딩이 가능하지만 의도치않는 오류를 일으킬 수 있다.

 

 

 

"ES6에서는 코딩에 자유로운 var보다 호이스팅이 되지 않는 let으로 보다 논리적인 코딩을 지향한다"