var, let, const

 

	중복	재할당	스코프	호이스팅
var	중복선언가능	가능	함수레벨
let	중복선언불가능	가능	블록레벨
const	중복선언불가능	불가능	블록레벨

중복

var은 중복선언가능 

var name = "JS"; 
console.log(name); // JS  
var name = "Python";
console.log(name); // python

 

let은 중복선언 불가능 

let name = "JS"; 
console.log(name); // JS 
let name = "Python"; 
console.log(name); // Identifier 'name' has already been declared

 

 

const은 중복선언 불가능 

const name = 'JS';
console.log(name); // JS  
const name = 'Python';
console.log(name); // Identifier 'name' has already been declared

 

재할당

 

var은 재할당가능

var name = "JS"; 
console.log(name); // JS  
name = "Python"; 
console.log(name); // python

 

let은 재할당가능 

let name = "JS"; 
console.log(name); // JS  
name = "Python"; 
console.log(name); // Python

 

const은 재할당불가능

const name = "JS"; 
console.log(name); // JS  
name = "Python"; 
console.log(name); // "TypeError: Assignment to constant variable.

 

 

스코프

 

var은 함수 레벨 스코프

- 함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다. 함수 내에서 선언한 변수는 지역변수 이며 함부 외부에서 선언한 변수는 모두 전역 변수 

- 즉, 함수의 코드 블록만을 지역 코드만으로 인정한다. 함수이외에 코드블록(if, for, while, try/catch)에서는 전역변수로 간주한다

var x = 1;  // var x는 전역변수로 지정 
if(true){
    var x = 10;  // 전역변수 이기 때문에 x는 1 => 10으로 변경  }
 console.log(x); // 10

 

let 블록 레벨 스코프

- 모든 코드블록(함수, if, for, while, try/catch)을 지역 스코프로 인정

- 아래의 전역변수로 생성된 foo변수와, 코드 블럭 내 foo 변수는 다른 것 

let foo = 1; //  전역 변수 
{
    let foo = 2; // 지역변수 
    let bar = 3; // 지역변수
}
console.log(foo); // 1
console.log(bar); // 지역변수인 bar를 코드블럭 밖에서 호출하면 오류남

 

 

const 블록 레벨 스코프

- 모든 코드블록(함수, if, for, while, try/catch)을 지역 스코프로 인정

 

 

호이스팅

 var 키워드

// var키워드로 선언한 변수 호이스팅에 의해 런타임 이전에! 선언 단계와 초기화 단계가 실행된다(동시에!)
// 그래서 아래처럼 error가 나지않고, 값만 할당이 안된 상태인 undefined가 된 것이다. 
console.log(foo); // undefined 


foo = 123; // 값을 할당  
console.log(foo); // 123

let 키워드 

// let 키워드로 선언한 변수는 선언단계와 초기화 단계가 분리되어 진행된다. 
// 즉 선언 단계는 var 처럼 런타임 이전에 먼저 실행되지만 초기화 단계는 변수 선언문에서 실행된다 


// 런타임 이전에 변수는 이미 선언이 되었음. 하지만 초기화가 되지 않았기 때문에 foo is not defined가 된다
console.log(foo); // Reference error: foo is not defined 

let foo; // 변수 선언문에서 초기화단계가 실행된다 
console.log(foo); // undefined; 

foo = 100; 
console.log(foo); // 100

 

const키워드 

 

정리 

var  vs  let vs const 

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

- const키워드를 사용하면 의되치 않은 재할당을 방지하기 때문에 좀 더 안전한다 

ES6를 사용한다면 var키워드는 사용하지 않는다 
재할당이 필요한 경우에 한정해 let키워드를 사용한다. 이때 스코프는 최대한 좁게 만든다
변경이 발생하지 안하고 읽기 전용으로 사용하는(재할당이 필요없는 상수) 원시 값과 객체에는 const 키워드를 사용한다. 
const 키워드는 재할당을 금지하므로 var, let 키워드보다 안전한다