[javascript] var, const, let 차이점

- var, const, let의 차이점

1. 재선언/ 재할당 가능 여부

2. 변수 scope 유효 범위

3. 변수 hoisting 방식

---

1. 재선언 / 재할당

1) var: 변수 재선언 가능

var x = 'text1'; 
console.log(x);  //text1 

var x = 'text2'; 
console.log(x);  //text2

변수 선언을 여러 번 해도 에러 없이 사용 가능하다. 

이 경우, 기조에 선언한 변수의 존재를 잊고 값을 재할당하는 실수가 발생하기 쉽다. 

 

 

2) let: 변수 재선언 불가능 / 변수 재할당 가능

let x = 'text1'; 
console.log(x); //text1 

x = 'text2'; 
console.log(x); //text2 

let x = 'text3'; 
console.log(x); //에러!

let의 경우에는 변수의 재할당은 가능하나, 재선언은 불가능하다. 재선언하면 에러가 발생한다. 

 

 

3) const: 변수 재선언 불가능 / 변수 재할당 불가능

const x = 'text1'; 
console.log(x); //text1 

x = 'text2'; 
console.log(x); //에러!

const x = 'text3'; 
console.log(x); //에러!

const의 경우 한 번만 선언하고 값을 재할당해 값을 변경할 수 없다. 

 

---

2. scope

스코프란 유효한 참조 범위를 말한다. 

ex) 함수 내부에서 선언된 변수는 함수 내부에서만 참조가 가능하다. 이 경우 변수의 scope는 함수 내부로 한정된다. 

 

1) var: 함수 레벨 스코프

함수 내부에 선언된 변수만 지역변수로 한정한다. 

함수를 제외한 영역에서 var로 선언된 나머지 변수는 모두 전역변수로 간주한다. 

 

2) let, const: 블록 레벨 스코프

함수는 물론, if문이나 for문 등의 코드블럭(중괄호로 둘러싸인 코드 영역)에서 선언된 변수도 지역변수로 취급한다. 

 

---

3. hoisting

- 변수 호이스팅이란? 

자바스크립트는 뒤에서 선언된 변수도 앞의 코드에서 참조할 수 있다.

var와 let, const는 호이스팅 과정이 다르다. 

 

1) var: 변수 호이스팅이 발생

console.log(x); // undefined 
var x = 10; 
console.log(x); // 10

뒤에서 선언된 변수 x가 앞에서 참조되어도 에러를 발생시키지 않는다. 

 

2) let, const: 다른 방식으로 변수 호이스팅 발생

console.log(x); // 에러
let x = 10;

뒤에서 선언된 변수를 앞에서 참조하려고 하면 에러가 발생한다. 

 

---

결론 

1. 변수 선언에는 기본적으로 const를 사용한다.

2. 재할당이 필요한 경우에 한해서만 let을 사용하는 것이 좋다. 이 때, 변수의 scope는 최대한 좁게 만든다.

3. var는 사용할 필요가 없다.