What is the purpose of calling
if (typeof window !== 'undefined')
I saw it in JSPM plugin-css, and some other libraries.
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.
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 .
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 .
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):
Math
and Date
Object
, Number
, Function
, String
, etc (objects representing built-in types), etc<script>
tags): 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
!)document
global-object is actually accessing the window.document
property.window
global object nor properties like document
or navigator
, but you do get other global objects like:console
process
exports
window
object either, so instead the global scope is an WindowOrWorkerGlobalScope
object which exposes objects via properties like:caches
indexedDB
origin
response
(for writing to the response stream)request
(for reading from the incoming HTTP request)Application
and Session
(for persisting data between requests)WScript
global object exposes functionality from the script host.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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With