[JS] JavaScript ES6 - var / let / const

 

 

 

 

---

 

ES6 ?

 

 

>  ECMAScript : 자바스크립트 표준명세서 (JavaScript는 ECMAScript의 특정 버전이라고 할 수 있다.)

    ES6 = ES2015 (ECMA International에서 버전을 발표할 때 표기하는 정식 명칭은 연호를 사용해서 ECMAScript 2015)

     Modern JavaScript : 현시점에 사용하기 적합한 범위 내에서 최신버전의 표준을 준수하는 JS

 

> javascript는 프로그래밍 언어이고, ECMAScript는 프로그래밍 언어의 표준.

 (ECMAScript는 JavaScript가 갖추어야 할 내용을 정리해둔 '설명서'이고,  JS는 ECMAScript를 준수해서 만들어낸 '결과물')

 

> ECMAScript가 JavaScript화 하기 위해 등장하긴 했지만,

  JavaScript 뿐만아니라 모든 스크립트 언어(scripting  languages)가 지켜야 하는 표준.

 

> JavaScript는 ECMAScript를 기반으로 하지만 ECMAScript에 정의된 내용뿐만 아니라, 다른 부가적인 기능도 있음

 

 

 

 

 

ES6에서 let과 const를 사용하기 시작하면서 var는 거의 사용되지 않고있다.

차이점을 알아보자면 크게 변수 선언방식, scope, hoisting 3가지가 있다.

 

 

 

 

---

 

 

 

 

 

변수 선언 방식

 

 

 

var - 중복 선언 가능

var name = 'Kim';
console.log(name);     // Kim

var name = 'Lee';
console.log(name);     // Lee

 

 

let - 중복 선언 불가능 / 재할당 가능

let name = 'Kim';
console.log(name);     // Kim

let name = 'Lee';
console.log(name);
// Uncaught SyntaxError: Identifier 'name' has already been declared

name = 'Choi';
console.log(name);     // Choi

 

 

const - 중복 선언 / 재할당 모두 불가능

const name = 'Kim';
console.log(name);      // Kim

const name = 'Lee';
console.log(name);
// Uncaught SyntaxError: Identifier 'name' has already been declared

name = 'Choi';
console.log(name);
// Uncaught TypeError: Assignment to constant variable

 

 

 

 

 

 

---

 

 

 

 

 

Scope

 

 

 

scope는 유효한 참조 범위라고 주로 말하는데

즉, 선언한 변수가 어디에서 사용가능한지의 범위를 말한다.

 

 

 

var는 function-level scope(global scope)로 함수내에서 선언된 변수는 지역변수로 취급하여 함수내에서만 가능하고,

그 외의 함수 외부에서 선언된 변수는 모두 전역변수로 취급하여 어디에서든 사용이 가능하다.

 

let과 const는 block-levl scope로 모든 코드 블록 ({ } 중괄호 내부)에서 선언된 변수는 그 안에서만 사용이 가능하다.

 

 

 

 

 

var - function-level scope 예시

if문 안에서 사용한 var는 외부에서 참조가 가능하여 콘솔에 찍히지만 (=함수 외부에서 선언한 변수는 전역변수로 취급)

함수안에서 사용한 var는 외부에서 참조가 불가능하며 함수내에서만 사용 가능하다. (=함수 내부에서 선언된 변수는 지역변수로 취급)

 

 

 

 

 

 

let, const : block-level scope 예시

함수 안에서 선언한 age를 그 블록 내부(중괄호 안)에서만 콘솔이 찍히고, 그 외에는 모두 에러가 나는 것을 볼 수 있다.

if문에서 선언한 hobbies도 외부에서 사용이 불가능하다.

 

 

 

 

 

 

 

 

---

 

Hoisting

 

 

 

JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다.

= 변수의 선언과 초기화를 분리하여, 선언부분만 코드의 최상단으로 옮기는 것이다.

 

 

var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화한다.

반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않는다.