[Javascript] var, let, const 차이 - 중복선언, 호이스팅, 스코프 관점

var만 쓰고 있다가 ES6에서 let과 const가 추가됨

 

var & let 중복선언 관점에서의 차이점

var은 중복선언이 가능하다. let은 중복선언이 불가능하다. 둘다 재할당은 가능(당연한 소리)

 

case1) var은 재할당, 중복선언 모두 가능하다. --> 이상한것..

var gender = 'female'
console.log(gender)

// 변수 재할당 가능
gender = 'none'
console.log(gender)

// 변수 중복 선언 가능
var gender = 'male'
console.log(gender)

 

case2) let은 재할당은 가능하나 중복선언이 불가하다. -> 당연한것..

let name = 'Mike'
console.log(name) // output: Mike

// 변수 재할당 가능
name = 'Heidy'
console.log(name) // output: Heidy

// 변수 중복선언 불가
let name = 'Sally' // output: Uncaught SyntaxError: Identifier 'name' has already been declared

 

case3) const 는 상수라서, 재할당 불가, 중복선언도 불가

// 원시값의 재할당
const name = 'kmj'
name = 'howdy' // output: Uncaught TypeError: Assignment to constant variable.

// 객체의 재할당
const name = {
  eng: 'kmj',
}
name.eng = 'howdy'

console.log(name) // output: { eng: "howdy" }

var & let 호이스팅 관점에서의 차이점

자바스크립트 엔진은 선언문(변수선언, 함수선언)을 찾아내 먼저 실행한다 -> 호이스팅

var과 let은 둘다 호이스팅 된다.

하지만 var은 할당이 되지 않았을 때도, undefined라고 자체적으로 초기값을 넣어서 에러를 발생시키지 않는다.

let은 할당되지 않았을 경우, 초기값이 없다는 에러를 발생시킨다.

 

case1) a를 선언하지 않고 부르면 당연히 에러발생

console.log(a)

 

case2) a를 선언하고 부르면 당연히 잘 불려짐

var a = "apple"
console.log(a)

 

case3) a를 부르고, 선언하면? 에러는 안났는데, 할당이 안된것

-> 호이스팅 (선언+undefined라고 초기화)

console.log(a)
var a = "apple"

 

case4) 그럼 let으로 a 를 선언했을 경우는? 에러난다

console.log(a)
let a = "apple"

 

변수 뿐아니라 var, let, const, function, function*, class 의 키워드를 사용한 선언문은 모두 호이스팅 된다.

 

var & let 스코프 관점에서의 차이점

var은 함수만 지역스코프로 인정되어 지역변수로 처리된다.

let은 모든 브라켓표현식을 지역스코프로 인정하여 지역변수 처리한다.

 

case1) var는 function 브라켓(스코프) 안에서는 지역변수로 작동한다.

var a = 1; // 전역변수

function test() {
    var b = 2; // 지역변수
}

console.log(a) 
console.log(b) // 함수브라켓은 지역변수로 작동하여, 밖에서 호출시 에러

 

case2) function 이 아닌 다른 브라켓(스코프) , for, while, if, switch...등 안에서는 지역변수로 처리되지 않는다.

var a = 1;

while(true){
    var b = 5;
    break
}

console.log(a)
console.log(b)

 

case3) let은 모든 브라켓(스코프)안에서 선언된 변수들은 모두 지역변수로 처리한다

var a = 1;

while(true){
    let b = 5;
    break
}

console.log(a)
console.log(b) // 지역스코프 밖에서 호출시 에러