[ES6] 변수 선언 방식 3가지 (var, let, const)

Javascript의 변수 선언 방식 3가지 (var, let, const)

1. var
 - 특징 : 변수 재선언 가능

var name = '테스트'; console.log(name); // 테스트 var name = '재선언 및 할당'; console.log(name); // 재선언 및 할당

 

소스가 많아지면 변수 재선언을 했는지 안했는지 한눈에 파악하지 못하기 때문에
ES6 이후에 보완된 선언 방식 2가지가 let과 const 입니다.

 

2-1. let
 - 특징 : 변수 재선언 불가, 재할당 가능

let name = '테스트'; console.log(name); // 테스트 let name = '재선언' console.log(name); // Uncaught SyntaxError: Identifier 'name' has already been declared

tip) 활용방법 : 자주쓰는 for문을 선언할때 let으로 바꿔보라.

for (let i=0;i<5;i++){ }

2-2. const
 - 특징 : 변수 재선언, 재할당 모두 불가

const name = '테스트'; console.log(name) // 테스트 const name = '재선언'; console.log(name); // Uncaught SyntaxError: Identifier 'name' has already been declared name = '재할당'; console.log(name); // Uncaught TypeError: Assignment to constant variable.

※ const를 사용하더라도 배열과 오브젝트의 값을 변경하는 것은 가능하다.

 - 다만 중괄호로 구분되면 변수 재선언 가능 (let도 동일함)

const hi = "hi1"; if (true) {   const hi = "hi2";   console.log(hi); // hi2 } console.log(hi); // hi1

결과 hi2 hi1

 

 한줄 요약 : 변수 선언에는 기본적으로 const를 사용하고, 재할당이 필요한 경우에 한정해 let 을 사용하는 것이 좋다.

 

출처 : https://velog.io/@bathingape/JavaScript-var-let-const-%EC%B0%A8%EC%9D%B4%EC%A0%90

 

---

ES6 - const, let의 차이를 확인할 수 있는 예제

function f() {  let x;  {    // 새로운 블록안에 새로운 x의 스코프가 생김    const x = "sneaky";    x = "foo"; // 위에 이미 const로 x를 선언했으므로 다시 값을 대입하면 에러 발생  }  // 이전 블록 범위로 돌아왔기 때문에 'let x'에 해당하는 메모리에 값을 대입  x = "bar";  let x = "inner"; // Uncaught SyntaxError: Identifier 'x' has already been declared }

 

출처 : Vue.js 중급 강좌