NULL VS UNDEFINED IN JS

NULL

What is null?

null is an assignment value. It can be assigned to a variable as a representation of no value:

There are two features of null you should understand:

• nullis an empty or non-existent value.
• nullmust be assigned.

In the example below, we are assigning value to null.

var x = null
console.log(x);
// null 

• null expresses a lack of identification, indicating that variable points to no object
• When you assign null to a variable, you are declaring that this value is explicitly empty.

UNDEFINED

What is undefined?

Undefined usually means a variable has been declared, but not defined.

• Another common scenario, where you will encounter an undefined is while trying to access a property of an object that doesn’t exist.

var z = {};
console.log(z.value);
// undefined

• To summarize,
  • An object is declared but not defined/initialized.
  • Accessing an object property or an array index that does not exist.
  • Calling a function, without it’s required function parameters.

What is similar?

• Both nulland undefinedare primitive values in JavaScript.
• Another thing to note is that when comparing null and undefined they are equal.

null == undefined
// true

• This is because both of them are considered falsy values in JavaScript.

Differences null vs. undefined

Arithmetic Operations

Another interesting difference to note is when arithmetic operations are performed with null vs. undefined.

Arithmetic operations with a null value will result in integer value while any arithmetic operation with undefined will result in the value of the variable being changed to NaN.

var x = 5 + null;
console.log(x);
// 5

var y = 5 + undefined;
console.log(y);
// NaN 

Equality

Typeof Null and Undefined

• Interestingly enough, when using typeof to test null, it returns an object:

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

Comparison Using Abstract and Strict Equality

• Since these are different data types, if we compare them with strict equality ===, we get false.
• But if we compare them with abstract equality ==, we get true.

console.log(null === undefined)    //false
console.log(null == undefined)     //true
console.log(null !== undefined)    //true

Summary

• null is an assigned value. It means nothing.
• undefined typically means a variable has been declared but not defined yet.
• null and undefined are falsy values.
• null and undefined are both primitives. However, an error shows that typeof null = object.
• null!== undefinedbut null == undefined.

Comments

[Tobias Nickel]

In my opinion you should always use undefined. because it is the natural value.
When a prop is not there, it is undefined. When ever you see a null value, that means a developer put it in place.

Also most often I don't care. because I write if ( myValue ) { ... }. It will work in both cases. just need extra condition if it could be an empty string or 0. For going into the positive case.

You wrote a nice documentation around the topic. What is your opinion?

[Jaynil Gaglani]

Yeah, we shouldn't put null deliberately. Undefined is normally easy to handle as well in conditionals.