Null and undefined are two data types in javascript that are a bit special and different from each other. Most programming languages only have null, but in javascript there's also undefined which is similar to null, but not exactly the same. They both are a bit similar to the boolean false. All three are falsy values and what they're many times used for is representing the absence of a value.
We'll start with understanding what undefined is.
Undefined as in not defined
var x; // undefined
if (x === undefined) { // true
console.log('x is undefined');
}
Here one could think in the terms of defined and not defined. If a variable is declared as "var x" for instance without given any value it's not defined (undefined). It doesn't contain anything and gets the data type undefined. It's first when the variable is given a value it becomes defined and is changed to another data type like for example string or number. Any variable declared like this without any value automatically becomes undefined in javascript.
It's possible to set a variables value to undefined explicitly but it's not recommended, instead that's what null is usually used for.
Null and the difference to undefined
var x = null;
if (x === null) { // true
console.log('x is null');
}
Null might be familiar to those who already know a couple other programming languages. In some it's called "nil" instead, but they're basically the same thing. Null is very much like undefined since they're both falsy values but have one big difference. In ECMA 5.1 null is described as a primitive value that represents the intentional absence of a value. Meaning the difference is null has to be assigned explicitly with a statement like "var b = null", and should be used when you want to set some already existing value to "nothing". Undefined is for when you haven't set a value yet.
An example for assigning null to a variable could be when a variable should be "emptied", or for removing an event handler. Perhaps for freeing some memory.
var x;
var y = null;
x == y; // true, undefined is equal to null
x === y; // false, undefined is not identical to null
Boolean(x); // false
Boolean(y); // false, both undefined and null are falsy values
If you compare null to undefined with the equals operator (==) the result will be true since they're both falsy values. But if compared with the identical operator (===) it results in false since they aren't of the same data type.
Summary or tl;dr
Even if in javascript null and undefined are very similar to each other you could summarize it with them having different meanings. Null means a variables value is not currently set or has been removed. Undefined means the variable hasn't been defined yet and not gotten any value just yet, it has just been declared.
Try it yourself
- Declare a variable as undefined and one as null.
- Compare them to each other with the equals and identical operators.