What is the difference between == and === in JavaScript and when is it better to use which operator?

5 == "5";   // true (converts string to number)
5 === "5";  // false (different types)
 
null == undefined;  // true (special case)
null === undefined; // false (different types)
 
0 == false;   // true (converts boolean to number)
0 === false;  // false (different types)

// Compares type AND value
console.log(5 === 5);        // true
console.log(5 === "5");      // false (different types)
console.log(true === true);  // true
console.log(true === 1);     // false (different types)
console.log(null === null);  // true
console.log(undefined === undefined); // true
console.log(null === undefined);      // false

// Compares values with type coercion
console.log(5 == "5");       // true ("5" → 5)
console.log(true == 1);      // true (true → 1)
console.log(false == 0);     // true (false → 0)
console.log(null == undefined); // true (special case)
console.log("" == 0);        // true ("" → 0)

// Type coercion examples
console.log("5" == 5);     // "5" → 5, then 5 == 5 → true
console.log(true == "1");  // true → 1, "1" → 1, then 1 == 1 → true
console.log([1,2] == "1,2"); // [1,2] → "1,2", then "1,2" == "1,2" → true

// ❌ Bad: unexpected behavior
function checkValue(value) {
  if (value == null) {
    return "Empty value"; // Will work for null AND undefined
  }
  return "Has value";
}
 
console.log(checkValue(null));      // "Empty value"
console.log(checkValue(undefined)); // "Empty value"
console.log(checkValue(0));         // "Has value"
console.log(checkValue(""));        // "Has value"
 
// ✅ Good: explicit check
function checkValueStrict(value) {
  if (value === null || value === undefined) {
    return "Empty value";
  }
  return "Has value";
}
 
// ✅ Or use nullish coalescing
const result = value ?? "default value";

// ❌ Bad: unexpected results
function validateAge(input) {
  if (input == 18) {
    return "Adult";
  }
  return "Minor";
}
 
console.log(validateAge("18"));    // "Adult" (works by accident)
console.log(validateAge(" 18 "));  // "Minor" (spaces!)
console.log(validateAge(true));    // "Minor" (true != 18)
 
// ✅ Good: explicit type conversion
function validateAgeStrict(input) {
  const age = Number(input);
  if (age === 18) {
    return "Adult";
  }
  return "Minor";
}

// ❌ Bad: checkbox can be a string
function handleCheckbox(isChecked) {
  if (isChecked == true) {
    console.log("Checked");
  }
}
 
handleCheckbox("true");  // Won't work!
handleCheckbox(1);       // Will work (1 == true)
 
// ✅ Good: explicit check
function handleCheckboxStrict(isChecked) {
  if (isChecked === true || isChecked === "true") {
    console.log("Checked");
  }
}
 
// ✅ Or convert to boolean
function handleCheckboxBoolean(isChecked) {
  if (Boolean(isChecked)) {
    console.log("Checked");
  }
}

// ✅ Safe comparisons
if (user.age === 18) { /* ... */ }
if (status === "active") { /* ... */ }
if (count === 0) { /* ... */ }
if (value === null) { /* ... */ }
if (typeof data === "string") { /* ... */ }
 
// ✅ In arrays and objects
const users = ["admin", "user", "guest"];
if (users.includes("admin")) { /* ... */ } // includes uses ===
 
// ✅ In switch (uses ===)
switch (userRole) {
  case "admin":
    // ...
    break;
}

// ✅ Check for null/undefined simultaneously
if (value == null) {
  // Will work for null AND undefined
  console.log("Value is empty");
}
 
// Equivalent to:
if (value === null || value === undefined) {
  console.log("Value is empty");
}
 
// ✅ But better to use nullish coalescing
const result = value ?? "default";

console.log(0 == false);
console.log(0 === false);
console.log("" == false);
console.log("" === false);

function isAdult(age) {
  return age == 18;
}
 
