Are You A JavaScript Coder? How Well Do You Know JavaScript ===

In this article, I’m going to explore the JavaScript === operator, also known as the strict equality.

Whether you’re brand new to coding or a JavaScript pro, how well do you really know JavaScript ===?

Read on to find out! I’m going to cover what the JavaScript === operator is, how to use it, common pitfalls to watch out for, and of course, how it differs from its cousin, the loose equality. 

As the most popular programming language for more than a decade, JavaScript continues to dominate the collective mindshare in web development.

And when you factor in that the Bureau of Labor and Statistics reports an average salary of over $85K for web developers, knowing the ins and outs of JavaScript === can be highly lucrative!

So, if you’re ready, let’s dive in and learn about the JavaScript === operator!

What Is JavaScript Triple Equals?

Okay, I’m going to assume you already know some basic JavaScript. If that sounds good, let’s start with the fundamentals of the JavaScript ===. 

The JavaScript === operator is known as the strict equality operator, and it’s a fundamental tool for comparing values in your JavaScript projects.

Now, unlike the more commonly known double equals ==, which we’ll call the loose equality operator, triple equals does not perform type coercion. 

I hope I didn’t lose you there! 

Quick sidebar, but type coercion is the automatic or implicit conversion of values from one data type to another. Pick up any good JS book, and you should see this mentioned fairly early.

Think about turning a string into a number when performing operations between mixed types.

So, as I said, JavaScript === does not do this, which means it compares both the value and the type.

If both of these are the same, it returns a true value, otherwise, we get a false result.

This is ideal for getting a more precise and reliable equality check than you would with loose equality.

So the main takeaway is that when we use ===, JavaScript compares two values to see if they are the same type and value, with the resulting value being a boolean type.

If you take any good JavaScript course, you’ll see the strict equality being used all of the time.

For example, if I compare a number and a string, === will see these as unequal, even if the string contains a numerical value that matches the number. 

Understanding this behavior is crucial for writing clear and error-free code, as it helps you and me avoid the subtle bugs that can occur when JavaScript automatically converts types.

This is a not-so-subtle hint that this is more common when you use JavaScript double equals.

It’s also really helpful to know these types of details if you have your eyes set on earning professional JavaScript certifications.

In general, the strict equality operator is an essential part of writing JavaScript code that is robust and predictable. 

Using ===, we can ensure that comparisons are thorough and accurate, making our code more reliable and maintainable in the long run. Win!

How To Use JavaScript ===

Now we know what the strict equality operator is, let’s look at how we can use === in JavaScript for precise comparisons.

Be sure to add these tips to your personal JavaScript cheat sheet!

To get the ball rolling, I’ll begin with some simple use cases where I use the basic === syntax to create comparison operators for two variables.

So, let’s fire up our JavaScript IDEs and get coding!

Notice that I’ve created a number and string variable with the same value to show how the strict equality handles these scenarios.

The goal is simple: if type and value are identical, the operator returns true, else, it returns false because we have operands of different types or values. 

/*
Hackr.io: JavaScript ===
Basic Usage
*/
let num = 5;
let str = "5";

console.log(num === 5); // true, same value and type
console.log(str === "5"); // true, same value and type
console.log(num === str); // false, different types

You should see that when you compare different data types, === will always return a boolean result of false.

Now, let’s dive into some conditional statements where type precision is important. 

Did you expect to see each of those results? In particular, did you expect to see that result when comparing null and undefined?

If you’re coming from another language, you might assume that a null and undefined value are essentially the same, but as you can see, this is not strictly true. 

This is good to know if you’re used to equating both to something like a NaN value.

/*
Hackr.io: JavaScript ===
Comparisons
*/
console.log('5' === 5); // false, string and number
console.log(true === 1); // false, boolean and number
console.log(null === undefined); // false, null and undefined

Another great use case for JavaScript === is when working with arrays and objects.

These are super common data types in JavaScript, so let’s see how === compares them.

Hint: this is all about reference equality, not the content of the objects or arrays.

