What's the purpose of if (typeof window !== 'undefined')

Question

What is the purpose of calling

if (typeof window !== 'undefined')  

I saw it in JSPM plugin-css, and some other libraries.

Answer 1

It's an idiomatic check to see if the script is being run in a web-page inside a web-browser or not.

One might assume that JavaScript only runs in web-pages as that's what it was originally designed for, but this isn't true: JavaScript is a versatile language that can also be used for writing server-side code in Node.js or IIS' Active Server Pages (since 1996!), or inside "web workers", which are scripts for web-pages that run in the background.

In a webpage, there are several intrinsic objects, such as window, other environments (like Node.js) won't have window but might have other objects like console (well, console now exists in most browsers now, but it wasn't originally).

For example, in different contexts different objects are available in the script's global scope (this list is not exhaustive):

• In all JavaScript contexts a standard set of objects is available, such as:
  • Math and Date
  • Object, Number, Function, String, etc (objects representing built-in types), etc
• In a web-page's script (inside <script> tags):
  • The Window (interface) is exposed as the window global object, which is also the object that is the global scope (so declaring var foo in the global scope actually creates a property window.foo!)
  • So the document global-object is actually accessing the window.document property.
• In a Node.js server-side script:
  • As Node.js isn't a web-browser with a DOM there is no window global object nor properties like document or navigator, but you do get other global objects like:
  • console
  • process
  • exports
• In a web-page's Web Worker script:
  • In a Web Worker there isn't a window object either, so instead the global scope is an WindowOrWorkerGlobalScope object which exposes objects via properties like:
  • caches
  • indexedDB
  • origin
• In IIS Active Server Pages using JScript (instead of VBScript):
  • response (for writing to the response stream)
  • request (for reading from the incoming HTTP request)
  • Application and Session (for persisting data between requests)
• In Microsoft Windows' Shell Script Host
  • The WScript global object exposes functionality from the script host.

Answer 2

This can be used to detect whether code is running in a typical browser environment (e.g. an environment with a browser DOM) or in some other JS environment since the window object exists in a typical browser JS, but does not exist in something like node.js or even a webWorker in a browser.

If the window object does not exist, then

typeof window === 'undefined' 

so the code you asked about:

if (typeof window !== 'undefined')  

will execute the if block if the window object does exist as a top level variable.

In the specific code you linked, it is to keep from executing browser-targeted code that references DOM objects like document if the plugin happens to be used in a non-browser environment.