console.log(isAdult("18"));   // ?
console.log(isAdult(" 18"));  // ?
console.log(isAdult(18.0));   // ?

const arr = [];
console.log(arr == 0);
console.log(arr == "");
console.log(arr == false);
console.log(arr === false);

// ❌ Problematic function
function findUser(users, id) {
  return users.find(user => user.id == id);
}
 
const users = [
  { id: 1, name: "Anna" },
  { id: "2", name: "Boris" },
  { id: 3, name: "Vera" }
];
 
console.log(findUser(users, "1")); // Will find Anna (1 == "1")
console.log(findUser(users, 2));   // Will find Boris ("2" == 2)

function validateForm(data) {
  // Find problems in this validation
  if (data.name == "") {
    return "Name is required";
  }
  if (data.age == 0) {
    return "Age is required";
  }
  if (data.isActive == false) {
    return "Account must be active";
  }
  return "Validation passed";
}
 
// Test data
console.log(validateForm({ name: 0, age: false, isActive: "" }));

// ✅ Good
if (status === "active") { /* ... */ }
if (count === 0) { /* ... */ }
if (user === null) { /* ... */ }
 
// ❌ Bad
if (status == "active") { /* ... */ }
if (count == 0) { /* ... */ }
if (user == null) { /* ... */ }

// ✅ Good: explicit conversion
const userInput = "25";
const age = Number(userInput);
if (age === 25) { /* ... */ }
 
// ❌ Bad: implicit conversion
if (userInput == 25) { /* ... */ }

// ✅ Good: check type
function processValue(value) {
  if (typeof value === "string" && value.length > 0) {
    return value.toUpperCase();
  }
  if (typeof value === "number" && value > 0) {
    return value * 2;
  }
  return null;
}
 
// ❌ Bad: rely on type coercion
function processValueBad(value) {
  if (value == true) {
    return value.toUpperCase(); // May crash!
  }
  return value * 2;
}

// .eslintrc.json
{
  "rules": {
    "eqeqeq": ["error", "always"], // Forbids ==
    "no-implicit-coercion": "error" // Forbids implicit coercion
  }
}

// Object.is() is even stricter than ===
console.log(Object.is(NaN, NaN));     // true (=== gives false)
console.log(Object.is(-0, +0));       // false (=== gives true)
console.log(Object.is(5, 5));         // true
console.log(Object.is(5, "5"));       // false
 
// Useful for special cases
function isActuallyNaN(value) {
  return Object.is(value, NaN);
}

// Instead of checking for null/undefined
const result = value ?? "default";
 
// Instead of
const result2 = (value === null || value === undefined) 
  ? "default" 
  : value;

// Safe property access
const city = user?.address?.city;
 
// Instead of
const city2 = user && user.address && user.address.city;

// ❌ Bad
if (isActive == true) { /* ... */ }
if (hasPermission == false) { /* ... */ }
 
// ✅ Good
if (isActive === true) { /* ... */ }
if (isActive) { /* ... */ }           // Even better
if (!hasPermission) { /* ... */ }     // For false

// ❌ Always false (references are compared)
console.log([] == []);     // false
console.log({} == {});     // false
 
// ✅ Proper array comparison
function arraysEqual(a, b) {
  return a.length === b.length && 
         a.every((val, i) => val === b[i]);
}
 
// ✅ Proper object comparison
function objectsEqual(a, b) {
  return JSON.stringify(a) === JSON.stringify(b); // Simple way
  // Or use lodash.isEqual library
}

const obj = { count: 0, name: "" };
 
// ❌ Bad: 0 and "" are considered false
if (obj.count) { /* ... */ }     // Won't work for 0
if (obj.name) { /* ... */ }      // Won't work for ""
 
// ✅ Good: check existence
if ("count" in obj) { /* ... */ }
if (obj.hasOwnProperty("count")) { /* ... */ }
if (obj.count !== undefined) { /* ... */ }