자바스크립트 ES6 block scope

자바스크립트 ES6 block scope

block scope를 이해하기 위해서 여러 블로그에서 여러가지 방식으로 

 

Scope란 무엇일까??
-  유효공간, 영역, 범위, 허용공간 정도로 생각할수 있다.

# 함수스코프

자바스크립트는 기본적으로 함수 스코프를 따른다. 
함수가 생성될때 마다 새로운 스코프가 발생한다.

예를 들면 

var x  = 1;

if (true) {
  var x = 2;
}
console.log(x); =>2

위코드는 함수를 만들지 않았기 때문에 스코프가 발생되지 않았다.

 

function a(){
 var x = 1;
}

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

함수를 만들고 그안에 변수를 저장했다.

이 경우는 함수생성과 동시에 실행 컨텍스트가 생성되고 내부에 x에 변수가 저장된다.
따라서 함수 외부에서 x에 접근시 scope가 다르기때문에 접근이 불가능하다.

# 블록 스코프 

자바스크립트가 블록스코프를 사용할수 있도록 ES6에서 let과 const의 키워드가 등장 했다.

함수스코프가 함수 생성시마다 새로운 스코프 생성된다면 

{} 블록이 생성될때마다 스코프를 적용 시킬수 있는것이 바로 블록 스코프이다.

 

{
 var x = 2;
}

console.log(x);  // 2

var 를 사용하면 2가 출력된다. 
함수스코프를 적용받기 때문에 블록을 사용시에 그대로 2가 출력되는것이다.

{
 let x = 2;
}

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

let을 사용시에는 블록스코프가 적용된다.
블록 {} 안에서의 스코프가 적용되기때문에 ReferenceError가 발생한다.