함수 스코프와 블록 스코프

스코프 

변수나 함수가 선언되어 사용할 수 있는 유효 범위를 말합니다.

스코프는 크게 전역 스코프와 지역 스코프로 나누는데,

지역 스코프에 오늘 정리할 함수 스코프와 블록 스코프가 있습니다.

• 전역 스코프 : 어디든지 변수에 접근이 가능
• 지역 스코프 : 정해진 범위 안에서 접근이 가능

 

함수 스코프

자바스크립트는 함수 스코프를 기본으로 사용합니다. 

함수 스코프는 새로운 함수가 생성될 때마다 새로운 스코프가 발생되는데,

함수에서 선언한 변수는 해당 함수 내에서만 접근 가능하다는 걸 의미합니다.

 

function sayHello() {
  var hello = 'hello';
}
hello; //ReferenceError

위 코드를 보면, sayHello라는 함수가 생성된 것을 볼 수 있습니다.

hello라는 변수가 sayHello라는 변수 안에서 선언되어 있으므로,

함수 스코프를 따라 ReferenceError가 나는 것을 볼 수 있습니다.

 

 

블록 스코프

블록 스코프는 블록 {}이 생성될 때마다 새로운 스코프가 형성되는 것을 의미합니다.

원래 자바스크립트는 함수 스코프를 따르지만,
let과 const 키워드의 등장으로 블록 스코프를 사용하는 것도 가능해졌습니다.

 

먼저, 아래 두개의 코드를 보겠습니다.

if (true) {
  var abc = '123'; // var로 선언하면 블록에 의한 범위 제한이 없음
}
console.log(abc)  // 123

if (true) {
  const abc = '123';  // const, let은 블록 스코프를 따름
}
console.log(abc) // ReferenceError

var로 선언한 abc는 출력이 잘 되는 것을 볼 수 있지만, const로 선언한 abc는 오류가 나는 것을 볼 수 있습니다.

위에서 말했듯이, const는 블록 스코프를 따르기 때문에

if문의 블록 스코프에서 벗어나 에러가 나는 것을 알 수 있습니다.