Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

What is the purpose of calling

if (typeof window !== 'undefined')  

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

like image 331
YiFeng Avatar asked Sep 16 '15 02:09

YiFeng


People also ask

What does undefined window mean?

To solve the "ReferenceError: window is not defined" error, make sure to only use the window global variable on the browser. The variable represents a window containing a DOM document and can't be used on the server side (e.g. in Node. js). If you need to define global variables in Node.

What is typeof undefined?

A variable that has not been assigned a value is of type undefined . A method or statement also returns undefined if the variable that is being evaluated does not have an assigned value. A function returns undefined if a value was not returned .

What will javascript typeof function return in the following case typeof undefined?

Even with undeclared identifiers, typeof will return 'undefined' . Using typeof could never generate an error. However, with the addition of block-scoped let and const , using typeof on let and const variables (or using typeof on a class ) in a block before they are declared will throw a ReferenceError .


2 Answers

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.
like image 157
Dai Avatar answered Oct 23 '22 09:10

Dai


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.

like image 40
jfriend00 Avatar answered Oct 23 '22 10:10

jfriend00