JavaScript Weird Parts: The Quirks That Keep Us Guessing

Published on October 1, 2025

4 min read

JavaScript has bizarre behaviors that 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.

Understanding these weird parts isn't just academic. It helps you write bug-free code and avoid the subtle traps that break your app in production.

Why This Matters

These quirks aren't bugs - they're features. Understanding them helps you write more predictable code and debug 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 the IEEE 754 floating-point standard - +0 and -0 are equal in comparisons but keep 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

Type coercion can surprise you:

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 coerces types before comparing, which leads 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, whose type coercion 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 is 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 type coercion and equality issues before they reach production.

Wrapping Up

JavaScript's weird parts make it both fascinating and challenging. These behaviors seem counterintuitive, but understanding them is key to writing robust 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

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 by following best practices.

Next Steps

Practice with the examples above, then build your own JavaScript apps while keeping these quirks in mind.

February 8, 20242 min

JavaScript

Type Coercion in JavaScript

Understanding type coercion in JavaScript - the automatic conversion of values from one data type to another. Learn implicit vs explicit coercion with practical examples and best practices.

June 2, 20263 min

JavaScript

Declarative vs Imperative Programming

Understand the difference between declarative and imperative programming in JavaScript, with practical examples and when to reach for each style.

June 2, 20263 min

JavaScript