[JavaScript] var & let 유효범위

[해당 포스트는 개인적으로 공부를 하고 차후에 참고용으로 하고자 작성한 것입니다.
따라서 잘못된 부분이나 부족한 부분이 있을 수 있기에 참고하시기 바랍니다.]

ES6전 모든 변수에 타입 지정은 var Type을 사용했다.

ES6에서부턴 let, const  Type이 추가가 되어 var은 주로 사용하지 않고 let을 사용하게 되었다.

이번엔 var과 let의 유효 범위에 대해 알아보고자 한다.

 

var

var 키워드는 변수 선언 시 변수의 유효 범위를 함수 단위로 지정한다.

다음의 예제를 보도록 하자.

var value = 10;
console.log(value); // 10

if (true) {
	var value = 20;
   	console.log(value); // 20
}

console.log(value); //20

 

이러한 코드가 하나의 함수 안에 존재한다고 가정했을 때 if 문 밖의 value와 if문 안의 value는 동일한 변수로 취급된다. 따라서 조건문을 통과하여 값이 변경되어 출력되는 것을 볼 수 있다.

 

let

let 키워드는 변수 선언 시 변수의 유효 범위를 Block 단위로 지정한다.

다음의 예제를 보도록 하자.

let value = 10;
console.log(value); // 10

if (true) {
	let value = 20;
   	console.log(value); // 20
}

console.log(value); //10

 

let은 Scope 단위로 범위가 지정되기 때문에 if 문 밖의 value와 내부의 value는 별도의 변수가 된다.

 

이번엔 공통으로 사용되었을 때의 코드를 보도록 하자.

if (true) {
	var value1 = 10;
	let value2 = 20;
}

console.log(value1); // 10
console.log(value2); // Error

 

var은 함수 단위로 동작하기 때문에 if문 밖에서도 정상적으로 호출이 되지만, let은 Scope 단위로 일어나기 때문에 if문의 지역변수처럼 사용된 것을 확인할 수 있다.

 

동일한 let을 사용시

이번엔 다음의 예제를 보도록 하자.

let value = 10;

if (true) {
	console.log(value); //Error
	let value = 20;
}

 

이러한 형태로 사용할 경우 value가 정의되지 않았다는 에러가 발생한다.

 

다음과 같이 사용하면 에러가 발생하지 않는다.

let value = 10;

if (true) {
	console.log(value); // 10
	value = 20;
	console.log(value); // 20
}

이러한 경우는 전역에서 정의된 value를 참조하여 조건문 밖에 값을 가져와 처리하게 된다.

그러나 첫 번째 예제의 경우엔 if 블록 안에서 let으로 변수를 정의하였기 때문에 value는 if 블록문 안에 위쪽으로 호이스팅되어 실제 let으로 선언이 되기 전까지 일시적으로 접근이 안 되는 영역을 만들게 된다.

var과 다르게 let은 호이스팅이 일어나면 undefined 값이 할당되는 것이 아니라 블록 시작부터 선언이 이루어진 라인까지 일시적으로 접근을 막게 된다.

따라서, 일시적으로 접근이 안 되는 영역을 호출하려 하기 때문에 에러가 발생하게 되는 것이다.