ES6 - Block scope

Scope란 범위. 유효공간. 살 수 있는 공간. 허용공간. 허용범위 를 의미한다.

 

함수스코프란 함수에 의해서 생기는 범위. 

 

자바스크립트에서 ES5에서는 함수에 의해서만 변수의 유효범위가 생길 수 있었다.

 

ES6부터

블록스코프가 등장하였다. 

블록이란?

{  }중괄호를 의미한다. 

{  }에 의해서 변수의 유효범위가 결정된다. 라고 할 수 있다.

 

{
    let a = 5
    {
        let a = 10
        console.log(a)
    }
    console.log(a)
}
console.log(a)

콘솔 값은 각각  10 , 5, undefined가 출력된다.

(function () {
  var a = 5;
  (function () {
    var a = 10;
    console.log(a);
  })();
  console.log(a);
})();
console.log(a);

 두 코드의 실행 결과는 같다라는 것을 알 수 있다. 

 

 

 

1) let, const에 대해서만.

function hasValue(p) {
  console.log(v); //undefined
  if (p) {
    var v = "blue";
    console.log(v); //blue
  } else {
    var v = "red";
    console.log(v); //red
  }
  console.log(v); //blue
}
hasValue(10);

이 코드를 통해서 var로 선언한 것은 블록 스코프에 영향을 받지 않는다는 것을 알 수 있다. 

위 코드를 let으로 바꿔보자.

function hasValue(p) {
  console.log(v); //undefined
  if (p) {
    let v = "blue";
    console.log(v); //blue
  } else {
    let v = "red";
    console.log(v); //red
  }
  console.log(v); //undefined
}
hasValue(10);

 마지막 콘솔 값은 블록스코프에 의해서 undefined의 결과 값을 나타내는 것을 알  수 있다.