What is the difference between null and undefined in JavaScript?

Question

I want to know what the difference is between null and undefined in JavaScript.

Answer 1

Per Ryan Morr's thorough article on this subject...

"Generally, if you need to assign a non-value to a variable or property, pass it to a function, or return it from a function, null is almost always the best option. To put it simply, JavaScript uses undefined and programmers should use null."

See Exploring the Eternal Abyss of Null and Undefined

Answer 2

OK, we may get confused when we hear about null and undefined, but let's start it simple, they both are falsy and similar in many ways, but weird part of JavaScript, make them a couple of significant differences, for example, typeof null is 'object' while typeof undefined is 'undefined'.

typeof null; //"object"
typeof undefined; //"undefined";

But if you check them with == as below, you see they are both falsy:

null==undefined; //true

Also you can assign null to an object property or to a primitive, while undefined can simply be achieved by not assigning to anything.

I create a quick image to show the differences for you at a glance.

Answer 3

Quote from "Eloquent Javascript" 3rd edition by Marijn Haverbeke:

The difference in meaning between undefined and null is an accident of Javascript's design, and it doesn't matter most of the time. In cases where you actually have to concern yourself with these values, I recommend treating them as mostly interchangeable

Honestly, at first, I am a bit skeptical about this advice. However, in my own interpretation, it is a lazy (vs eager) way to deal with their differences. Maybe, we don't have to deal with the differences at all. If we have to, we can delay our concern (util we have to) and not hyperactively/defensively worry about it every step of the way as those values (null and undefined) flow through our code.

PS: This is not a direct answer to your question. This is just a related opinion.

Answer 4

I want to add a very subtle difference between null and undefined which is good to know when you are trying to learn Vanilla JavaScript(JS) from ground up:

• null is a reserved keyword in JS while undefined is a variable on the global object of the run-time environment you're in.

While writing code, this difference is not identifiable as both null and undefined are always used in RHS of a JavaScript statement. But when you use them in LHS of an expression then you can observe this difference easily. So JS interpreter interprets the below code as error:

var null = 'foo'

It gives below error:

Uncaught SyntaxError: Unexpected token null

While below code runs successfully although I won't recommend doing so in real life:

var undefined = 'bar'

This works because undefined is a variable on the global object (browser window object in case of client-side JS)

Answer 5

In addition to a different meaning there are other differences:

1. Object destructuring works differently for these two values:

   const { a = "default" } = { a: undefined }; // a is "default"
   const { b = "default" } = { b: null };      // b is null
   

2. JSON.stringify() keeps null but omits undefined

   const json = JSON.stringify({ undefinedValue: undefined, nullValue: null });
   console.log(json); // prints {"nullValue":null}
   

3. typeof operator

   console.log(typeof undefined); // "undefined"
   console.log(typeof null);      // "object" instead of "null"
   

Answer 6

I'll explain undefined, null and Uncaught ReferenceError:

1 - Uncaught ReferenceError : variable has not been declared in your script, there is no reference to this varaible
2 - undefined: Variable declared but does not initialised
3 - null : Variable declared and is an empty value