자바스크립트 var, let, const 차이

자바스크립트 var, let, const 차이

var(Function-Scope)

기본적으로 JavaScripts에서는 var을 이용해 변수를 선언합니다

es2015에서 let과 const가 추가되었는데 const는 자바와 기능이 비슷합니다.

let을 설명하자면 var의 문제점?과 호이스팅에 대해서 알아야 let이 추가되었는지 쉽게 알 수 있다.

기본 자바와 같은 문법에서 아래 코드는 에러가납니다. for문 안에서 선언된 변수 i를 밖에서 호출했기 때문입니다. 하지만 자바스크립트에서는 for문안에 선언된 변수 i가 호이스팅 되었기 때문에 for out i -> 10이 나옵니다.

for(var i=0; i < 10; i++) {
    console.log("i -> " + i);
}

console.log("for out i -> " + i);

또한 자바와 달리 중복된 변수를 선언해도 문제가 발생하지 않고, 초기화 한 후 변수를 선언해도 호이스팅 때문에 정상적으로 프로그램이 동작합니다. 또한 초기화와 선언이 순서가 바뀌어도 정상적으로 동작합니다.

많은 개발자들은 이런 문제?로 인해 많은 불편함을 말하고 있습니다.

var value = 'test1';
var value = 'test2';
console.log(value);

value2 = 'test3';
var value2;
console.log(value2);

let, const(Block-Scoped)

es2015에 추가된 let, const는 이런 문제를 해결해 줍니다.

그렇다면 for문 안에 변수를 let으로 선언했을 때 위의 for문 안에 var으로 선언한 것과의 차이를 예제로 보자면

for(let i=0; i < 10; i++) {
    console.log("i -> " + i);
}
console.log("for out i -> " + i); // i is not defined 발생

let value = 'test1';
value = 'test1-1'   // 새로 초기화 가능
let value = 'test2';// 새로 선언하는 것은 에러 발생 Identifier 'value' has already been declared 발생

let과 const는 변수 재선언을 할 수 없다.

let은 변수에 재할당이 가능하지만, const는 변수를 재선언할 수 없고, 재할당 할 수 없습니다.

const test1 = 'const';
test1 = 'const1'; //Assignment to constant variable. 발생
const test2; //Missing initializer in const declaration

let과 const가 호이스팅이 발생하지 하지 않는 것은 아니지만 var은 Function-Scope로 호이스팅이 발생했다면

let, const는 Block-Scope로 호이스팅이 발생합니다.

아래 예제에서 에러가 난 이유는 let은 초기화 하기 전에 선언이 되어 있지 않아서 발생했다.

test = 'test'; //ReferenceError: c is not defined
let test