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

tl;dr

Use null for set a variable you know it is an Object.

Use undefined for set a variable whose type is mixed.

---

This is my usage of both 5 primitives and Object type, and that explain the difference between « use case » of undefined or null.

String

If you know a variable is only a string while all lifecycle, by convention, you could initialize it, to "":

("") ? true : false; // false
typeof ""; // "string";
("Hello World") ? true : false; // true
typeof "Hello World"; // "string"

Number

If you know a variable is only a number while all lifecycle, by convention, you could initialize it, to 0 (or NaN if 0 is an important value in your usage):

(0) ? true : false; // false
typeof 0; // "number";
(16) ? true : false; // true
typeof 16; // "number"

or

(NaN) ? true : false; // false
typeof NaN; // "number";
(16) ? true : false; // true
typeof 16; // "number"

Boolean

If you know a variable is only a boolean while all lifecycle, by convention, you could initialize it, to false:

(false) ? true : false; // false
typeof false; // "boolean";
(true) ? true : false; // true
typeof true; // "boolean"

Object

If you know a variable is only an Object while all lifecycle, by convention, you could initialize it, to null:

(null) ? true : false; // false
typeof null; // "object";
({}) ? true : false; // true
typeof {}; // "object"

Note: the smart usage off null is to be the falsy version of an Object because an Object is always true, and because typeof null return object. That means typeof myVarObject return consistent value for both Object and null type.

All

If you know a variable has a mixed type (any type while all lifecycle), by convention, you could initialize it, to undefined.

Answer 2

In javascript all variables are stored as key value pairs. Each variable is stored as variable_name : variable_value/reference.

undefined means a variable has been given a space in memory, but no value is assigned to it. As a best practice, you should not use this type as an assignment.

In that case how to denote when you want a variable to be without value at a later point in the code? You can use the type null ,which is also a type that is used to define the same thing, absence of a value, but it is not the same as undefined, as in this case you actually have the value in memory. That value is null

Both are similar but usage and meaning are different.

Answer 3

Basically, Undefined is a global variable that javascript create at the run time whether null means that no value has assigned to the variable (actually null is itself an object).

Let's take an example:

        var x;  //we declared a variable x, but no value has been assigned to it.
        document.write(x) //let's print the variable x

Undefined that's what you will get as output.

Now,

        x=5;
        y=null;
        z=x+y;

and you will get 5 as output. That's the main difference between the Undefined and null

Answer 4

As typeof returns undefined, undefined is a type where as null is an initializer indicates the variable points to no object(virtually everything in Javascript is an object).

Answer 5

For the undefined type, there is one and only one value: undefined.

For the null type, there is one and only one value: null.

So for both of them, the label is both its type and its value.

The difference between them. For example:

• null is an empty value
• undefined is a missing value

Or:

• undefined hasn't had a value yet
• null had a value and doesn't anymore

Actually, null is a special keyword, not an identifier, and thus you cannot treat it as a variable to assign to.

However, undefined is an identifier. In both non-strict mode and strict mode, however, you can create a local variable of the name undefined. But this is one terrible idea!

function foo() {
    undefined = 2; // bad idea!
}

foo();

function foo() {
    "use strict";
    undefined = 2; // TypeError!
}

foo();

Answer 6

Check this out. The output is worth thousand words.

var b1 = document.getElementById("b1");

checkif("1, no argument"                        );
checkif("2, undefined explicitly",     undefined);
checkif("3, null explicitly",               null);
checkif("4, the 0",                            0);
checkif("5, empty string",                    '');
checkif("6, string",                    "string");
checkif("7, number",                      123456);

function checkif (a1, a2) {
	print("\ncheckif(), " + a1 + ":");
	if (a2 == undefined) {
		print("==undefined:    YES");
	} else {
		print("==undefined:    NO");
	}
	if (a2 === undefined) {
		print("===undefined:   YES");
	} else {
		print("===undefined:   NO");
	}
	if (a2 == null) {
		print("==null:         YES");
	} else {
		print("==null:         NO");
	}
	if (a2 === null) {
		print("===null:        YES");
	} else {
		print("===null:        NO");
	}
	if (a2 == '') {
		print("=='':           YES");
	} else {
		print("=='':           NO");
	}
	if (a2 === '') {
		print("==='':          YES");
	} else {
		print("==='':          NO");
	}
	if (isNaN(a2)) {
		print("isNaN():        YES");
	} else {
		print("isNaN():        NO");
	}
	if (a2) {
		print("if-?:           YES");
	} else {
		print("if-?:           NO");
	}
		print("typeof():       " + typeof(a2));
}

function print(v) {
	b1.innerHTML += v + "\n";
}

<!DOCTYPE html>
<html>
<body>
<pre id="b1"></pre>
</body>
</html>

See also:

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators

Cheers!