JavaScript Null vs Undefined

So Lets Get Started.

……………………

Introduction

At first glance, Null and Undefined may seem the same, but they are far from it. Null and Undefined are both data types in JavaScript. Undefined is a variable that has been declared but not assigned a value. Where Null is an assignment value. So, you can assign the value Null to any variable which basically means its blank.

What Is Null ?

Null is a primitive value that represents the intentional absence of any object value. Finally, it can be said, A null means absence of a value. So here is the example for more clarification.

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

How to check for Null

The good way to check for Null is by using the strict equality operator :

const missingObject = null;
const existingObject = { message: 'Hello!' };

missingObject === null; // => true
existingObject === null; // => false

missingObject === null evaluates to true because missingObject variable contains a null value.

If the variable contains a non-null value, like an object, the expression existingObject === null evaluates to false.

What is Undefined ?

Undefined is also a primitive value in JavaScript. A variable or an object has an undefined value when no value is assigned before using it. So you can say that undefined means lack of value or unknown value. So, Undefined most typically means a variable has been declared, but not defined. Here is the example for more clarification.

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

How to check for Undefined

The good way to check for Undefined is === operator is used instead of == when checking for undefined variables/objects. So, how to check if a variable is undefined in JavaScript :

let var1;if (var1 === undefined) {console.log("var1 is undefined")} else {console.log("var1 holds some value")}
// var1 is undefined

Similarities between Null and Undefined

Null and Undefined are both data types in JavaScript. In JavaScript there are only six falsy values. Both Null and Undefined are two of the six falsy values.

Here is six falsy value list :

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

Also in JavaScript, there are six primitive values. Both Null and Undefined are primitive values.

Here is six primitive value list :

  • Boolean
  • Null
  • Undefined
  • Number
  • String
  • Symbol

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

Deferences between Null and Undefined

The main difference between Null and Undefined is that Null represents a missing object, while Undefined represents an uninitialized state.

Deferences :

The strict equality operator === distinguishes Null from Undefined :

null === undefined; // false

While loose equality operator == considers Null and Undefined equal :

null == undefined; // true

……………………………………………………………………………………….

Null and undefined are both primitives and falsy values. However, null is also an object.

var a;
console.log(typeof(a));
// undefined

var b = null;
console.log(typeof(b));
// object

Practical Differences

what about a practical difference between null and undefined ? So, here is the example :

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

Summery

  • 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.

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Node JS vs Express.js vs Koa.js

Ionic: Exit app on android hardware back button

ReactJS 101 — Introduction to ReactJS

Sass️: A quick introduction

Useful React Tips and Tricks for Beginners

Your packages import can greatly optimize your build

Up your DOM manipulation game through these Exercises-Part 01 📚

What is Knockout.js?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abrar Abir

Abrar Abir

More from Medium

Steering Clear of Mutations: Array Edition(ft. The Simpsons)

CS371p Spring 2022: Sarunas Budreckis — Entry #7

React JS vs Angular- Know ins and Outs

Objects from Module 3