/*
Hackr.io: JavaScript ===
Arrays
*/
let array1 = [1, 2, 3];
let array2 = [1, 2, 3];
let array3 = array1;

console.log(array1 === array2); // false, different references
console.log(array1 === array3); // true, same reference

In the example above, you can see that while array1 and array2 have equal contents, they are not the same array. This is because they occupy different memory references.

As a result, we see a false value. On the other hand, when we create array3, we assign it to be equal to array1, which is why JavaScript === returns true for that comparison.

As you’ve probably guessed, these same principles apply to objects, as shown below.

/*
Hackr.io: JavaScript ===
Objects
*/
let obj1 = { name: "Alice" };
let obj2 = { name: "Alice" };
let obj3 = obj1;

console.log(obj1 === obj2); // false, different objects
console.log(obj1 === obj3); // true, same object

To round things off, let’s explore how to use strict equality with conditional statements.

Again, remember that we’re checking that both the value and the type match. 

Because of this, when we compare our string variable to a number, JavaScript === returns false, and we enter the else clause.

So even though the value of age is numerically equal to 18, the types are different (string vs. number), which is why the condition evaluates to false.

We can also extend this idea to include logical operators for more complex conditional statements when we need to. 

/*
Hackr.io: JavaScript ===
Conditional Statement
*/
let age = "18";

if (age === 18) {
  console.log("Access granted.");
} else {
  console.log("Access denied."); // This will be executed
}

Awesome! We’ve now learned how to use JavaScript === in some of the most common scenarios, nice work!

The key point you need to remember is that JavaScript === is about more than comparing values; it's about ensuring the integrity of the types being compared.

At this stage, let’s consider why we would use === instead of == in our JavaScript code and vice versa.

Why Do We Use === Instead Of ==?

Understanding how to use JavaScript’s strict equality (===) and loose equality (==) operators is fundamental for writing precise, bug-free code. 

It’s also a common JavaScript interview question!

That said, you might be wondering, why does JavaScript have a strict and loose equality? What is the main difference between them? And why would you use one over the other?

Great question! Well, let’s start by looking at their most notable difference, which, as I’ve already touched on, is how they handle type coercion:

• Strict equality (===) checks both the value and the type. If either type differs, it returns false. It does not perform type conversion.
• Loose equality (==) compares values, but before making the comparison, it converts the operands to the same type via type coercion.

Okay, that sounds fine, but I think it’s always helpful to look at a simple code example to illustrate the difference.

/*
Hackr.io: JavaScript ===
Strict Equality vs Loose Equality
*/
let num = 5;
let str = "5";

console.log(num === str); // false, as types are different (number vs string)
console.log(num == str);  // true, as value '5' is same after type conversion

In this example, the triple equals operator returns false because one variable is a number and the other is a string. 

In contrast, the double equals operator returns true because the string '5' is converted to a number before the comparison.

But still, why would you use === instead of ==?

Well, I’d recommend using JavaScript === if you need more predictable and accurate comparisons, as it avoids the quirks of JavaScript's type coercion.

Trust me, this can introduce some really hard-to-find bugs!

That said, there are occasions when it makes sense to use == instead of ===.

A great example is when you are fetching data, but numeric values are inconsistently formatted as strings or numbers. 

This is an ideal time to use loose equality and type coercion rather than a strict number comparison. 

Similarly, you might want to handle situations when a variable is either null or undefined without distinguishing between the two. 

The loose equality is ideal for this, as you wouldn’t want a comparison of different types.

Common Pitfalls With JavaScript ===

If you’re new to JavaScript, I think it really helps to have a working knowledge of common pitfalls you might encounter when using strict equality.

Trust me, these can cause some serious confusion, especially if you’re used to using the loose equality!

Pitfall #1: Comparing Different Types

I know this might sound silly, but it’s a really common mistake to compare values of different types while expecting a true result.

But, as we know, this will always return false because JavaScript === also checks type equality.

