[자바스크립트][ES6] 함수 스코프, 블록 스코프

Scope란?

• 우리말로 '범위'라는 뜻을 가지고 있다. 즉, '변수에 접근할 수 있는 범위'를 뜻한다.
• 자바스크립트에서는 2가지 타입이 있다. 바로 global(전역)과 local(지역)이다.
• 전역 스코프 : 말 그대로 전역에 선언되어 있어 어느 곳에서든지 해당 변수에 접근할 수 있다.
• 지역 스포크 : 해당 지역에서만 접근할 수 있어 지역을 벗어난 곳에서 접근할 수 없다.

자바스크립트에서는 함수를 선언하면 함수를 선언할 때마다 새로운 스코프를 생성하게 된다. 그러므로 함수 몸체에 선언한 변수는 해당 함수 몸체 안에서만 접근할 수 있다. 이걸 함수 스코프(function-scoped)라고 한다. 함수 스코프가 바로 지역 스코프의 예라고 할 수 있다.

예제를 통해 한번 보도록 하자! ES5 까지는 아래와 같이 선언되었다.

(function() {
	var a = 10;
    (function () {
    	var a = 20;
        console.log(a);	// 출력 20
    })();
    console.log(a);		// 출력 10
})();
console.log(a);			// reference error

 

하지만 ES6의 등장으로 let, const가 추가되고 블락스코프 ( {} )의 등장으로 아래와 같이 선언이 가능하다.

{
  let a = 10
  {
    let a = 20
    console.log(a)	// 출력 20
  }
  console.log(a)	// 출력 10
}
console.log(a)		// reference error

 

그렇다면 let, const의 호이스팅은 어떻게 될까?

먼저 function 같은 경우는 함수 스코프가 존재한다. 하지만 ES6 이후로 블록 스코프가 나왔다고 했다. 따라서 if, for, while 등과 같은 '문단'들은 결과를 리턴하지 않으므로 문 자체가 하나의 block-scope 된다. 

if (true) {
  let a = 10
  if (true) {
    console.log(a)	// reference Error
    const a = 20
    console.log(a)	// 20
  }
  console.log(a)
}
console.log(a)

위의 예제를 보자 첫 if문에 대한 블록 스코프가 생성되고 let으로 a를 선언한다. 다음으로 두번째 if문에 대한 블록 스코프가 생성된다. 여기서 만약 console.log(a)를 찍는다면 어떤 값이 나올까?

호이스팅이 된다면? a는 undefined 가 될 것이다. 호이스팅이 안된다면? 자신에 아직 a가 없기 때문에 상위 스코프에서 찾기 때문에 a는 10이 나온다.

하지만 결과값은 reference error 가 나온다. 왜 그럴까? 그것을 바로 TDZ( Temporal Dead Zone ) 임시 사각지대라고 불리는 것 때문이다. let과 const 같은 경우는 해당 변수가 선언되기 전까지는 호출할 수 없다는 것이다. 

기존의 호이스팅 같은 경우는 변수명을 위로 끌어올리고 undefined가 할당이 되는데, let과 const는 변수명만 위로 끌어올리고 끝난다. 따라서 undefined가 할당이 안되었고 값이 존재하지 않기 때문에 reference error가 난다.