var, let, const

자바스크립트의 변수 및 상수 선언 키워드 입니다.

 

var

• 초기 자바스크립트는 변수 선언을 var 만을 사용 했습니다.

 

var 특징

• 함수 레벨 스코프(Function Level Scope) 또는 전역 스코프

var a = "a";

function example() {  
var b = "b";  
console.log(a); // a 전역변수. 출력가능.

if (true) {  
var c = "c";  
console.log(b); // b - 해당 함수 내 선언한 변수. 출력 가능.  
}  
console.log(c); // c - 해당 함수 내 선언한 변수. 출력 가능.  
}  
example();

// var는 변수의 중복 선언 가능
var name = "kim";
console.log(name); // kim

var name = "lee";
console.log(name); //lee

//값의 재할당이 가능
var a = 10; 
a = 20; 
console.log(a); // 20

//선언하기 전에 사용이 가능
function sayHi() {
    phrase = "Hello"; 
    alert(phrase); 
    var phrase; 
 }

 sayHi();

 

하지만 var 는 문제점이 많기 때문에 사용을 자제 합니다.

• 대부분의 var의 특징이 좋지 않은 부작용을 가져옵니다.
• 초창기에는 유연성을 이용하여 프로그램을 작성 하였지만, 어느 정도이 규모있는 프로젝트를 하다 보면
  선언하지 않는 값들이 할당 되어져 있을 수도 있고 위험 부담이 큽니다.

---

let

• ES6(ES2015)부터 let과 const가 추가 되었습니다.

 

let 특징

• 중복 선언 불가능 

let a = 10; let a = 20; // SyntaxError: Identifier 'a' has already been declared

• 값의 재할당 가능

let b = 111; b = 222; console.log(b); // 222

• let 은 함수 내부는 물론, if문이나 for문 등의 코드 블럭{ ... } 에서 선언된 변수도 지역변수로 취급 합니다.
  블럭 레벨 스코프(Block Level Scope)

let a = "a";

function example() {  
let b = "b";  
console.log(a); // a 전역변수. 출력 가능

if (true) {  
let c = "c";  
console.log(b); // b 해당 함수 내 선언한 변수. 출력 가능  
}  
console.log(c); // ReferenceError: c is not defined  
}  
example();

---

const

• 한 번 값을 선언하면 절대 바뀌지 않습니다. (상수)

 

const 특징

• 중복 선언 불가능 

const b = 10; const b = 20; // SyntaxError: Identifier 'b' has already been declared

• 값의 재할당이 '불가능'

const c = 111; c = 222; // TypeError: Assignment to constant variable.

• const는 함수 내부는 물론, if문이나 for문 등의 코드 블럭{ ... } 에서 선언된 변수도 지역변수로 취급 합니다.
  블럭 레벨 스코프(Block Level Scope)

---

정리

• 값 변경 가능 유무
  • var과 let은 값이 선언된 이후에 값을 변경할 수 있지만, const는 생성할 때 선언된 초기값을 변경할 수 없습니다.
• 함수스코프 vs 블록스코프
  • var은 함수 스코프를 가지지만, let과 const 변수는 블록 스코프를 가집니다.
• 중복 선언은 var만 가능 합니다.

 

참고

• 드림코딩
• https://ko.javascript.info/var
• https://wonyoung2257.tistory.com/27
• https://curryyou.tistory.com/192