[JavaScript] 스코프

스코프란?

스코프(Scope)는 변수나 함수에 접근할 수 있는 유효 범위(영역)을 의미한다.

Scope
명사

(주제·조직·활동 등이 다루는) 범위

전역 스코프(Global Scope)

코드 전체에서 접근할 수 있는 변수나 함수가 속하는 범위

const globalVar = '전역 변수';

function printGlobal() {
  console.log(globalVar); // 전역 변수 접근 가능
}

printGlobal(); // "전역 변수"

지역 스코프(Local Scope)

특정 코드 블록(함수, 블록 등) 내부에서만 접근할 수 있는 범위

함수 스코프(Function Scope)

함수 내부에서만 유효한 범위

JavaScript는 기본적으로 함수 스코프를 따른다. 함수 내에서 선언한 변수는 그 함수 내에서만 접근할 수 있고 함수 안의 블록에서 선언된 변수도 해당 함수 내에서 접근할 수 있다.

function functionScope() {
  var functionVar = '함수 변수';
  console.log(functionVar); // "함수 변수"
}

functionScope();
console.log(functionVar); // 오류: functionVar is not defined

블록 스코프

{}로 감싼 블록 내에서 유효한 범위.

let, const 키워드로 선언된 변수는 블록 스코프를 가진다.

{
  let blockVar = '블록 변수';
  console.log(blockVar); // "블록 변수"
}

console.log(blockVar); // 오류: blockVar is not defined

렉시컬 스코프

다음 예시 코드에서의 실행 결과는?

var x = 1; // global

function foo() {
  var x = 10;
  bar();
}

function bar() {
  console.log(x);
}

foo(); // ?
bar(); // ?

10과 1이 출력된다고 생각할 수 있지만 실제로는 global로 선언된 변수 x의 값 1이 두 번 출력되었다.

프로그래밍 언어는 두 가지 방식으로 함수의 상위 스코프를 결정한다.

1. 함수를 어디서 호출하였는지에 따라 상위 스코프를 결정하는 방식
2. 함수를 어디서 선언하였는지에 따라 상위 스코프를 결정하는 방식

첫 번째 방식을 동적 스코프(Dynamic Scope), 두 번째 방식을 렉시컬 스코프(Lexical Scope) 또는 정적 스코프(Static Scope)라고 한다.

렉시컬 스코프는 함수를 어디서 호출하는지가 아니라 어디에 선언하였는지에 따라 결정된다.

JavaScript는 렉시컬 스코프를 따르므로 함수를 선언한 시점에 상위 스코프가 결정된다. 함수를 어디에서 호출하였는지는 스코프 결정에 아무런 의미를 주지 않는다.

해당 예제에서 함수 foo() 내부에서 bar()를 호출하였지만, bar 함수는 전역에서 선언되었기 때문에 전역 스코프의 변수 x를 찾는다.

따라서 10이 아닌 1을 출력하는 것이다.