var VS let VS const

var VS let VS const

2009년에 ECMAScript(ES5) 버전을 발표했던 Ecma International은 2015년에 ECMAScript 6을 발표하는데 이를 줄여서 ES6라고 한다. 대표적으로 ES6에는 변수를 var에서 let과 const로 구분해서 선언하고 함수 정의를 간결하게 할 수 있는 화살표함수 등의 새로운 기능이 아주 많이 제공하게 된다. 그래서 아직도 변수 선언할 때 var를 사용하고 있다면 ES6문법인 let, const를 사용하자.

var

요즘은 대부분 ES6문법을 지키기 때문에 var가 자주 보이진 않지만 옛날 프로젝트들은 변수를 선언할 때 무지성 var를 많이 사용했다. 이제는 var 사용을 권장하지 않는다!

name = 'minsu';
console.log(name); //minsu
var name;

name이라는 변수를 선언하기도 전에 값을 할당하는 것이 가능하다. 이것이 가능한 이유는 var hoisting(호이스팅)때문이다. hoisting(호이스팅)이란, 어디에 선언했는지와 상관없이 선언을 항상 제일 위로 끌어올리는 것을 말한다. 즉, var name;을 가장 아래에 선언했지만 hoisting때문에 맨 위에 선언하게 된다. 그래서 변수에 값을 할당하는 것이 가능해진다.

var 사용을 권장하지 않는 또다른 이유는 var는 Block Scope를 철저히 무시한다는 것이다.

{
    var name;
    name = 'minsu';
}
console.log(name); //minsu

Block(블록) Scope내에 변수를 선언하고 할당했는데도 Block 밖에서도 값을 출력할 수 있다. 이러면 협업하는 과정에서 다른 누군가가 Block 내에 있는 name을 보지 못하고, name의 값을 변경시켜버릴 수도 있다. 따라서 이러한 이유들 때문에 더이상 var 사용을 하지 말자!

let

var 대신에 let을 사용하도록 하자! let으로 변수를 선언하면 값을 변경할 수 있다. -> Mutable Type

let name = 'minsu';
console.log(name); //minsu
name = 'James';
console.log(name); //James

let name으로 변수를 선언하면 name의 값을 계속 변경할 수 있다.

name = 'James';
let name = 'minsu';

하지만 let을 사용했을 때 변수를 선언하기도 전에 값을 할당하게 되면 에러를 발생하게 된다.

Cannot access 'name' before initialization 이러한 이유로 var보다는 let을 권장한다.

let globalName = 'global';
{
    let localName = 'localName';
    localName = 'changedLocalName';
}
console.log(globalName); //global
console.log(localName); //error!

또한 let을 사용하게 되면 Block Scope 내에 선언된 변수는 Block 밖에서 사용할 수가 없다. 만약 사용하게 되면 localName is not defined와 같이 localName 변수가 선언되지 않았다는 에러를 발생시킨다.

const

const로 선언하 변수를 상수(constant)라고 부르며, 상수는 재할당할 수 없으므로 상수를 변경하려고 하면 에러가 발생한다. 즉, const는 변경할 수 없는 변수를 선언할 때 사용한다. -> Immutable Type

const를 사용하지 않고 let만 사용하면 되는거 아닌가? 라고 생각할 수 있지만 실무에서는 let보다는 const를 더 자주 사용하고 그렇다면 왜 const를 자주 사용하는지 이유는 다음과 같다.

• security -> 해커가 내 프로그램에 침입해서 이상한 코드를 변경시킬 수 있기 때문에 값을 변경시킬 수 없는 const를 사용한다.
• thread safety -> 한 애플리케이션 내에 여러 쓰레드가 동작하는데 한 쓰레드에서 값을 변경하면 다른 쓰레드에서 영향을 갈 수도 있기 때문에 const를 사용.
• reduce human mistakes -> 변경할 값이 없다면 굳이 let을 사용할 이유가 없고, 여러 사람들이 협업하는 과정에서 값을 절대로 변경시키면 안되는 '돈'과 관련된 변수라면 혹여나 실수로 변경시킬 수도 있으니 const를 사용하자.

참고자료

• 드림코딩 - 자바스크립트 3. 데이터타입, data types, let vs var, hoisting
• https://ko.javascript.info/variables#ref-1970