2019-02-19(JavsScript var-let-const 차이)

var-let-const

Javascript var-let-const 의 차이

값의 변환

기존의 Javascript를 사용하면서 가장 문제가 있다고 느낀점은 변수 선언의 방식이다.

var 를 사용하면 변수 선언의 경우 할당되는 값이 유동적으로 변경될 수 있는 단점을 가지고 있다.

아래와 같다.

var name = "길동";
console.log(name);
//길동
 
var name = "홍길동";
console.log(name);
//홍길동

다음과 같이 name이라는 변수를 2번 선언했는데도 에러가 나오지않고 각기 다른 값이 출력된다.

하지만 ES6업데이트 이후로 추가된 변수 선언 방식인 let과 const는 var와 같은 선언 방식을 막고있다.

let name = "길동"
console.log(name);
//길동
 
let name = "홍길동"
console.log(name);
//Identifier 'name' has already been declared

위와 같이 let을 사용했을 경우에는 name이 이미 선언되었다는 에러 메시지가 나오는걸 볼수있다.

위에 코드에는 let만 케이스로 집어넣었지만 const도 마찬가지로 변수 재할당이 안된다는 특징을 가진다.

그럼 let과 const의 차이는 무엇일까?

let 과 const의 차이점은 변수의 immutable 여부이다.

let은 변수에 재할당이 가능하지만, const는 변수 재선언, 재할당 모두 불가능하다.

아래의 코드를 보면

//let
 
let testLet = 'let'; //let
let testLet = 'let2'; //Uncaught SyntaxError: Identifier 'testLet' has already been declared
testLet = 'let3';//let3
 
//const
 
const testConst = 'const'; //const
const testConst = 'const2'; //Uncaught SyntaxError: Identifier 'testConst' has already been declared
testConst = 'const3'; //Uncaught TypeError:Assignment to constant variable.

위와 같이 var-let-const 각각의 차이는 명확하다.

변수의 유효범위

먼저 var는 기본적으로 function scope 를 가지게 되고 let, const는 block scope를 가지게 된다.

//var
 
var foo = "String";
if(typeof foo === 'string') {
    var resultVar = true;
} else {
    var resultVar = false;
}
 
console.log(resultVar); //resultVar : true
 
//let or const
 
var foo = "String";
if(typeof foo === 'string') {
    const resultConst = true;
} else {
    const resultConst = false;
}
 
console.log(resultConst); //resultConst : result is not defined