[Javascript] Scope

임동현·2022년 7월 7일
0

Scope 란?

scope 는 직역하면 "범위"라는 듯이다.
JavaScript에서 Scope(스코프)는 변수에 접근할 수 있는 범위를 말한다.
!식별자(변수)를 찾기 위한 규칙!이라고도 한다.

var x = 'global';

function foo () {
  var x = 'function scope';
  console.log(x);
}

foo(); // ?
console.log(x); // ?

위 예제에서 x가 두번 선언되었는데 , Javascript 는 각 x가 어떤 값을 가지는지 어떻게 구별할 수 있을까? 위 예제에서 전역에 선언된 변수 x는 어디에든 참조할 수 있다.
하지만 함수 foo 내에서 선언되니 변수 x 는 함수 foo 내부에서만 참조할수 있고, 외부에서는 참조할 수 없다. 이러한 규칙을 스코프라 한당

스코프의 구분

자바스크립트에서 스코프를 구분해보면 다음과 같이 2가지로 나눌수 있다.

  • 전역 스코프(Global scope)
    코드 어디에서든지 참조 할수 있다.
  • 지역 스코프 (Local scope or function-level scope)
    함수 코드 블록이 만든 스코프로 함수 자신과 하위 함수에서만 참조할수있다.

모든 변수는 스코프를 갖는다. 변수의 관점에서 스코프를 구분하면 다음과 같이 2가지로 나눌수 있다.

  • 전역변수 (Global variable)
    전역에서 선언된 변수이며 어디에든 참조할수 있다.
  • 지역 변수 (Local variable)
    지역(함수) 내에서 선언된 변수이며 그 지역과 그 지역의 하부 지역에서만 참조할 수 있다.

변수는 선언위치 (전역 또는 지역)에 의해 스코프를 가지게 된다. 즉, 전역에서 선언된 변수는 전역스코프를 갖는 전역 변수이고, 지역(자바스크립트 경우 함수 내부)에서 선언된 변수는 지역 스코프를 갖는 지역변수가 된다.

전역 스코프를 갖는 전역 변수는 전역(코드 어디서든지)에서 참조할 수 있다. 지역 (함수 내부) 에서 선언된 지역 변수는 그 지역과 그 지역의 하부 지역에서만 참조 할수 있다.

전역 스코프(Global scope)

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

var global = 'global';

function foo() {
  var local = 'local';
  console.log(global);
  console.log(local);
}
foo();

console.log(global);
console.log(local); // Uncaught ReferenceError: local is not defined

변수 global 는 함수 영역 밖의 전역에서 선언되었다. 자바스크립트는 타 언어와는 달리 특별한 시작점(Entry point)이 없어서 위 코드와 같이 전역에 변수나 함수를 선언하기 쉽다.

**렉시컬 스코프

var x = 1;

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

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

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

위 예제의 실행 결과는 함수 bar 의 상위 스코프가 무엇인지에 따라 결정된다. 두가지 패턴을 예측 할수 있는데 첫번째는 함수를 어디서 호출하였는지에 따라서 스코프를 결정하는 것이고 두번째는 함수를 어디서 선언하였는지에 따라 상위 스코프를 결정하는 것이다. 첫번째 방식으로 함수 상위 스코프를 결정한다면 함수 bar 의 상위 스코프는 함수 foo 와 전역일 것이고, 두번째 방식으로 함수의 스코프를 결정한다면 함수 bar 의 스코프는 전역일 것이다.

프로그래밍 언어는 이 두가지 방식 중 하나의 방식으로 함수의 상위 스코프를 결정한다. 첫번째 방식을 동적 스코프라 하고, 두번째 방식을 렉시컬 스코프 또는 정적 스코프라 한다.

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

렉시컬 스코프는 함수를 어디서 호출하는지가 아니라 어디에 선언하였는지에 따라 결정된다. 자바스크립트는 렉시컬 스코프를 따르므로 함수를 선언한 시점에 상위 스코프가 결정된다. 함수를 어디에서 호출하였는지 스코프 결정에 아무런 의미를 주지 않는다. 위 예제의 함수 bar는 전역에 선언되었다. 따라서 함수 bar 의 상위 스코프는 전역 스코프 이고 위 예제는 전역변수 x의 값 1을 두번 출력한다.

profile
프론트엔드 공부중

0개의 댓글