JavaScript Comparison Operators: == vs ===, <, >, <=, >=

Strict Equality Operator (===)

The strict equality operator (===) compares two values for equality without type coercion.

Returns true only if both operands are the same type and have the same value.

No type conversion occurs - different types are never equal, even if they represent the same value.

Preferred over loose equality for predictable, bug-free comparisons.

Essential for reliable conditional logic and data validation.

// Strict equality - no type coercion
console.log(5 === 5);        // true (same type and value)
console.log(5 === "5");      // false (different types)
console.log(true === 1);     // false (boolean vs number)
console.log(null === undefined); // false (different types)
console.log([] === []);       // false (different objects)
console.log({} === {});       // false (different objects)

// Reference equality
const arr1 = [1, 2, 3];
const arr2 = arr1;
console.log(arr1 === arr2);   // true (same reference)

const obj1 = { name: "John" };
const obj2 = { name: "John" };
console.log(obj1 === obj2);   // false (different references)

// Type checking with strict equality
function isString(value) {
  return typeof value === 'string';
}

function isInteger(value) {
  return typeof value === 'number' && Number.isInteger(value);
}

console.log(isString("hello")); // true
console.log(isInteger(42));     // true
console.log(isInteger(42.5));   // false

Loose Equality Operator (==)

The loose equality operator (==) compares two values for equality with type coercion.

Performs type conversion before comparison, following complex coercion rules.

Can produce unexpected results due to implicit type conversion.

Historically problematic - often leads to subtle bugs in JavaScript code.

Generally avoided in favor of strict equality, except in specific cases where coercion is intentional.

// Loose equality - with type coercion
console.log(5 == 5);         // true
console.log(5 == "5");       // true (string "5" converts to number 5)
console.log(true == 1);      // true (true converts to 1)
console.log(false == 0);     // true (false converts to 0)
console.log(null == undefined); // true (special case)
console.log([] == "");       // true (array converts to empty string)
console.log([] == 0);        // true (array converts to 0)

// Comparison with coercion demonstration
console.log(0 == "");        // true (both become 0)
console.log(0 == "0");       // true (string converts to number)
console.log("" == "0");      // false (both are strings, can't coerce)

// Why loose equality can be problematic
const userInput = "10";
const expectedValue = 10;

// Using loose equality (risky)
if (userInput == expectedValue) {
  console.log("Match found"); // This will run
}

// Better: explicit conversion
if (parseInt(userInput, 10) === expectedValue) {
  console.log("Properly validated");
}

Inequality Operators (!== and !=)

Strict inequality (!==) returns true if operands are not strictly equal.

Loose inequality (!=) returns true if operands are not loosely equal.

Follows the same type coercion rules as their equality counterparts.

!== is preferred for consistency with strict equality usage.

Used for checking non-equality in conditions and validations.

// Strict inequality (!==)
console.log(5 !== "5");      // true (different types)
console.log(5 !== 5);        // false (same type and value)
console.log(true !== 1);     // true (boolean vs number)
console.log(null !== undefined); // true (different types)

// Loose inequality (!=)
console.log(5 != "5");       // false (equal after coercion)
console.log(5 != 6);         // true
console.log(null != undefined); // false (loosely equal)

// Practical validation
function validateUserInput(input, expectedType) {
  if (typeof input !== expectedType) {
    return false; // Use strict inequality
  }
  return true;
}

console.log(validateUserInput("hello", "string")); // true
console.log(validateUserInput(42, "string"));      // false
console.log(validateUserInput(42, "number"));      // true

// Guard clauses
function processValue(value) {
  if (value === null || value === undefined) {
    return "Value is empty";
  }
  
  if (typeof value !== "number") {
    return "Value must be a number";
  }
  
  if (value < 0) {
    return "Value must be positive";
  }
  
  return `Processed: ${value}`;
}

Greater Than and Less Than Operators

Greater than (>) compares if left operand is greater than right operand.

Less than (<) compares if left operand is less than right operand.

Greater than or equal (>=) and less than or equal (<=) include equality cases.

Perform type coercion to numbers before comparison.

Used for ordering, sorting, bounds checking, and range validation.

// Basic numeric comparisons
console.log(5 > 3);          // true
console.log(5 < 3);          // false
console.log(5 >= 5);         // true
console.log(5 <= 4);         // false

// String comparisons (lexicographic)
console.log("apple" < "banana");    // true ('a' comes before 'b')
console.log("zebra" > "apple");     // true ('z' > 'a')
console.log("cat" < "car");         // false ('t' > 'r')

// Mixed type comparisons (converted to numbers)
console.log(5 > "3");         // true (string "3" becomes number 3)
console.log("5" < 3);         // false (string "5" becomes number 5)
console.log("10" > "2");      // false (string comparison, "1" < "2")

// Array bounds checking
function isValidIndex(array, index) {
  return index >= 0 && index < array.length;
}

const arr = [1, 2, 3, 4, 5];
console.log(isValidIndex(arr, 2));   // true
console.log(isValidIndex(arr, 10));  // false
console.log(isValidIndex(arr, -1));  // false

// Range validation
function isInRange(value, min, max) {
  return value >= min && value <= max;
}

console.log(isInRange(5, 1, 10));    // true
console.log(isInRange(15, 1, 10));   // false
console.log(isInRange(1, 1, 10));    // true

Type Coercion in Comparisons

Loose equality converts operands to the same type before comparison.

Primitives are converted to numbers when possible (except strings).

Objects are converted to primitives via toString() or valueOf().

null and undefined are loosely equal to each other but nothing else.

