2. Javascript ES2015 (1) - const, let

 

 

 

 

 

우선 자바스크립트와 관련해서 2015년 발표된 ES2015(ES6) 이후의 최신 문법에 대해서 차근차근 살펴보도록 하겠습니다. 본 블로그 내의 기본 자바스크립트 문법만을 공부한 상태라면, ES2015 이후의 업데이트 된 자바스크립트 문법에 대해서도 충분히 학습해야 할 필요성이 있습니다. 

 

 

---

 

 

 

○ const, let

 

간단하게 요점만 먼저 설명하자면, const와 let은 var를 대체합니다. var와 const / let의 차이점은 무엇일까요?  코드에서의 스코프의 차이가 있습니다. 아래 예제를 비교해 보겠습니다. 

 

if (true) {
    var x = 3;
}

console.log(x);

// 3

 

if (true) {
    var y = 3;
}

console.log(y);

// Uncaught ReferenceError: y is not defined

 

 

같은 코드임에도 불구하고 선언 키워드에 따라 결과가 달라졌습니다. 정리하면 var는 함수 스코프를 갖고, const와 let은 블록 스코프를 갖습니다. 즉, const와 let으로 선언한 변수의 경우 해당 변수가 선언된 블록을 벗어나면 접근이 불가능 한 것입니다. 잘 아시겠지만 블록은 if, while, for, function에서 사용되는 중괄호를 의미하죠.

 

그럼 이제는 const와 let의 차이를 알아봐야 하겠습니다. 

 

역시 간단하게 정리하자면 const는 상수, let은 상수가 아닌 변수입니다. 그럼 const가 갖는 특성은 익히 다른 언어에서 보게되는 상수의 특성과 같습니다. 

 

- 초기화 할 때 값을 할당하지 않으면 오류가 발생한다.

- 한 번 할당된 값을 변경하려고 하면 오류가 발생한다.

 

const a = 0;
a = 99;
// Uncaught TypeError: Assignment to constant variable.

let b = 0;
b = 99;
// 99

const c;
// Uncaught SyntaxError: Missing initializer in const declaration

 

 

그럼 언제 const와 let을 사용할까요? 자바스크립트는 초기화 한 변수에 다른 값을 할당해 사용하는 경우가 생각보다 많지 않습니다. 따라서, const를 기본으로 사용하고 필요시 let을 사용합니다.

 

 

 

* 참고 : 자바스크립트의 범위와 관련해서 '즉시 실행함수'가 사용되기도 합니다. 간접적으로 연계되는 내용이니 참고하시기 바랍니다.

 

7. Javascript 함수 (5) - 즉시 실행 함수란