[ES6] var, let & const 간단히 살펴보기

기존의 JavaScript(ES5)에서 변수를 선언하는 방법은 "var"을 앞에 붙여주는 것이었습니다. var은 매우 유연하여 사용하기에 편리하기도 하지만, 그 유연함으로 인해서 여러 가지 문제점을 내포하고 있었습니다. 이를 보완하기 위해서 ES6에서는 let과 const라는 새로운 변수 선언 방법이 등장하였습니다. 

이번 글에서는 기존의 var과 새로 추가된 let, const keyword의 특징과 차이점에 대해서 살펴보도록 하겠습니다.

 

 

 

1. var

기존의 var의 특징을 간단하게 언급하자면 다음과 같습니다.

• Function Level Scope를 갖는다.
• 언제든지 다시 선언할 수 있다.

각각에 대해서 간단히 살펴보겠습니다.

✅ Function Level Scope

대부분의 프로그래밍 언어와 달리, 기존의 자바스크립트에는 블록 레벨 스코프({ }로 범위가 지정된 변수)가 없습니다. 대신 함수 레벨 스코프(Function Level Scope)가 있습니다. 함수 레벨 스코프는 다음과 같이 확인할 수 있습니다.

var name = "철수";
function showName () {
  var name = "영희"; //local variable; only accessible in this showName function 
  console.log(name);    
}

showName(); // 영희
console.log(name); // 철수: global variable

 

위의 코드에서 확인할 수 있듯이 함수 내에 선언된 변수는 로컬 변수이며, 해당 함수 또는 해당 함수의 내부 함수에 의해서만 액세스 할 수 있습니다.

 

var은 블록 레벨 스코프(Block-Level Scope)가 적용되지 않습니다.

var name = "철수";
if (name) { 
  var name = "영희"; 
  console.log(name); // 영희
} 
console.log(name); // 영희

 

✅ 재정의 가능

var은 아무 곳에서나 중복 선언하더라도 아무런 제한이 없습니다.

// let
var a = "hello";
var a = "world"; // ok

 

이와 같은 특성으로 인하여 많은 버그가 발생할 가능성을 내포하고 있습니다.

뭐... 편리하다면 편리하다고 할 수 있지만...

코드가 좀 복잡해지게 되면,

• 이미 만들어진 변수 이름으로 재 선언했는데 아무런 문제가 발생하지 않는다던지,
• 실수로 var을 제외하고 변수를 선언해서 전역 변수가 발생하고 도무지 찾을 수 없는 버그가 생긴다던지...
• 여기에 호이스팅까지 겹치면...

시험문제 내기 딱 좋은 별별 현상이 다 발생합니다.

코드가 복잡해질수록 변수의 스코프는 좁을수록 좋은 것 같습니다.

 

2. let & const

ES6 (ECMA2015)에서는 이러한 var 키워드의 단점을 보완하기 위해, 변수 선언을 위한 새로운 키워드: let과 const를 도입하였습니다. 이 키워드 들의 가장 큰 특징은 다음과 같습니다. 

• Block Level Scope를 갖는다.
• 동일 scope 내에서 다시 선언할 수 없다.

✅ Block Level Scope

let과 const는 블록 레벨 스코프(Block-Level Scope)가 적용됩니다. 블록 내에서 let 또는 const로 선언된 변수는 블록 밖에 영향을 주지 않습니다. (아래 예제에서는 let 대신 const를 사용해도 동일합니다.)

let name = "철수";
if (name) { 
  let name = "영희"; 
  console.log(name); // 영희
} 
console.log(name); // 철수

 

✅ 재정의 불가능

let과 const는 동일 scope 내에서 변수를 재정의 할 수 없습니다.

// let
let a = 1;
let a = 3; // Uncaught SyntaxError: Identifier 'a' has already been declared

 

✅ 전역 객체에 포함되지 않음

최상위에서 let & const와 var은 서로 다르게 동작합니다. let과 const는 전역 객체 (브라우저에서의 window)의 속성 값을 생성하지 않습니다.

var helloVar = 'world!';
let helloLet = 'world!';
const helloConst = 'world!';

console.log(this.helloVar); // world!
console.log(this.helloLet); // undefined
console.log(this.helloConst); // undefined

 

3. let vs const

✅ let과 const의 차이

let과 const의 차이점은 값을 재할당 할 수 있냐(let) 없냐(const)의 차이에 있습니다.

• let: 값을 다시 할당할 수 있음.
• const: 설정한 값을 변경할 수 없음.

let a = 3;
a = 5; // ok

const b = 3;
b = 5; // error: Assignment to constant variable. 

 

✅ 객체 또는 배열에서의 let과 const

객체나 배열의 경우, 내부의 내용이 변경되더라도 변수에 할당된 주소 값은 변경되지 않습니다. 따라서 객체/배열 타입 변수 선언 시, 변수 자체를 overwrite하지 않고 내부 값만 변경하거나 요소를 추가/삭제하는 경우에는 const를 사용해도 오류가 발생하지 않습니다. 반면, 명시적으로 객체 타입 변수 자체를 변경(재할당)하여야 한다면 let을 사용해야 합니다.

const obj = {a:5}
obj.a = 3 ; // ok
obj.b = 7 ; // ok
delete obj.a // ok
obj = {a:3} // error: Assignment to constant variable.

const arr=[1,3,2];
arr[0] = 5; //ok
arr.push(4); //ok
arr = [1,2,3]; // error: Assignment to constant variable.

 

✅ 참고: for in & for of

for in과 for of 루프의 경우에는 변수(아래에서 key 또는 value)를 블록 내부에서 변경하지 않는다면 const를 사용할 수 있습니다.

var array = [10, 20, 30];

for (const key in array) { // `key` is re-defined on each loop step.
    console.log(key); // 0 1 2
}

for (const value of array) { // `value` is re-defined on each loop step.
    console.log(value); // 10 20 30
}

 

맺음말

이번 글에서는 javascript의 var과 ES6에 새로 도입된 let, const에 대해서 알아보았습니다. 

대부분의 브라우저가 ES6를 지원하는 이 시기에 있어서 var과 let, 그리고 const는 다음처럼 사용하는 것을 추천합니다.

 

(1) 기본적으로는 const 사용.

(2) 재할당이 필요한 경우에 한정해 let를 사용.

(3) var는 일단 안녕. 그리울 거야. 😭

 

 

사실 일단 const를 사용하고 에디터에 빨간 줄 가면 그때 let으로 변경해도 충분합니다. 무언가 잘못 되었다면 보통은 Eslint (또는 Tslint) 설정에 따라 에디터에서 경고메세지를 잘 나타내 주기 때문입니다. 만약 const로 설정해도 되는데 let으로 설정한 경우라도 에디터가 친절하게 잘 알려줍니다.

 

똘똘한 에디터.

똘똘한 에디터 2

 

[추신]

Chrome 개발자 툴에 직접 넣어서 테스트 하는 정도의 코드에서는 var이 좋습니다.

재 정의가 돼서 덜 귀찮거든요!