JavaScript Weird Parts: The Quirks That Keep Us Guessing

Published on October 1, 2025

101

JavaScript has some truly bizarre behaviors that can make even experienced developers scratch their heads. From [] == ![] being true to NaN not equaling itself, these quirks are part of what makes JavaScript both fascinating and frustrating.

But here's the thing - understanding these weird parts isn't just academic curiosity. It's essential for writing bug-free code and avoiding the subtle traps that can break your application in production.

Why This Matters

These quirks aren't bugs - they're features! Understanding them helps you write more predictable code and debug issues faster.

Equality Quirks: When Things Aren't What They Seem

Zero and Negative Zero

JavaScript treats 0 and -0 as equal, but they're not identical:

equality.js
console.log(0 === -0); // true
console.log(Object.is(0, -0)); // false
console.log(1 / 0); // Infinity
console.log(1 / -0); // -Infinity

IEEE 754 Standard

JavaScript follows IEEE 754 floating-point standard - +0 and -0 are equal in comparisons but preserve their sign in math operations.

NaN Equality

NaN is the only value that's not equal to itself:

nan-equality.js
console.log(NaN === NaN); // false
console.log(NaN == NaN); // false
console.log(Object.is(NaN, NaN)); // true
console.log(Number.isNaN(NaN)); // true

Type Coercion Magic: When JavaScript Changes Types

String to Number Conversion

JavaScript's type coercion can be surprising:

type-coercion.js
console.log(Number("")); // 0
console.log(Number("   ")); // 0
console.log(Number("123")); // 123
console.log(Number("abc")); // NaN
console.log(Number(null)); // 0
console.log(Number(undefined)); // NaN
console.log(Number(false)); // 0
console.log(Number(true)); // 1

Boolean Coercion

JavaScript has exactly 7 falsy values - everything else is truthy:

boolean-coercion.js
// Falsy values
console.log(Boolean("")); // false
console.log(Boolean(0)); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean(NaN)); // false

// Truthy values
console.log(Boolean("hello")); // true
console.log(Boolean(42)); // true
console.log(Boolean({})); // true
console.log(Boolean([])); // true

Falsy Values

JavaScript has exactly 7 falsy values: false, 0, -0, 0n, "", null, undefined, and NaN. Everything else is truthy.

Object Type Coercion: When Objects Become Primitives

The ValueOf and ToString Methods

Objects have special methods that JavaScript calls during type coercion:

object-coercion.js
const obj1 = {
  valueOf: () => 42,
  toString: () => 27
};
console.log(obj1 + ''); // "42"
console.log(obj1 + 10); // 52
console.log(String(obj1)); // "27"

const obj2 = {
  toString: () => 27
};
console.log(obj2 + ''); // "27"
console.log(obj2 + 10); // 37

Coercion Order: valueOf() first, then toString() if needed.

Array Coercion

Arrays are converted to strings by joining their elements with commas:

array-coercion.js
console.log([] + []); // ""
console.log([] + {}); // "[object Object]"
console.log({} + []); // "[object Object]"
console.log([1, 2, 3] + [4, 5, 6]); // "1,2,34,5,6"
console.log([1, 2, 3] + 4); // "1,2,34"
console.log([1, 2, 3] - 4); // NaN

The Double Equals Operator: The Abstract Equality Algorithm

The Famous `[] == ![]` Example

The == operator performs type coercion before comparison, leading to surprising results:

abstract-equality.js
console.log([] == ![]); // true

// Step by step:
// 1. ![] evaluates to false
// 2. [] == false
// 3. false is converted to 0: [] == 0
// 4. [] is converted to string: "" == 0
// 5. "" is converted to number: 0 == 0
// 6. Result: true

Abstract Equality Algorithm

The == operator follows the Abstract Equality Comparison Algorithm, which performs type coercion that can be unpredictable. Always prefer === for explicit comparisons.

More Abstract Equality Examples

Here are more examples of the == operator's behavior:

more-equality.js
console.log(null == undefined); // true
console.log(null == 0); // false
console.log(undefined == 0); // false

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

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

console.log([1, 2] == "1,2"); // true
console.log([null] == ""); // true
console.log([undefined] == ""); // true

Hoisting: When JavaScript Moves Things Around

Function Declarations vs Function Expressions

Function declarations are hoisted, function expressions are not:

hoisting.js
// Function declaration - hoisted
console.log(hoistedFunction()); // "Hello from hoisted function"

function hoistedFunction() {
  return "Hello from hoisted function";
}

// Function expression - not hoisted
try {
  console.log(notHoisted()); // TypeError: notHoisted is not a function
} catch (e) {
  console.log("Error:", e.message);
}

var notHoisted = function() {
  return "Hello from not hoisted function";
};

Variable Hoisting

var declarations are hoisted but initialized as undefined, while let and const create a "temporal dead zone":

variable-hoisting.js
console.log(x); // undefined (not ReferenceError)
var x = 5;

// Let and const are not hoisted the same way
try {
  console.log(y); // ReferenceError: Cannot access 'y' before initialization
} catch (e) {
  console.log("Error:", e.message);
}
let y = 10;

Hoisting Behavior

Function declarations are fully hoisted, while function expressions and variables declared with var are hoisted but initialized as undefined. let and const are hoisted but not initialized, creating a "temporal dead zone."

The This Keyword: Context-Dependent Behavior

The this keyword in JavaScript can be confusing because it depends on how a function is called:

this-keyword.js
// Global context
console.log(this === window); // true (in browser)

// Function context
function regularFunction() {
  console.log(this);
}
regularFunction(); // window (in non-strict mode)

// Method context
const obj = {
  name: "Object",
  method: function() {
      console.log(this.name);
  }
};
obj.method(); // "Object"

// Arrow function context
const arrowObj = {
  name: "Arrow Object",
  method: () => {
      console.log(this.name);
  }
};
arrowObj.method(); // undefined (this refers to outer scope)

Best Practices: Avoiding the Weird Parts

Always use === instead of == - Avoid type coercion surprises
Use Object.is() for special cases - When you need to distinguish between +0 and -0 or check for NaN
Understand hoisting - Know how function declarations and variable declarations behave
Be explicit about types - Use explicit conversions when needed
Test edge cases - Always test your code with unexpected input types

Pro Tip

Use TypeScript or ESLint rules to catch potential issues with type coercion and equality comparisons before they reach production.

Wrapping Up

JavaScript's weird parts make it both fascinating and challenging. While these behaviors might seem counterintuitive, understanding them is crucial for writing robust JavaScript code.

Key takeaways:

Prefer strict equality (===) over loose equality (==)
Understand how type coercion works
Know the difference between function declarations and expressions
Be aware of hoisting behavior
Use modern JavaScript features that provide more predictable behavior

Remember, these quirks aren't bugs—they're features of the language. Once you understand them, you can use them to your advantage or avoid them entirely by following best practices.

Next Steps

Practice with the interactive examples above, then try building your own JavaScript applications while keeping these quirks in mind!

GET IN TOUCH

Let's work together

I build exceptional and accessible digital experiences for the web

WRITE AN EMAIL

or reach out directly at hello@mohammadshehadeh.com