javaScript. const, let (var과의 차이점)

📌 const, let

 

 

ES2015(ES6)에서 바뀐 가장 큰 차이 중 하나로,

변수를 선언할 때, var 외에도 const(constant, 상수)와 let이 생기게 되었다.

 

- 기존 var과의 가장 큰 차이점은 '함수스코프'를 따르지 않고 '블록스코프'를 따른다는 것이다.

 

함수스코프에 대한 내용은 아래 포스팅에 정리해두었다.

 

javaScript. 함수 스코프(scope)

💡 주의! 스코프는 '호출'할 때가 아니라 '선언'할 때 생김. (자기 스코프 상위범위에서 참조)

 

 

 

📌 블록스코프

해당 변수를 해당 블록에서만 접근 가능.

- 블록(block)이란 보통 if {} 등의 중괄호 안을 의미함.

 

** 블록문(block) = 복합문. 0개 이상의 구문을 묶을 때 사용. 한 쌍의 중괄호로 구성함.

 

if (true) {
  var x = 3;
}
console.log(x); // 3

위 예제에서는 var이 함수스코프를 따르므로

if블록과 상관없이 접근할 수 있다.

 

if (true) {
  const y = 3;
}
console.log(y); // Uncaught ReferenceError: y is not defined

그러나 위 예제는 const를 사용하여 해당 블록에서만 변수에 접근할 수 있다.

 

 

---

 

var은 호이스팅(hoisting) 때문에 코딩시 문제가 발생했었다.

-> 변수를 선언하기도 전에 해당 변수에 접근 가능했다.

 

그러나, const와 let은 선언하기 전에 접근하는 것이 금지된다.  >> 에러 발생

 

const와 let에도 호이스팅이 발생하지만, var과는 다르게 동작하며

TDZ(Temporal Dead Zone)이라는 현상을 갖고 있다.

 

 

var m = 1;
console.log(window.m); // 1
const n = 2;
console.log(window.n); // undefined

 

또한, var과는 다르게 전역스코프에서 선언 시 window나 global에 등록되지 않는다.

 

 

 

<정리>

1. const와 let은 블록스코프를 따른다.

2. 선언하기 전에 접근할 수 없게 막아두었다. (호이스팅)

3. 전역스코프에서 선언시 window나 global에 등록되지 않는다.

 

 

---

 

📌 const vs. let

 

const	한 번 초기화시 다른 값으로 변경 불가함. (데이터의 주소값을 고정시킴) ❗ 주의 > const에 할당된 객체or배열의 요소가 바뀌는 것은 막지 못함.  즉, '='을 통한 대입만 막음.
let	계속 값을 바꿔줄 수 있음.

 

 

 

 

 

 

😑 이제 var은 사용하지말자. var의 기능은 let이 다 한다!

 

 

---

REFERENCE

https://www.zerocho.com/category/ECMAScript/post/5757d74345041aaae7493479

(ECMAScript) ES2015(ES6) Const, Let

이 포스팅은 zerocho님의 javascript 강의를 보고 작성한 글입니다.

공부+기록 용으로 작성한 것이며, 자세한 것은 위 포스팅을 참고하세요!