Value Equality In JavaScript

Value equality can be confusing when you're first learning JavaScript. In fact, it can often continue to surprise experienced developers well into their career.

Don't worry! We'll explore this concept step by step, and there is a logic to it that will begin to emerge as we go.

We will cover:

Types of equality
Comparing equality
Loose vs strict equality
Comparing truthy and falsy values

Before tackling the concept of equality, it's important to have a foundational understanding of data types and data type conversion.

Types of equality

In JavaScript there are broadly two kinds of equality comparison:

Loose equality (double equals ==)
Strict equality (triple equals ===)

Loose equality == allows type coercion, while strict equality === does not allow type coercion.

Comparing equality

Throughout this lesson we'll explore the concept of equality with examples that compare equality between two values.

Let's begin by declaring two variables:

const a = 'check';
const b = 'check';

Above we have two variables assigned to the identical string 'check'. We can now compare these values with the loose equals == operator:

const a = 'check';
const b = 'check';

console.log(a == b); // true

If we run the code we find that loosely comparing a and b returns true. Now let's do the same with strict equals ===:

const a = 'check';
const b = 'check';

console.log(a == b); // true
console.log(a === b); // true

As you might expect, the outcome is true in both cases. This is because each instance of the string 'check' is identical in both value and type.

But what if we want to compare a number and its equivalent numeric string?

const a = 8;
const b = '8';

console.log(a == b); // true
console.log(a === b); // false

Now we're starting to see a difference in behaviour between the two operators.

Using the loose equal == operator, JavaScript automatically coerces the numeric string '8' to a number and compares the values with the same type. This means that we're comparing the number 8 with the number 8, and the result is therefore true.

However the strict equal === operator will compare both the value and the type, without any implicit coercion.

In this case the number 8 and the string '8' do not share the same type, so they are not strictly equal. The expression therefore returns false.

Loose or strict?

These differences in behaviour naturally beg the question, when should you use loose equals == and when should you use strict equals ===?

While it's perfectly fine to use double equals ==, most people recommend that beginners stick to using triple equals === while you're getting comfortable with the language.

Using strict equals === by default can help to lessen the confusion around the various implicit coercion that JavaScript performs, and can also help to reduce bugs. Once you develop more experience you can start to introduce the == operator.

Some developers recommend only using strict equality comparisons. However, loose comparison can be a powerful tool if you know how to use it.

Comparing truthy and falsy values

A knowledge of truthy and falsy values in JavaScript is essential when it comes to equality comparison.

Let's look at another example comparing the number 0 with an empty string:

const a = 0;
const b = '';

console.log(a == b); // true

In this case the values are not the same. However using loose comparison, JavaScript coerces each value to its Boolean equivalent.

Numeric 0 and an empty string '' are both falsy, so they coerce to false. The comparison then becomes false == false, which is true.

This is where equality comparison can begin to confuse people, because the result is not immediately obvious. This is especially true (pun intended) if you don't have a strong grasp of truthy and falsy values in JavaScript.

If we compare using strict equals the result is false:

const a = 0;
const b = '';

console.log(a == b); // true
console.log(a === b); // false

Again, this is because JavaScript is comparing both the values and the types.

This is a similar story for the other falsy values, for example the Boolean false:

const a = false;
const b = '';

console.log(a == b); // true
console.log(a === b); // false

If we compare null and undefined we see the following:

const a = null;
const b = undefined;

console.log(a == b); // true
console.log(a === b); // false

null and undefined are both falsy, so when loosely compared they are coerced to false resulting in true.

However with a strict equality comparison, while they are both falsy, they are not considered equal values, so the result is false.

Summary

In this lesson you've learned the foundations of equality comparison in JavaScript, including loose and strict comparison.

You also got to see some of the nuances that occur when comparing truthy and falsy values.