JS Comparisons šŸŽÆ

beginner
15 min

JS Comparisons šŸŽÆ

Welcome to our comprehensive guide on JavaScript Comparisons! In this tutorial, we'll dive into the world of comparing values in JavaScript, a fundamental skill for every developer.

By the end of this lesson, you'll be able to compare values using operators, understand the differences between equal (==), strictly equal (===), and other comparison operators, and learn how to compare objects and arrays. Let's get started!

Understanding Comparison Operators šŸ“

Comparison operators allow us to compare values in JavaScript. They are used to test whether a condition is true or false. Here's a list of the comparison operators we'll cover:

  • Equal (==)
  • Strictly Equal (===)
  • Not Equal (!=)
  • Not Strictly Equal (!==)
  • Greater Than (>)
  • Less Than (<)
  • Greater Than or Equal To (>=)
  • Less Than or Equal To (<=)

šŸ’” Pro Tip: Remember that == checks for loose equality, while === checks for strict equality. The difference lies in type conversion.

Equality Operators šŸ’”

Equal (==)

The equal operator checks if the values are equal, but it performs type coercion (converting one or both operands to a common type).

javascript
console.log(5 == "5"); // true (since the string "5" is converted to a number)

Strictly Equal (===)

The strictly equal operator checks if the operands are equal and have the same data type. It does not perform type coercion.

javascript
console.log(5 === "5"); // false (since the number 5 and the string "5" have different data types)

Inequality Operators šŸ’”

Not Equal (!=)

The not equal operator checks if the values are not equal.

javascript
console.log(5 != "5"); // false (since 5 and "5" are equal)

Not Strictly Equal (!==)

The not strictly equal operator checks if the operands are not equal and have different data types.

javascript
console.log(5 !== "5"); // false (since 5 and "5" are equal, but not strictly) console.log(5 !== 5.0); // false (numbers 5 and 5.0 are equal) console.log(5 !== null); // true (number 5 and null have different data types)

Comparison Operators for Numbers šŸ’”

Greater Than (>)

The greater than operator checks if the left operand is greater than the right operand.

javascript
console.log(5 > 3); // true

Less Than (<)

The less than operator checks if the left operand is less than the right operand.

javascript
console.log(3 < 5); // true

Greater Than or Equal To (>=)

The greater than or equal to operator checks if the left operand is greater than or equal to the right operand.

javascript
console.log(5 >= 5); // true console.log(5 >= 3); // true

Less Than or Equal To (<=)

The less than or equal to operator checks if the left operand is less than or equal to the right operand.

javascript
console.log(3 <= 5); // true console.log(3 <= 3); // true

Comparing Objects and Arrays šŸ“

When comparing objects and arrays in JavaScript, the == operator performs shallow comparison, while the === operator does not. Let's see some examples:

javascript
const obj1 = { name: "John" }; const obj2 = { name: "John" }; const arr1 = [1, 2, 3]; const arr2 = [1, 2, 3]; console.log(obj1 == obj2); // false (since they have different memory locations) console.log(obj1 === obj2); // false (since they have different memory locations) console.log(arr1 == arr2); // true (since they have the same content) console.log(arr1 === arr2); // false (since they have different memory locations, even though they have the same content)

šŸ’” Pro Tip: To compare objects and arrays in JavaScript, you can use JSON.stringify() to convert them to strings and compare the strings.

Quiz šŸŽÆ

Quick Quiz
Question 1 of 1

What is the result of `5 == "5"` in JavaScript?

Quick Quiz
Question 1 of 1

What is the result of `5 === "5"` in JavaScript?

That's all for now! Keep practicing with comparison operators, and soon you'll be writing robust JavaScript code. šŸ’” Happy coding! šŸŽ‰