Written by Nostrss
on April 30, 2022

스코프란 무엇인가

Scope

MDN Reduce 문서 보러가기

현재 실행되는 컨텍스트를 말한다. 여기서 컨텍스트는 값과 표현식이 “표현”되거나 참조 될 수 있음을 의미한다. 만약 변수 또는 다른 표현식이 “해당 스코프”내에 있지 않다면 사용할 수 없다. 스코프는 또한 계층적인 구조를 가지기 때문에 하위 스코프는 상위 스코프에 접근할 수 있지만 반대는 불가하다.

MDN에서는 위와 같이 설명하고 있다. 쉽게 바꿔서 말하자면 현재 접근 할 수 있는 값과 표현식의 범위라고 이해하는게 좋을 것 같다. 즉, 지금 접근할 수 있는 값이나 식인 경우 스코프 범위 밖이구나 생각하면 된다.

전역 스코프

스크립트 영역 어디에서도 접근 할 수 있는 스코프
전역에 변수를 선언하면 이 변수는 어디서든지 참조할 수 있는 전역 스코프를 갖는 전역 변수가 된다. var 키워드로 선언한 전역 변수는 전역 객체(Global Object) window의 프로퍼티이다.

지역 스코프

보통 블록({}) 안이나, 함수 안에서만 변수에 접근 할 수 있는 변수를 말한다.
여기서 함수 내의 변수의 경우는 함수가 클로저 역할을 하기 때문에 함수 내에 정의된 변수는 외부 함수나 다른 함수 내에서는 접근 할 수 없다.

function exampleFunction() {
    var x = "declared inside function";
    // x는 오직 exampleFunction 내부에서만 사용 가능.
    console.log("Inside function");
    console.log(x);
}

console.log(x);  // 에러 발생

예를 들어 위와 같은 상황은 유효하지 않다.

렉시컬 스코프

var x = 1;

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

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

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

위의 예제의 결과는 무엇일까? 이 예제는 함수 bar의 상위 스코프가 무엇인지에 따라 결정된다.

첫번째는 함수를 어디서 호출하였는지에 따라 상위 스코프를 결정 한다.

두번째는 함수를 어디서 선언하였는지에 따라 상위 스코프를 결정하는 것이다.

첫번째 방식으로 함수의 상위 스코프를 결정한다면 함수 bar의 상위 스코프는 함수 foo와 전역일 것이고, 두번째 방식으로 함수의 스코프를 결정한다면 함수 bar의 스코프는 전역일 것이다.

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

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

자바스크립트를 비롯한 대부분의 프로그래밍 언어는 렉시컬 스코프를 따른다.

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

즉 위 예제의 함수 bar는 전역에 선언되었다.

따라서 함수 bar의 상위 스코프는 전역 스코프이고 위 예제는 전역 변수 x의 값 1을 두번 출력한다.

← → Top