--- title: globalThis slug: Web/JavaScript/Reference/Global_Objects/globalThis tags: - JavaScript - Reference translation_of: Web/JavaScript/Reference/Global_Objects/globalThis --- <div>{{jsSidebar("Objects")}}</div> <p>전역 <code><strong>globalThis</strong></code> 속성은 전역 <code>this</code> 값을 가진 전역 객체를 반환합니다.</p> <div>{{EmbedInteractiveExample("pages/js/globalprops-globalthis.html")}}</div> <p>{{JS_Property_Attributes(1, 0, 1)}}</p> <h2 id="설명">설명</h2> <p>역사적으로, 서로 다른 JavaScript 환경의 전역 범위에 접근하는건 서로 다른 구문을 필요로 했습니다. 웹에서는 {{domxref("Window.window", "window")}}, {{domxref("Window.self", "self")}}, {{domxref("Window.frames", "frames")}}를 사용할 수 있지만, <a href="/ko/docs/Web/API/Worker">Web Workers</a>에서는 <code>self</code>만 동작합니다. Node.js에서는 아무것도 쓸 수 없고, 대신 <code>global</code>을 사용해야 합니다.<br> 비엄격 모드에서의 함수 내부에서 <code>this</code>를 사용할 수도 있겠지만, 모듈이나 엄격 모드의 함수에서는 {{jsxref("undefined")}}를 가리키는 문제가 있습니다.<code> Function('return this')()</code>를 사용하는 방법도 존재하지만, 브라우저의 {{glossary("CSP")}} 등으로 {{jsxref("eval", "eval()")}}을 사용할 수 없는 환경에선 {{jsxref("Function")}}도 이렇게 사용할 수 없습니다.</p> <p><code>globalThis</code> 속성은 환경에 무관하게 전역 <code>this</code> 값, 즉 전역 객체에 접근하는 표준 방법을 제공합니다. <code>window</code>, <code>self</code> 등 비슷한 속성과는 다르게 브라우저/비 브라우저 맥락 모두에서의 동작을 보장합니다. 따라서 코드를 구동하는 환경을 모르더라도 전역 객체에 일관적으로 접근할 수 있습니다.</p> <h3 id="HTML과_WindowProxy">HTML과 WindowProxy</h3> <p>많은 JavaScript 엔진에서 <code>globalThis</code>는 실제 전역 객체를 가리킬 것이나, 웹 브라우저는 {{htmlelement("iframe")}}과 교차 창 보안 문제로 인하여 전역 객체를 감싼 {{jsxref("Proxy")}}를 대신 가리키고, 실제 객체에는 직접 접근할 수 없습니다. 일반적인 사용에는 차이가 없다고 봐도 무방하지만, 알아두는 것이 중요합니다.</p> <h3 id="이름">이름</h3> <p><code>self</code>와 <code>global</code>처럼, 다른 인기있던 제안은 기존 코드와의 호환성 문제를 우려해 제외됐습니다. <a href="https://github.com/tc39/proposal-global/blob/master/NAMING.md">언어 제안서의 "NAMING" 문서</a>를 방문해 더 자세한 정보를 읽어보세요.</p> <h2 id="예제">예제</h2> <h3 id="환경별_전역_접근">환경별 전역 접근</h3> <p><code>globalThis</code> 없이 현재 환경의 전역 객체를 가져오는 방법 중 유일하게 믿을만한 방법은 <code>Function('return this')()</code> 입니다. 그러나 일부 환경에서는 <a href="/ko/docs/Web/HTTP/CSP">CSP</a> 위반에 걸리는 코드이므로, <a href="https://github.com/paulmillr/es6-shim">es6-shim</a>은 대신 다음 검사를 수행합니다.</p> <pre class="brush: js notranslate">var getGlobal = function () { if (typeof self !== 'undefined') { return self; } if (typeof window !== 'undefined') { return window; } if (typeof global !== 'undefined') { return global; } throw new Error('unable to locate global object'); }; var globals = getGlobal(); if (typeof globals.setTimeout !== 'function') { // no setTimeout in this environment! } </pre> <p><code>globalThis</code>를 사용할 수 있으면 환경별 전역 객체 검사는 더 이상 필요하지 않습니다.</p> <pre class="brush: js notranslate">if (typeof globalThis.setTimeout !== 'function') { // no setTimeout in this environment! }</pre> <h2 id="명세">명세</h2> <table class="standard-table"> <tbody> <tr> <th scope="col">Specification</th> </tr> <tr> <td>{{SpecName("ESDraft", "#sec-globalthis", "globalThis")}}</td> </tr> </tbody> </table> <h2 id="브라우저_호환성">브라우저 호환성</h2> <p>{{Compat("javascript.builtins.globalThis")}}</p> <h2 id="같이_보기">같이 보기</h2> <ul> <li>{{jsxref("Operators/this", "this")}}</li> </ul>