When is null or undefined used in JavaScript? [duplicate]

I find that some of these answers are vague and complicated, I find the best way to figure out these things for sure is to just open up the console and test it yourself.

var x;x == null            // truex == undefined       // truex === null           // falsex === undefined      // truevar y = null;y == null            // truey == undefined       // truey === null           // truey === undefined      // falsetypeof x             // 'undefined'typeof y             // 'object'var z = {abc: null};z.abc == null        // truez.abc == undefined   // truez.abc === null       // truez.abc === undefined  // falsez.xyz == null        // truez.xyz == undefined   // truez.xyz === null       // falsez.xyz === undefined  // truenull = 1;            // throws error: invalid left hand assignmentundefined = 1;       // works fine: this can cause some problems

So this is definitely one of the more subtle nuances of JavaScript. As you can see, you can override the value of undefined, making it somewhat unreliable compared to null. Using the == operator, you can reliably use null and undefined interchangeably as far as I can tell. However, because of the advantage that null cannot be redefined, I might would use it when using ==.

For example, variable != null will ALWAYS return false if variable is equal to either null or undefined, whereas variable != undefined will return false if variable is equal to either null or undefined UNLESS undefined is reassigned beforehand.

You can reliably use the === operator to differentiate between undefined and null, if you need to make sure that a value is actually undefined (rather than null).

According to the ECMAScript 5 spec:

• Both Null and Undefined are two of the six built in types.

4.3.9 undefined value

primitive value used when a variable has not been assigned a value

4.3.11 null value

primitive value that represents the intentional absence of any object value

The DOM methods getElementById(), nextSibling(), childNodes[n], parentNode() and so on return null (defined but having no value) when the call does not return a node object.

The property is defined, but the object it refers to does not exist.

This is one of the few times you may not want to test for equality-

if(x!==undefined) will be true for a null value

but if(x!= undefined) will be true (only) for values that are not either undefined or null.

You get undefined for the various scenarios:

You declare a variable with var but never set it.

var foo; alert(foo); //undefined.

You attempt to access a property on an object you've never set.

var foo = {};alert(foo.bar); //undefined

You attempt to access an argument that was never provided.

function myFunction (foo) {  alert(foo); //undefined.}

As cwolves pointed out in a comment on another answer, functions that don't return a value.

function myFunction () {}alert(myFunction());//undefined

A null usually has to be intentionally set on a variable or property (see comments for a case in which it can appear without having been set). In addition a null is of type object and undefined is of type undefined.

I should also note that null is valid in JSON but undefined is not:

JSON.parse(undefined); //syntax errorJSON.parse(null); //null