[Study] 스코프 | Lexical scope, Scope chain, Global scope, Function scope

JS는 lexical scope를 따릅니다. JS의 변수 스코프를 이해하기 위해 관련된 개념을 알아봅니다.

 

Global scope

글로벌 스코프는 Global 객체인 Window 객체의 Scope를 말합니다.
JS는 별 다른 Main 함수가 없기 때문에, JS를 처음 접하시는 분들은 Global scope에 변수를 선언하기 쉽습니다.
Global scope에 변수를 선언하게 되면, 다른 변수와 변수명이 겹쳐 충돌할 가능성이 있습니다.

let testWord = "Global scope hello world!" // Global scope

const functionScope = () => {
  let testWord = "Local scope hello world!" // Function scope
  console.log("Function scope testWord is .. ", testWord) // "Local scope hello world!" logged
}

console.log("Global scope testWord is .. ", testWord) // "Global scope hello world!" logged

 

Function scope

JS는 var keyword로 변수 선언을 했을 경우 function level scope(함수 레벨 스코프)를 사용합니다.
이럴 경우 아래 예제와 같은 현재 ES6의 let, const 키워드를 사용하는 환경(block level scope)에서는 이해하기 힘든 변수 참조 환경을 보여줍니다.

if (true) {
  var a = "Defined in function scope"
}

console.log("Logged in global scope: ", a) // "Defined in function scope" logged

블록 레벨 스코프가 아닌, var keyword를 사용하여 "함수 레벨 스코프"를 사용했을 때에는 위와 같은 변수 참조가 가능했습니다.

제 실무에서는 ES6의 let, const keyword를 사용하여 개발을 하고 있어서 위와 같은 예제를 보고 잠깐 이해를 하지 못했는데, 위와 같은 변수 Scope를 "Function level scope"라고 하고 함수 밖에서 선언된 변수들은 어떤 "블록"에 들어있다고 하더라도 전부 Global scope에서 선언되었다고 판단합니다.

 

Lexical scope

JS는 Lexical scope를 따릅니다. 흔히 들어보셨을 텐데요, 상위 스코프를 탐색하는 방법중 하나입니다.

Lexical scope는 "함수가 선언됐을 때"를 기준으로 변수를 탐색하게 됩니다. 그러므로 아래 예제와 같은 변수 참조가 이루어집니다.

var helloWord = "Hello world in global scope"

function dynamicScope () {
  var helloWord = "Hello world in dynamicScope function"
  lexicalScope()
}

function lexicalScope () {
  console.log(helloWord)
}

lexicalScope() // "Hello world in global scope" logged

dynamicScope() // "Hello world in dynamicScope function" logged if in !!Dynamic scope!! (in JS(lexical scope), "Hello world in global scope" logged as same

평소 JS를 사용하시는 분이시라면 바로 이해하실 수 있습니다.

앞서 말씀드렸다시피 Lexical scope는 "변수가 선었됐을 때"를 기준으로 스코프를 찾아 변수 탐색을 하기 때문에, lexicalScope 함수가 참조하는 변수는 Global scope의 helloWorld("Hello world in global scope")가 됩니다.

 

그리고 Lexical scope가 아닌 다른 개념이 있는데요 Dynamic scope가 있습니다.

이 스코프는 "변수가 사용됐을 때"를 기준으로 스코프의 변수를 탐색합니다.

그러하여 Dynamic scope를 기준으로 dynamicScope함수를 실행했을 때에는 lexicalScope가 dynamicScope의 Function scope 안에 있는 helloWorld("Hello world in dynamicScope function")을 참조합니다.

 

Scope chain

Scope chain은 위와 같이 상위 스코프를 탐색하는 과정은 스코프의 관계가 구성되어 있기 때문에 탐색을 할 수 있는데, 이렇게 구성되어있는 스코프의 관계 자체를 "스코프 체인" 이라고 합니다.