Understanding coercion rules is essential for debugging comparison issues.

// Empty string coercion
console.log(0 == "");         // true (both become 0)
console.log(0 === "");        // false (different types)

// Boolean coercion
console.log(false == 0);      // true
console.log(false == "");     // true
console.log(false == []);     // true (empty array becomes 0)
console.log(true == 1);       // true

// null and undefined
console.log(null == undefined); // true (special case)
console.log(null === undefined); // false
console.log(null == 0);       // false
console.log(undefined == 0);  // false

// Array coercion in comparisons
console.log([1, 2] == "1,2"); // true (array toString() = "1,2")
console.log([5] == 5);        // true ([5].toString() = "5", then "5" == 5)
console.log([] == 0);         // true (empty array coerces to 0)

// Object coercion
console.log({} == "[object Object]"); // true (object toString())

// Safe type comparison
function safeEquals(a, b) {
  // First check strict equality
  if (a === b) return true;
  
  // Handle special cases
  if (typeof a !== typeof b) return false;
  
  // NaN special case
  if (typeof a === 'number' && Number.isNaN(a) && Number.isNaN(b)) {
    return true;
  }
  
  return false;
}

NaN and Special Values

NaN (Not a Number) is not equal to anything, including itself.

Use Number.isNaN() or isNaN() to check for NaN values.

Infinity comparisons work as expected mathematically.

-0 and +0 are strictly equal but have different meanings in some operations.

Special handling required for floating-point comparisons due to precision issues.

// NaN comparisons
console.log(NaN == NaN);      // false
console.log(NaN === NaN);     // false
console.log(Number.isNaN(NaN)); // true (correct way)

// Checking for NaN
function safeDivide(a, b) {
  const result = a / b;
  if (Number.isNaN(result)) {
    return "Invalid calculation";
  }
  return result;
}

console.log(safeDivide(10, 0));     // Infinity
console.log(safeDivide(0, 0));      // "Invalid calculation" (NaN)

// Infinity comparisons
console.log(Infinity > 1000);       // true
console.log(-Infinity < -1000);     // true
console.log(Infinity === Infinity); // true

// Zero comparisons
console.log(0 === -0);              // true
console.log(Object.is(0, -0));      // false (distinguishes -0 and +0)

// Floating point precision
console.log(0.1 + 0.2 === 0.3);    // false
console.log(0.1 + 0.2);             // 0.30000000000000004

// Safe floating point comparison
function floatEqual(a, b, epsilon = Number.EPSILON) {
  return Math.abs(a - b) < epsilon;
}

console.log(floatEqual(0.1 + 0.2, 0.3)); // true

Object and Reference Comparison

Objects are compared by reference, not by value.

Two different objects are never equal, even if they have identical properties.

Array comparison compares references, not contents.

Use JSON.stringify() or deep comparison libraries for value-based comparison.

Primitive wrappers (new String(), new Number()) behave like objects in comparisons.

// Object comparison (by reference)
const obj1 = { name: "John" };
const obj2 = { name: "John" };
const obj3 = obj1;

console.log(obj1 === obj2);    // false (different objects)
console.log(obj1 === obj3);    // true (same reference)
console.log(obj1 == obj2);     // false (still different references)

// Array comparison
const arr1 = [1, 2, 3];
const arr2 = [1, 2, 3];
console.log(arr1 === arr2);    // false (different array objects)
console.log(arr1 == arr2);     // false

// Deep comparison helper
function deepEqual(a, b) {
  if (a === b) return true;
  
  if (a == null || b == null) return false;
  
  if (Array.isArray(a) && Array.isArray(b)) {
    if (a.length !== b.length) return false;
    for (let i = 0; i < a.length; i++) {
      if (!deepEqual(a[i], b[i])) return false;
    }
    return true;
  }
  
  if (typeof a === 'object' && typeof b === 'object') {
    const keysA = Object.keys(a);
    const keysB = Object.keys(b);
    if (keysA.length !== keysB.length) return false;
    for (const key of keysA) {
      if (!deepEqual(a[key], b[key])) return false;
    }
    return true;
  }
  
  return false;
}

console.log(deepEqual(arr1, arr2));        // true
console.log(deepEqual({ a: 1 }, { a: 1 })); // true

Practical Applications and Best Practices

Use strict equality (===) as the default for most comparisons.

Be explicit about type conversions before comparisons.

Use Number.EPSILON for floating-point comparisons.

Handle NaN cases explicitly with Number.isNaN().

Validate input types before performing comparisons.

For user-facing comparisons, consider locale awareness.

Test edge cases in comparison logic thoroughly.

Common Pitfalls

• Using loose equality everywhere: Prefer strict equality (===) for predictable comparisons. Use loose equality (==) only when type coercion is intentional.
• Comparing floating-point numbers directly: Use Number.EPSILON or percentage-based comparisons for floating-point equality checks.
• Expecting object comparison by value: Objects compare by reference. Use deep comparison or JSON.stringify() for value-based comparison.
• Not handling NaN in comparisons: Use Number.isNaN() to check for NaN values. Remember NaN !== NaN.
• Case-sensitive string comparisons for user input: Use toLowerCase() or localeCompare() for case-insensitive user-facing comparisons.
• Ignoring type coercion in mixed-type comparisons: Explicitly convert types before comparison to avoid unexpected coercion behavior.
• Not validating input types before comparison: Add type checks before comparisons to prevent runtime errors and unexpected behavior.
• Assuming all comparisons follow mathematical logic: Remember that string comparisons are lexicographic, not numeric. Always test comparison behavior.

Frequently Asked Questions