[ES6]_var 와 let,const 의 차이

Var , Let & Const 이해

 

ES2015(ES6) 부터 변수 선언에 사용할 수 있는 let 과 const가 추가되었습니다.

 

이전 개발 자료 혹은 소스코드를 보게 되면,

var 로 변수선언이 이루어진 경우가 많은데 정확히 무엇이 다른지 알아보겠습니다

---

Var

 

스코프 레벨 - 선언된 위치에 따라 나뉨

 

var 가 함수 외부에서 선언될 때의 범위는 전역범위가 됩니다.

즉 함수 외부에서 var를 사용하여 선왼된 모든 변수를 전체 윈도우 상에서 사용할 수 있습니다.

 

var 가 함수 내에서 선언된 경우에는 함수 범위로 지정됩니다.

함수 내에서만 사용 가능하고 접근할 수 있습니다. - 외부사용불가

 

가능)

var test = "테스트입니다"
var test = "변경합니다"

또한

var test = "테스트입니다"

function testFunction(){
	var test = "변경합니다"
}

가능)

var test = "테스트입니다"

function testFunction(){
	var hello = "안녕하세요"
    
    console.log(test); // 테스트입니다.
}

console.log(hello); // error

문제점)

var test ="테스트입니다"



function printFunction(){ // 목적은 전역변수인 테스트입니다를 출력하기 위한 함수라 가정
	console.log(test);
}

//..... 코드량이 많아짐

printFunction(); // "테스트입니다"

if(true){
	var test = "변경합니다"
}
//...코드량이 많아짐

printFunction(); //"변경합니다"

위와 같이 코드가 길어지게 되면 의도하지 않은 변수가 출력이 될 수 있습니다.

이때 오류를 내지 않아 개발자는 디버깅에 어려움을 겪게 됩니다.

 

---

Let

 

블록 레벨 - 선언된 해당 블록 내에서만 사용 가능

 

var 와 마찬가지로 함수 외부에서 선언될 때는 전역범위가 되고

 

함수 내부에서 선언된 경우에는 함수 범위로 지정됩니다.

 

let 은 업데이트가 될 수 있지만, 재선언은 불가능 합니다.

 

가능)

let test = "테스트입니다"
test = "변경합니다"

불가능)

let test = "테스트입니다"
let test = "변경합니다" //error

//또한

let test = "테스트입니다"

function testFunction(){
	let test = "변경합니다" // error
}

---

Const

let 과 선언방식은 동일하나

 

업데이트도, 재선언도 불가능합니다.

 

---

호이스팅

 

3가지 방식 모두 호이스팅이 됩니다.

 

Var 의 경우에 undefined 로 초기화가 되고

Let 과 Const 는 값으로 초기화하지 않습니다.

 

자세한 내용은 실행 컨텍스트의 개념을 이해해야 하기 때문에 이후 포스팅으로 다루겠습니다.

 

호이스팅과 실행컨텍스트의 관계 알아보기는 다음포스트 참고

https://yn971106.tistory.com/172

[ES6]_Execution Contexts (실행 컨텍스트) 이해

 

감사합니다.