Question about javascript function declaration

Question

What does it mean when a javascript function is declared in the following way:

JSON.stringify = JSON.stringify || function (obj)
{
  //stuff
};

How is the above different from just declaring it like below?

function stringify(obj)
{
  //stuff
}

Answer 1

• function stringify will declare the function in the global scope (if you're not already inside another scope, such as another function or a hash) or the scope you're currently in.

  Example:

  function a() { ... } /* global scope */
  function a() { function b() { ... } /* scope of the a() function */ }
  

• JSON.stringify = function will define the function on the JSON object.

  Example:

  JSON = {}
  JSON.stringify = function() { ... } /* you can now call stringify() on the JSON object */
  

• JSON.stringify || function will only define it if it was not previously defined.

  Example:

  JSON = {}
  JSON.stringify = function() { ... }
  JSON.stringify = JSON.stringify || function() { ... } /* will not be replaced */
  

Answer 2

The first declaration doesn't override the function if it already exists, the second declaration does !

Answer 3

The above code is checking if JSON.stringify function is already defined and if it is then just use it if not use the new definition.

Answer 4

|| is a logical operator it always return the first thing that's true. If JSON.stringify is undefined (or some other falsy value) the JSON.stringify contains the function that is written after the ||.

In other words it checks if JSON.stringify already exists and if not it assigns the second function to it.

To answer your question in your first example your function is callable over JSON.stringify() in the second example over stringify()

Answer 5

The first code-block is equivalent to this:

if ( !JSON.stringify ) {
    JSON.stringify = function(obj) {
        // stuff
    };
}

Explanation: If the JSON.stringify property coerces to false, set this property and assign the function object to it.

The background is this: Some browsers implement the JSON.stringify function, others don't (older versions of IE for instance). What you want is to implement this function manually in those browsers. Therefore, you test whether or not JSON.stringify returns a function object. It it does, you're fine; if not, you set this property manually.

---

Another example:

function handler(e) {
    e = e || window.event;

    // handle event
}

Modern browsers pass the event object into event handlers; but older versions of IE don't do that. Therefore, you need to test whether or not the passed-in argument is an object (is it defined?), and if not (IE detected!), use the window.event value (that's where IE stores the corresponding event).

This line of code does that:

e = e || window.event;

It is equivalent to this:

if ( e ) {
    e = e; // no-op
} else {
    e = window.event;
}

Answer 6

If function stringify is has been already defined, it will not be defined more than one time.

Answer 7

The first way will declare the function if it already exists.

JSON.stringify = JSON.stringify || function (obj){
}

This means that JSON.stringify exists, it will use that, otherwise it will make a new function.

Answer 8

It utilizes short-circuit evaluation. JSON.stringify isn't supported by all browsers, and so it's replaced it with a backup function in the event that JSON.stringify is not defined.

Additionally, the syntax may be a little bit confusing. It's checking for JSON.stringify first, and if it doesn't exist then creating function(obj) { ... } (that is, the part in { ... } has nothing to do with the preceding JSON.stringify).