자바스크립트 - var과 let 차이

자바스크립트에서 변수 정의 시, 변수 이름 앞에 var혹은 let 키워드를 쓴다 (const도 쓰지만 상수 할당할 때만 쓴다).

 

예시

var name = 'John'

 

let name = 'John'

 

 

 

var과 let 차이 1번째

 

var는 변수 재 선언이 가능.

let는  변수 재 선언이 불가능.

 

var의 경우

var name = 'John';
var name = 'Doe';

 

let의 경우

let name = 'John';
let name = 'Doe'; // SyntaxError: Identifier 'name' has already been declared

 

 

 

var과 let 차이 2번째

 

var는 호이스팅(hoisting)이 가능하다는 것이다 (호이스팅 참조).

let는 호이스팅 불가능.

 

var의 경우

console.log(name); // undefined
var name = 'John';

 

let의 경우

console.log(name); // ReferenceError: Cannot access 'name' before initialization
let name = 'John';

 

 

 

var과 let 차이 3번째

 

var는 접근 범위가 function scope이다 (함수 내에서는 선언한 변수를 어디서나 접근 가능).

let는 접근 범위가  block scope이다       (block에서만 접근 가능. block 예: if문, for문).

 

if (true) {
    var name = 'John';
    console.log(name); // 'John'
}

console.log(name); // 'John'

위에 예재를 보면 if문 이후 console.log(name)의 출력 값이 'John'이다.

그 이유는 var의 접근 범위가 function scope이고 호이스팅 때문이다.

 

 

 동일한 코드로 let 대입 시, if문에서 선언한 변수를 if문 밖에서 접근하니 에러가 난다

(block scope이기 때문에 if문에서만 name 함수 접근 가능).

if (true) {
    let name = 'John';
    console.log(name);
}

console.log(name); // ReferenceError: name is not defined

 

 

결론

var보단 let를 쓰는 것을 추천.