ES2015(ES6)에서 반짝이는 새로운 기능들이 많이 등장했다.
var
변수가 함수 외부에서 선언될 때의 범위는 전역이다. 즉, 함수 블록 외부에서 var
를 사용하면 전역 변수가 되고, 함수 내에서 선언할 때는 함수 범위로 지정된다는 것이다.
호이스팅이란 변수와 함수 선언이 맨 위로 이동되는 자바스크립트 매커니즘이다. 아래와 같이 코드 A를 코드 B와 같이 해석한다.
// 코드 A console.log (greeter); var greeter = "say hello"
// 코드 B var greeter; console.log(greeter); // greeter is undefined greeter = "say hello"
var greeter = "hey hi";
var times = 4;
if (times > 3) {
var greeter = "say Hello instead";
}
console.log(greeter) // "say Hello instead"
의도적으로 greeter
를 재정의한 것이라면 괜찮지만, 변수 greeter
가 이미 정의되어 있다는 사실을 인식하지 못한 경우에는 문제가 될 수 있다.
let
으로 선언된 변수는 해당 블록({}
로 바인딩된 코드 청크) 내에서만 사용 가능하다.
코드 A, C와 달리 코드 B는 에러가 발생한다. 코드 C는 다른 범위 내에서 선언하기 때문에 문제가 되지 않는다.
// 코드 A let greeting = "say Hi"; greeting = "say Hello instead";
// 코드 B let greeting = "say Hi"; let greeting = "say Hello instead"; // error: Identifier 'greeting' has already been declared
// 코드 C let greeting = "say Hi"; if (true) { let greeting = "say Hello instead"; console.log(greeting); // "say Hello instead" } console.log(greeting); // "say Hi"
var
과 마찬가지로 let
선언은 맨 위로 끌어올려진다. 하지만, undefined
로 초기화되는 var
와 다르게 let
의 키워드는 초기화되지 않는다. 선언 이전에 let
변수를 사용하려고 시도한다면 Reference Error
가 발생할 것이다.
Const
로 선언된 변수는 일정한 상수 값을 유지한다. const 선언은 let 선언과 몇 가지 유사점을 공유한다.
let
선언처럼 const
선언도 선언된 블록 범위 내에서만 접근 가능하다.
const
로 선언된 변수의 값이 해당 범위 내에서 동일하게 유지됨을 의미한다. 즉, 업데이트하거나 다시 선언할 수가 없다는 것이다. 따라서 모든 const
선언은 선언하는 당시에 초기화되어야 한다.
const
객체는 업데이트할 수 없지만, 개체의 속성은 업데이트할 수 있다.const greeting = { message: "say Hi", times: 4 }
이 작업은 불가능하다.
greeting = { words: "Hello", number: "five" } // error: Assignment to constant variable.
이 작업은 가능하다.
greeting.message = "say Hello instead";