[Javascript] var, let, const 차이는?

var

 

변수 선언시 사용되는 var는 아래 링크에서 설명하였다.

https://daniel-park.tistory.com/5

[Javascript] Hoisting(호이스팅)

요약하자면,

1. var을 통해 변수를 선언 및 초기화 할 수 있다.
2. function scope에서 조건에 따라 hoisting이 이루어진다.
3. es2015 사용 환경에서는 var 대신 let과 const를 사용한다.
4. (추가) 아래 코드처럼 변수를 재선언 할 수 있다.

var a = 1;
var a = 2;

 

---

var vs let, const

 

let과 const 둘 다 var처럼 변수의 선언과 초기화에 사용이 된다.

es2015 이후로 var 대신 let과 const를 사용하고 있다.

 

1. var 과 [let, const]를 변수 재선언의 관점에서 비교를 해볼 예정이다.

위에서도 언급했듯 var은 변수의 재선언이 가능하다. 하지만, 아래의 코드처럼 let과 const는 다시 선언할 수 없다.

let abc = "ABC";
let abc = "ABC";

Uncaught SyntaxError: Identifier 'abc' has already been declared

const def = "ABC";
const def = "ABC";

Uncaught SyntaxError: Identifier 'def' has already been declared

 

2. var과 [let, const]는 Scope의 관점에서도 비교할 수 있다.

var은 function scope에서 유효한 반면, let과 const는 block scope에서 해당된다.

Hoisting의 후 result의 선언은 function scope 최상단 즉, if절 위로 올라가게 된다. 따라서 로그의 결과는 true가 된다.

// Function Scope
if(true){
  var result = true;
} else {
  var result = false;
}

console.log(result); 

// Hoisting 후
var result;
if(true){
  result = true;
} else {
  result = false;
}
console.log(result); 

 

하지만 const, let 모두 block scope {} 에서 유효하므로, result1, result2 모두 if(true) { ... } 에서 자유로울 수 없다.

if(true){
  const result1 = true;
} else {
  const result1 = false;
}

console.log(result1);

Uncaught ReferenceError: result1 is not defined


if(true){
  let result2 = true;
} else {
  let result2 = false;
}

console.log(result2);

Uncaught ReferenceError: result2 is not defined

 

 

---

let vs const

 

위의 내용에서 var과의 let, const의 차이를 알아보았다면, 이번에는 let과 const의 차이를 알아볼 필요가 있다.

 

1. let은 위의 코드처럼 선언 후 초기화가 가능하지만, const는 선언과 동시에 초기화가 필요하다.

let name1
name1 = 'test'

const name2

Uncaught SyntaxError: Missing initializer in const declaration

 

2. let은 초기화 후, 데이터의 변경이 가능하다. 하지만, const는 상수(constant) 를 의미하기 때문에, 선언과 동시에 초기화 후에는 데이터를 변경할 수 없다.

let name1 = "abc"
name1 = "def"

const name2 = "ABC"
name2 = "DEF"

Uncaught TypeError: Assignment to constant variable.

 

스코프에 대한 이해가 필요하다면, 아래의 링크를 추천한다.

https://velog.io/@marcus/자바스크립트-스코프

---

참고

 

https://velog.io/@marcus/2019-02-10-1702-작성됨

https://gist.github.com/LeoHeo/7c2a2a6dbcf80becaaa1e61e90091e5d