var, let, const 의 차이점

• ES6 이전의 변수 선언방법 var
• ES6 이후의 변수 선언방법 var, let, const 

 

현재에는 var를 거의 사용하지 않는 추세입니다.

---

var를 사용하였을때 문제점

 

1. 변수 선언시 var 키워드 생략가능

 

coffee = 'good';

console.log(coffee); //good

 

2. 변수 선언 후  중복 선언 가능

 

var coffee = 'good';

console.log(coffee); //good



var coffee= 1;

console.log(coffee); //1

 

3. 변수가 선언도 되지 않았는데 참조 가능 ( 변수 호이스팅 ) 

 

console.log(coffee); // undefined

var coffee ='good'; // (할당)

console.log(coffee); //good

---

 

변수 호이스팅이란?

변수가 생성되면 1. 선언 2. 초기화 3. 할당 이라는 3단계에 걸쳐서 생성이 되는데 

scope에 변수를 등록하면 변수를 위한 공간이 확보가 되고( 선언 ), 변수를 undefined로 초기화를 합니다. 

그래서 위의 예제에서도 첫 번째 console.log에 에러가 나지 않고 undefined가 찍히는 것입니다.

그리고 할당문에 도착하고 값이 할당이 되었을 때 정상적인 값이 출력되는 것을 볼 수 있습니다.

이러한 현상을 변수 호이스팅이라고 합니다.

var의 문제점은 변수 선언시에 선언과 초기화가 동시에 이루어짐으로써

변수 호이스팅으로 인한 문제가 발생합니다.

 

 

4. function-level-scope

 

var는 함수 코드 블록 ({})만 Scope로 인정하기 때문에 함수 외부에서 선언된 모든 변수는 전역변수 입니다.

 

var coffee = 'good';console.log(coffee); // good
{    
	coffee ='nice'
}
console.log(coffee); //nice

for(var i=0; i<=5;i++){
	console.log(i); // 0 ~ 5 까지 번호 출력
}
console.log(i);//6

function testCoffee(){
	var tCoffee = 'test';
}
console.log(tCoffee); //error : tCoffee is not defined

 

이런 것들을 해결하기 위하여 let, const가 ES6에서 나오게 되었습니다. 

 

---

let, const의 공통점

1. block-level-scope

 

var에서는 function-level-scope라 전역 변수가 남발할 수있는 사태가 발생하였습니다. 

하지만 let, const는 block-level-scope라 전역 변수를 남발하는 사태를 줄일 수 있습니다.

 

let coffee = 'good';



{

    console.log(coffee); // ReferenceError : coffee is not defined

    let coffee = 'good';

    console.log(coffee); // good

}

 

2. 변수 중복 선언 불가

 

var 에서는 변수를 위에 선언 후 다시 아래에서 재 선언이 가능하였습니다.

하지만! let,const에서는 재 선언 시 문법 에러가 뜨게 되어 있습니다.

let coffee ='good';

let coffee = 'noce'; // Identifier 'coffee' has already been declared

 

3. 호이스팅 불가

 

var로 변수 생성 시 선언과 초기화가 동시에 이루어 지기 때문에 호이스팅 현상이 일어났습니다. 

하지만! let, const는 변수 생성 시 선언과 초기화가 분리되어서 진행이 됩니다.

let,const는 변수를 생성하고 선언까지 한 후 일시적 사각지대(TDZ)가 선언과 초기화 사이에 생기며,

할당문에서 변수 값이 할당 될 때 초기화 및 값 할당이 이루어 집니다.

 

console.log(coffee); // error : coffee is not defined

let coffee = 'good';

---

 

let, const의 차이점

 

let으로 변수 선언 후 값을 재할당 가능하지만 

const로 선언 후 값을 재할당 할 수 없습니다. 

 

let coffee ='good';

coffee='nice'; //success 



const food = 'good';

food = 'nice'; // error: Assignment to constant variable

 

결과적으로

값을 재할당 할 경우는 let

재할당을 하지 않을 경우에 const

 

를 사용하면 됩니다.