/*
Hackr.io: JavaScript === Common Pitfalls
Comparing Different Types
*/
let num = 0;
let str = "0";

// Pitfall: Expecting both to be equivalent
console.log(num === str); // false, due to different types

Pitfall #2: Comparing Objects and Arrays

Another common misunderstanding when using JavaScript triple equals is expecting === to compare the contents of objects or arrays, rather than their references.

Remember, it doesn’t matter if the arrays have identical contents, if you use ===, it will be checking for identical memory references.

This is the key difference between using === rather than == with arrays and objects. 

/*
Hackr.io: JavaScript === Common Pitfalls
Comparing Arrays
*/
let array1 = [1, 2, 3];
let array2 = [1, 2, 3];

// Pitfall: Assuming it checks content equality
console.log(array1 === array2); // false, different references

And the same applies to objects.

/*
Hackr.io: JavaScript === Common Pitfalls
Comparing Objects
*/
let obj1 = { name: 'Alice' };
let obj2 = { name: 'Alice' };

// Pitfall: Assuming it compares object properties
console.log(obj1 === obj2); // false, different object instances

Pitfall #3: Misinterpreting Null and Undefined Comparisons

This is a subtle yet impactful pitfall that can catch out beginners. The thing you have to remember is that while null and undefined are loosely equal (==), they are not strictly equal.

/*
Hackr.io: JavaScript === Common Pitfalls
Null and Undefined Comparisons
*/

// Pitfall: Assuming null and undefined are strictly equal
console.log(null === undefined); // false

Performance Considerations

I’ve spent some time talking about when and why you would use JavaScript === instead of ==, but it’s also helpful to look at this from a performance standpoint.

This can be particularly important in large-scale applications because as we know, when it comes to Big-O performance, it’s all about how performance scales with size.  

So, when we use the JavaScript strict equality operator ===, we can expect this to be generally faster than the loose equality operator.

This is because it compares values and types without attempting type conversion, which introduces additional overhead.

The net effect is that when we use JavaScript ===, the JavaScript engine does not spend additional resources on type coercion, leading to quicker evaluations.

This can be especially noticeable in tight loops or high-frequency function calls.

Consider this example in the context of a loop, as I’ve shown below.

/*
Hackr.io: JavaScript ===
Performance Considerations
*/

for (let i = 0; i < largeArray.length; i++) {
  if (largeArray[i] === targetValue) {
      // Perform action
  }
}

In this simple scenario, by using ===, I’ve ensured direct comparisons for each iteration, avoiding the overhead of type conversion that we’d see when using ==. 

If the number of iterations is small, the performance gains would be negligible, but when working with large datasets or performance-critical applications, this becomes very helpful.

That said, I’d also say that in everyday coding scenarios, performance differences are mostly minimal!

For me, the main reason to choose between === and == should primarily be guided by the need for type coercion and the specifics of the comparison being made. 

In most cases, the benefits of clearer, more predictable code with === outweigh its performance advantages, but these are also nice to have!

Wrapping Up

So there you go, you now know everything there is to know about the JavaScript === operator.

Did you learn something new? I hope so!

Whether you’re just starting out with JS or an experienced coder who wants to level up their knowledge, you should now have a firm grasp of what the JavaScript === operator is.

Plus, you also know how to use it, common pitfalls to keep an eye on, and how it differs from its more lenient cousin, the loose equality. 

I hope you enjoyed this exploration of one of the most common tools in the JavaScript language, and feel free to leave a comment below!

Happy coding!

Are you new to JavaScript and eager to learn more about this hugely popular language? Check out:

Udemy's Complete JavaScript Course: From Beginner To Expert

Frequently Asked Questions

1. What Is === And == In JavaScript?

In JavaScript, === is a strict equality operator that compares value and type without type coercion, while == is the loose equality operator and it compares values with type coercion.

2. Why Use === Instead Of == In JavaScript?

It's often better to use === instead of == because it provides a more accurate and predictable comparison by checking both the value and type. This also helps you avoid errors from implicit type conversion.