JavaScript Tutorial: Null vs. Undefined

JavaScript is an interesting language with lots of quirks. One such confusing aspect in JavaScript is the differences and similarities between Null and Undefined. Most programmers are aware of null. It is common in other programming languages. But what on earth is undefined in JavaScript?

null in JavaScript

null means there is no value. Just like in other programming languages, you can assign a value of _null _to a variable, which indicates that it has no value. In the example below, we are assigning a to null.

let value = null;
console.log(value);
// null 

undefined in JavaScript

Alright, we get what _null _does. What does _undefined _really mean?

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

Let’s tweak our previous example a little bit to understand undefined.

let value;
console.log(value);
// undefined

In this case value has been declared but it is not assigned a value. This results in _undefined. _Just like null, you can also set a variable to a value of undefined.

let value = undefined;
console.log(value);
// undefined

Another common scenario, where you will encounter an _undefined _is while trying to access a property of an object that doesn’t exist. Let’s see an example below illustrating that.

let myObject = {};
console.log(myObject.value);
// undefined

To summarize, here are some of the scenarios where you will see _undefined _being returned.

• 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 _null _and undefined are primitive values in JavaScript. Some other primitive values include Boolean, String and Number. Another thing to note is that when comparing null and _undefined _they are equal. This is because both of them are considered falsy values in JavaScript.

null == undefined

Differences null vs. undefined

Equality

I have seen many codebases with a lot of null checking against properties that are uninitialized. This is wrong and will result in unexpected behavior. Uninitialized properties in other languages get a default value of null, but in JavaScript they are undefined. What makes it even more misleading, is that if you did a loose equality check of (x == null), even if x is undefined, it will return true. This is because of the type coercion that happens in JavaScript.

null is not strictly equal to undefined. But null is loosely equal to undefined.

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

Notice here that undefined is of type undefined whereas _null _is an object.

null !== undefined
null == undefined

Isn’t JavaScript a funny language with all these quirks? You can learn more about Common Gotchas in JavaScript from our previous article.

Arithmetic Operations

Another interesting difference to note is when arithmetic operations are performed with null vs. undefined. Arithmetic operations with n_ull _value will result in integer value while any arithmetic operation with undefined will result in value of variable being changed to NaN.

let a = 5 + null;
console.log(a);
// 5

let b = 5 + undefined;
console.log(b);
// NaN 

Conclusion

JavaScript is easy to pick up, but hard to master. It takes a while to learn the quirkiness and nuances of the language before you master it.

#javascript #web-development