[ JavaScript ] ES6 : Block scope | var, let 변수 유효범위

 

 

1. Scope

 

: 변수의 유효범위.

 

 

 

var 의 변수 유효범위

 

=> 블록 스코프가 아닌 function 스코프이다.

 

 

 

var num = 1;
function printNum(){
  console.log(num);
  var num = 2;
  console.log(num);
};
printNum(); //2

 

 

 

 

 

 

 

function 레벨에서 호이스팅이 발생하고 있는 것을 확인할 수 있다.

 

 

 

호이스팅 : var, let, const 등 모든 선언문이 올려져 해당 변수가 속한 스코프의 최상단으로 올리는 현상.

 

 

 

함수가 아닌 블록일 경우의 예를 보겠다.

 

 

 

var test = '1';
if(true){
	var test = '2';
    console.log(test);
};
console.log(test);

 

 

 

 

 

 

2 가 두 번 출력되는 것을 알 수 있다.

 

 

1번 라인의 test 는 전역 스코프에,

 

3번라인의 test는 지역 스코프에 선언된 변수이다.

 

 

지역 스코프에 선언된 test 가 호이스팅되어 전역 스코프에 선언된 test 값을 변경하는 것을 볼 수 있다.

 

 

 

 

2. let 선언자

 

 

위의 문제를 해결하기 위한 방법으로, let 선언자를 사용하는 방법이 있다.

 

 

var test = '1';
if(true){
	var test = '2';
    console.log(test);
};
console.log(test);

 

 

 

 

 

let 키워드를 사용했기 때문에 전역 스코프와 블록 스코프를 구별할 수 있다.

 

따라서 위와 같은 출력을 내는 것을 확인할 수 있는 것이다.

 

 

 

결론짓자면, let 은 변수의 유효범위를 블록 스코프로 처리한다.

 

따라서 ES6 에서는 가급적 var 를 지양하고 let 과 const 를 사용하는 것이 좋다.