Chapter 4: Aroundthe Global Scope - hochan222/Everything-in-JavaScript GitHub Wiki

Execution Context in JS

JS 엔진이 single runtime context에서 어떻게 합쳐질까? Browser-executed applications에서 3가지 방법이 있다.

1. ES 모듈을 직접 사용하는 경우 파일들은 JS enviroment에 개별적으로 불러와지고, 각 모듈은 접근해야하는 다른 모듈에 대한 참조를 가져온다.
2. 빌드 프로세스에서 번 들러를 사용하는 경우 일반적으로 모든 파일이 브라우저와 JS 엔진에 전달되기 전에 함께 연결되어 하나의 큰 파일 만 처리된다.
3. 만약 어느것도 아니면 global scope가 그 역할을 한다.

var moduleOne = (function one(){ 
  // ..
})();

var moduleTwo = (function two(){
  // ..

  function callModuleOne() { 
    moduleOne.someMethod();
  }

  // ..
})();

이거랑 밑에 별도의 두 파일이랑 똑같이 전역으로 처리된다.

var moduleOne = (function one(){ 
  // ..
})();

var moduleTwo = (function two(){
  // ..

  function callModuleOne() { 
    moduleOne.someMethod();
  }

  // ..
})();

브라우저 환경에서 개별적으로 불러와지는 경우 전역 변수가 유일한 공유 리소스이다.

전역범위는 그외에도 다음과 같은 역할을 수행한다.

• built-ins 제공
  • primitives: undefined, null, Infinity, NaN
  • natives: Date(), Object(), String(), etc.
  • global functions: eval(), parseInt(), etc.
  • namespaces: Math, Atomics, JSON
  • friends of JS: Intl, WebAssembly
• JS 엔진을 호스팅하는 환경에서 그것의 built-ins 제공
  • console (and its methods)
  • the DOM (window, document, etc)
  • timers (setTimeout(..), etc)
  • web platform APIs: navigator, history, geolocation, WebRTC, etc.

Node도 전역으로 여러가지를 제공하지만 require(), __dirname, module, URL(등등)들은 기술적으로 global scope에 있지 않는다.

global scope는 항상 최상단 scope(파일의 가장 바깥쪽 부분) 일까..? JS environment에 따라 다르게 처리할 수 도 있다.

var studentName = "Kyle";

function hello() {
  console.log(`Hello, ${ studentName }!`);
} 

hello();
// Hello, Kyle!

일반적으로 웹페이지 환경에서 window 를 통해 global scope에 접근 할 수 있다.

var studentName = "Kyle";

function hello() {
  console.log(`Hello, ${ window.studentName }!`);
} 

hello();
// Hello, Kyle!

그러나 항상 모든 JS 환경에서 window를 통해 접근 할 수 있는 것은 아니다.

전장에서 설명한 쉐도잉으로 다음과 같은 문제가 발생 할 수 있다.

window.something = 42;

let something = "Kyle";

console.log(something);
// Kyle

console.log(window.something); 
// 42

let 선언은 전역 변수를 추가하지만 전역 객체 속성은 추가하지 않는다.

이 문제를 피하기위해 전역 변수는 항상 var, 그외 블록 변수는 let과 const를 사용하자.

DOM에서 전역 범위의 놀라운 동작 중 하나는 id 속성이있는 DOM 요소가 이를 참조하는 전역 변수를 자동으로 만든다. 그외에는 window[]로 접근 할 수 있다.

<ul id="my-todo-list">
  <li id="first">Write a book</li> ..
</ul>

first;
// <li id="first">..</li>

window["my-todo-list"];
// <ul id="my-todo-list">..</ul>

var name = 42; 

console.log(name, typeof name);
// "42" string

name은 window.name으로 window에 미리 정의돼있다. 따라서 우리는 숫자를 넣었지만 문자열로 저장되는 기이한 현상을 볼 수 있다. 이런 드문 몇몇 가지를 제외하고 정상 작동한다.

Web Workers는 브라우저 JS 동작을 기반으로하는 웹 플랫폼 확장으로, JS 파일이 기본 JS 프로그램을 실행하는 스레드와 완전히 별개의 스레드 (운영 체제 측면)에서 실행될 수 있도록 한다.

Web Worker 프로그램은 별도의 스레드에서 실행되기 때문에 경쟁 조건 및 기타 오류를 방지하기 위해 기본 애플리케이션 스레드와의 통신이 제한된다. 예를 들어, Web Worker는 DOM에 액세스 할 수 없다. (단, 네비게이터같은 일부 웹 API는 가능)

Web Worker는 완전히 분리된 프로그램으로 취급돼서 메인 JS 프로그램과 전역 범위를 공유하지 않는다. DOM 액세스가 없기 때문에 전역 범위의 창 별칭이 존재하지 않는다. Web Worker에서 전역 개체 참조는 일반적으로 self를 사용하여 만들어진다.

var studentName = "Kyle"; 
let studentID = 42;

function hello() {
  console.log(`Hello, ${ self.studentName }!`);
} 

self.hello();
// Hello, Kyle!

self.studentID;
// undefined

Developer Tools Console/REPL은 기존 처리보다 간편화됐기 때문에 실제 동작과 유사하게 작동한다. 주로 다음 세가지에서 차이가 날 수 있다.

• global scope 동작
• 호이스팅
• 가장 밖에서 사용될 때 let과 const의 동작 (블록 범위 선언자)

따라서 Developer Tools Console/REPL은 JS에서 세세하고 미묘한 동작을 확인 할 때 적합한 툴은 아니다.

ES6에서 module pattern을 지원한다. (export를 사용해 조정된다.)

var studentName = "Kyle";

function hello() {
  console.log(`Hello, ${ studentName }!`);
} 

hello();
// Hello, Kyle!

export hello;

studentName과 hello은 전역 변수가 아니다.

Node는 Node 프로세스를 시작하는 기본 파일을 포함하여 불러오는 모든 단일 .js 파일을 모듈로 취급한다. Node 프로그램의 최상위 레벨이 실제로는 전역 범위가 아니다. 최근 ES 모듈에 대한 지원을 추가했지만, Node는 처음부터 다음과 같은 "CommonJS"라는 모듈 형식을 지원했다.

function Module(module,require,__dirname,...) { 
  var studentName = "Kyle";

  function hello() {
    console.log(`Hello, ${ studentName }!`);
  } 
  
  hello();
  // Hello, Kyle!

  module.exports.hello = hello; 
}

Node는 require ()와 같은 많은 "전역"을 정의하지만 실제로 전역 범위의 식별자 (전역 객체의 속성도 아님)가 아니다. 기본적으로 Module (..) 함수 선언에 나열된 매개 변수와 비슷하게 모든 모듈의 범위에 삽입한다.

Node에서 실제 전역 변수는 global을 통해 정의한다.

global.studentName = "Kyle";

function hello() {
  console.log(`Hello, ${ studentName }!`);
} 

hello();
// Hello, Kyle!

module.exports.hello = hello;

ES2020에서 JS는 마침내 globalThis라는 전역 범위 개체에 대한 표준화 된 참조를 정의했다.
또한, 폴리필로 다음과 같이 사용 할 수 있다.

const theGlobalScopeObject =
    (typeof globalThis != "undefined") ? globalThis : 
    (typeof global != "undefined") ? global : 
    (typeof window != "undefined") ? window : 
    (typeof self != "undefined") ? self :
    (new Function("return this"))();