블록 스코프, 함수 스코프의 차이 (javascript)

js에는 변수를 선언할 때 스코프라는 개념이 언급된다. 그렇다면 이 스코프는 무엇이며, 블록 스코프와 함수 스코프의 차이는 무엇일까?

1. 블록 스코프, 함수 스코프

(1) 스코프란?

• 스코프(scope)는 변수에 접근할 수 있는 범위를 말한다.
• 스코프는 크게 전역 스코프와 지역 스코프로 나눌 수 있다.
• 전역 스코프(global)는 어디에서든 해당 변수에 접근 가능한 걸 의미한다. (전역변수)
• 지역 스코프(local)의 경우, 한정적인 범위에서 해당 변수에 접근이 가능하다. (지역변수)
• 지역 스코프에는 함수 스코프와 블록 스코프가 있으며 이 포스팅에서는 두 스코프에 대해 알아본다.

(2) 함수 스코프와 var

• 함수가 선언되면 하나의 스코프(접근 범위)가 발생하는데 이걸 함수스코프라고 한다.
• 함수 스코프는 함수에서 선언한 변수는 해당 함수 내에서만 접근 가능하다는 걸 의미한다.
• 아래 예시처럼 함수 외부에서 aa를 호출하면 undefined 에러가 뜬다.

function abc() {
  var aa = '12';  // 함수 내부에서 선언
}
console.log(aa);  // Uncaught ReferenceError: aa is not defined

• 만약 변수가 함수 내부에 선언된 것이 아니면 이 변수의 스코프는 전역 스코프(global)이므로
• 어디에서든 접근이 가능하다.

var abc = '123';
console.log(abc)  // 123

• var은 함수 내에서만 지역 변수로 유지되기 때문에, 아래 코드에서는 전역 변수로 취급된다.

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

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

(3) 블록 스코프와 const, let

• 블록 스코프는 블록({})내부에서 선언된 변수는 해당 블록에서만 접근 가능한 걸 말한다.
• let, const로 선언된 변수가 블록 스코프 방식을 따른다.

var과의 차이점을 보자

• var의 경우 함수 스코프를 따르므로, 함수 내부에서는 변수 접근이 가능하다.

function hello() {
  for (var i=0; i<12; i++) {
    ...
  }
  console.log(i)   //접근가능
}

hello();  //12

• 하지만, let, const는 블록 스코프를 따르므로 블록 바깥에서는 변수 접근이 불가하다.

function hello() {
  for (let i=0; i<12; i++) {
    ...
  }
  console.log(i)
}
hello();  //ReferenceError: i is not defined

ES6이전에는 변수 선언시 var을 사용했는데, 앞서 봤다시피 var은 함수 내에서만 지역 변수로 유지된다.
하지만 ES6에 추가된 let,const의 경우 함수가 아닌 블록 단위에서 지역변수로 선언됨을 알 수 있다.

참고
아래 링크로 가면 더 자세히 알 수 있습니다

• (JavaScript) 스코프(Scope)란?
• 자바스크립트의 스코프 : 함수 스코프와 블록 스코프