Null vs. Undefined: What's the Difference?

Null vs. Undefined: What's the Difference?

Learn the differences and similarities between null and undefined in JavaScript

At first glance, null and undefined may seem the same, but they are far from it. This article will explore the differences and similarities between null and undefined in JavaScript.

What is null?

There are two features of null you should understand:

  • null is an empty or non-existent value.
  • null must be assigned.

Here’s an example. We assign the value of null to a:

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

What is undefined?

Undefined most typically means a variable has been declared, but not defined. For example:

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

You can also explicitly set a variable to equal undefined:

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

Finally, when looking up non-existent properties in an object, you will receive undefined:

var d = {};console.log(d.fake);
// undefined

Similarities between null and undefined

In JavaScript there are only six falsy values. Both null and undefined are two of the six falsy values. Here’s a full list:

  • false
  • 0 (zero)
  • “” (empty string)
  • null
  • undefined
  • NaN (Not A Number)

Any other value in JavaScript is considered truthy.

Also in JavaScript, there are six primitive values. Both null and undefined are primitive values. Here is a full list:

All other values in JavaScript are objects (objects, functions, arrays, etc.).

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

let a = null;
let b;console.log(typeof a);
// objectconsole.log(typeof b);
// undefined

This has occurred since the beginning of JavaScript and is generally regarded as a mistake in the original JavaScript implementation.

null !== undefined

As you can see so far, null and undefined are different, but share some similarities. Thus, it makes sense that null does not strictly equal undefined.

null !== undefined 

But, and this may surprise you, null loosely equals undefined.

null == undefined

In JavaScript, a double equals tests for loose equality and preforms type coercion. This means we compare two values after converting them to a common type.

Practical Differences

All of this is great, but what about a practical difference between null and undefined?

Consider the following code snippet:

let logHi = (str = 'hi') => {
  console.log(str);
}

The code above creates a function named logHi. This function requires one parameter and sets the default of that parameter to hi if it isn’t supplied. Here’s what that looks like:

logHi();
// hi

We can also supply a parameter to overwrite this default:

logHi('bye');
// bye

With default parameters, undefined will use the default while null does not.

logHi(undefined);
// hilogHi(null);
// null

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 !== undefined but null == undefined.

javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

The essential JavaScript concepts that you should understand

The essential JavaScript concepts that you should understand - For successful developing and to pass a work interview

Data Types In JavaScript

JavaScript data types are kept easy. While JavaScript data types are mostly similar to other programming languages; some of its data types can be unique. Here, we’ll outline the data types of JavaScript.

JavaScript Memory Management System

The main goal of this article is help to readers to understand that how memory management system performs in JavaScript. I will use a shorthand such as GC which means Garbage Collection. When the browsers use Javascript, they need any memory location to store objects, functions, and all other things. Let’s deep in dive that how things going to work in GC.

Create a Line Through Effect with JavaScript

In this post we are going to create an amazing line through effect, with help of CSS and lots of JavaScript. So, head over to your terminal and create a folder LineThroughEffect. Create three files -index.html, main.js and styles.css inside it.

Grokking Call(), Apply() and Bind() Methods in JavaScript

In this article, we will have a look at the call(), apply() and bind() methods of JavaScript. Basically these 3 methods are used to control the invocation of the function.