CODEWITHSUNDEEP
javascript
Joby Joseph
Joby Joseph

Reputation: 2277

Reason behind placing undefined as a property to window object?

In JavaScript, there is a property undefined for window object. What is the use or reason for that. What is the problem in placing undefined independent as null. We cannot find window.null.

Upvotes: 1

Views: 144

Answers (1)

Nithin Thampi
Nithin Thampi

Reputation: 3689

One application I could think of (Might not be a very practical scenario)..

undefined is **NOT a reserved keyword in javascript. We can declare variables with name undefined)

null is a reserved keyword.

var undefined = "test"; //Valid 
var null = "test"; //Invalid

Things can get really weird if you have a function like below that declares a variable with name undefined 

function checkUndefined() {
  var undefined = "test";
  var a; // Has a value of  undefined
  var b = "test"; // Has a value of  "test"
  
  if (a === undefined) { // Not checking for
    //value undefined but comparing with variable undefined which 
    //has  value "test"
    console.log("a is undefined")
  }

  
  if (b === undefined) { // Not checking for
    //value undefined but comparing with variable undefined which       //has value "test"
    console.log("b is undefined")
  }

}


checkUndefined();

In the above code snippet, the equality checks a === undefined and b === undefined are not really checking for value undefined but for variable undefined (which I have set to string "test")

To avoid this we could use window.undefined. As per docs..

The global undefined property represents the primitive value undefined. It is one of JavaScript's primitive types.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined

And the property attributes of undefined says Writable: no, we cannot overwrite it using window.undefined = "test"

window.undefined = "test";
console.log(window.undefined);

Having known that, we could rewrite the original function checkUndefined as 

function checkUndefined(){
    var undefined = "test";
    window.undefined = "test"; // Will not overwrite the property

    var a; //Has a value of  undefined
    if(a === window.undefined){ //Checking for window.undefined           //which is always the value undefined
        console.log("a is undefined")
    }

    var b = "test"; //Has a value of  "test"
    if(b === window.undefined){// Checking for window.undefined           //which is always the value undefined
        console.log("b is undefined")
    }

}


checkUndefined();

Same applies to NaN too. It's also NOT a reserved keyword.

As per MDN docs

NaN compares unequal (via ==, !=, ===, and !==) to any other value -- including to another NaN value

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN

console.log(NaN === NaN)

The below function declares NaN as a variable which masks NaN as a value in equality operators

function checkNaN(){
  var NaN = "test";
  console.log(NaN === NaN); //Actually Comparing  "test" === "test"
}

checkNaN()

To avoid this we could use window.NaN. But we usually check NaN using global Number.isNaN() or isNaN() to most clearly determine whether a value is NaN.

Upvotes: 1

Related Questions