ES6 문법 var, let, const 차이와 실질적인 예

ES6에서 새로 추가된 let, const 에 대해 알아보자. 

 

키워드	구분	scope	재선언
var	변수	전역	가능
let	변수	해당구역	불가능
const	상수	해당구역	불가능

라는데 실제로 코드에서의 차이를 설명하면 

 

1. 변수와 상수의 차이 

var test = 123;  //변수
test = 22;  //가능 


let test2 = 123;  //변수
test2 = 22;  //가능 


const test3 = 123;   //상수
test3 = 22; //불가능!!

변수 : 값 변경 가능

상수 : 값 변경 불가 (배열/객체내의 값 수정은 가능함) 

 

const 로 선언한 test3은 상수기 때문에 값변경이 불가능하다. 

 

또하나의 차이점이 있다. 

var a;  //가능 

let b; //가능

const c; //Uncaught SyntaxError: Missing initializer in const declaration

상수는 선언 시 꼭 초기값을 넣어줘야한다. 

 

 

 

2. 재선언 가능과 불가능의 차이 

var test = 12;
var test = 22;   //동일 변수명으로 재선언이 가능함 

let test1 = 12;
let test1 = 22;   //불가능!! 

const test2 = 12;
const test2 = 22;   //불가능!! 

 

같은 스코프에 같은 이름의 변수를 선언하는 것은 실수일 가능성이 높지 않겠는가

let이나 const를 사용하면 이런 문제를 미연에 방지해준다. 

 

 

3. Scope 

//전역 Scope
{
  //A Scope
  var test = 123;
  {
  //B Scope
     console.log(test); //123
  }
  
  console.log(test);  //123
}

A scope 에서 var 로 선언했는데  B 나  전역 Scope에서도 해당 변수를 읽을 수 있다. 

var 의 scope는 전역이기 때문이다. 

 

var는 이렇듯 자원을 비효율적으로 사용하기 때문에 성능의 저하를 만들수 있다. 

//전역 Scope
{
  //A Scope
  let test = 123;
  {
  //B Scope
     console.log(test); //오류
  }
  console.log(test); //123
}

A Scope에서 let 으로 선언한  test 는  B Scope에선 variable is not defined 라는 에러가 난다.

let/const 는 자신을 정의한 블럭 안에서만 유효하다. 

 

4. const는 상수라지만 .. 자주쓰는 이유는 ? 

아래처럼 객체나 배열, 함수로 선언된 const 상수는 그안의 값들을 변경할 수 있다.

obj 객체의 a 라는 속성의 값을 2로 변경하였다.

 

하지만 obj 객체 자체를 재할당하는것은 불가능하다. 

const obj = { a:1, b:2, c:3}; 

obj.a = 2; 

console.log(obj); //{a: 2, b: 2, c: 3} 


obj = { d:4}; //Uncaught TypeError: Assignment to constant variable.

 

 5. 그렇다면 뭘 주로 써야할까? 

 

const > let > var 

 

왠만하면 const 로 쓰고, 오류가 발생하는 부분만 let 을 쓰고 

비지니스 로직상 정 바꾸기 어려우면 var를 쓰면 되겠다.