PProtokol
JavaScript Deep Dive/Values, Types, and Coercion
outline — lesson 1 of 11

Level 2 · Beginner · 14 min

Values, Types, and Coercion

Learn what type coercion is and why === is almost always the equality operator you want.

What you will learn

  • Distinguish primitive values (number, string, boolean, null, undefined) from objects
  • Explain what type coercion is and when JavaScript does it automatically
  • Predict the result of == comparisons using coercion rules
  • Explain why === (strict equality) is the safer default

The idea

Every value in JavaScript has a type. Primitives (numbers, strings, booleans, null, undefined, symbols) are compared by value; objects and arrays are compared by reference. Coercion is JavaScript automatically converting one type to another so an operation can proceed.

Why does this matter?

Coercion is the source of some of JavaScript's most famous 'gotchas'. Understanding it lets you predict what your code will do instead of being surprised, and tells you exactly why == is dangerous and === is usually the right choice.

A real-world analogy

Think of == as a very accommodating waiter who will convert your order to match whatever the kitchen has ('you asked for 5, I'll treat your "5" as the number 5 too'). === is a strict waiter who refuses the order unless it matches exactly, type included.

See it in code

Loose (==) vs strict (===) equality
console.log(5 == '5');   // true  -- string coerced to number
console.log(5 === '5');  // false -- different types, no coercion
console.log(0 == false); // true  -- false coerced to 0
console.log(null == undefined); // true (special case)
console.log(null === undefined); // false

Line by line

  • 5 == '5'

    == converts the string '5' to the number 5 before comparing, so it is true.

  • 5 === '5'

    === never converts types. A number and a string can never be strictly equal.

  • null == undefined

    A special rule in the spec: null and undefined are loosely equal to each other, but to nothing else.

What do you think happens?

What does `'0' == false` evaluate to?

Have a guess before you read on. Guessing wrong is part of learning it.

Try it yourself

Predict, then check in your head: what does [] == false evaluate to? Why? (Hint: arrays coerce to a primitive first.)

Worth knowing

Classic misconceptions: (1) NaN !== NaN -- NaN is never equal to anything, including itself; use Number.isNaN(x) to check. (2) typeof null is 'object' -- a decades-old bug kept for compatibility, not a sign null is an object. (3) == can silently hide bugs; default to === and only reach for == when you deliberately want null/undefined to match.

The proper words for it

Coercion
JavaScript automatically converting a value from one type to another to complete an operation.
Primitive
A basic value type (number, string, boolean, null, undefined, symbol, bigint) compared by value.
Strict equality (===)
Compares both value and type, with no coercion.

Where you'll meet this

Linters like ESLint's eqeqeq rule ban == by default in most professional codebases specifically because of these coercion surprises -- === is the industry-standard default.

Lesson recap

  • Primitives compare by value; objects/arrays compare by reference
  • == coerces types before comparing; === never does
  • NaN is never equal to anything, even itself -- use Number.isNaN()
  • Default to === unless you have a specific, documented reason to use ==

Still fuzzy on any of this?

That's normal, and it's not a dead end. Pick a different way to hear it.

Quick check

1. What does `typeof null` return?

2. Which comparison uses type coercion?

3. Why is `NaN === NaN` false?

mini challenge · javascriptnot run

Sum Only Valid Numbers

Write sumValidNumbers(arr) that returns the sum of only the array elements that are actual numbers (typeof === 'number') and not NaN. Ignore strings, booleans, null, undefined, and NaN entirely -- no coercion.

main.jsjavascriptnot run
First, pass the quick check and pass every required coding challenge to unlock "Scope and Closures".

Your tutor

patient by design

No question is too basic here. Ask anything — I'll explain it in plain words and guide you rather than handing over answers.