AceDevHub
Runtime & SyntaxFree

Operators and Type Coercion

Use arithmetic, comparison, and logical operators — and understand implicit coercion so == surprises never trap you in interviews.

BeginnerFreeOperators

Operators are the verbs of the language — they combine values, compare them, and branch logic. JavaScript uniquely coerces types implicitly in some operators (especially + and ==), which makes it productive for quick scripts but dangerous in large codebases. This lesson teaches both the rules and the discipline: explicit conversion in production, understanding coercion for interviews and legacy code.

Operators act on values

Operators combine or transform values: arithmetic (+, -, *, /, %), comparison (===, >), logical (&&, ||, !), and assignment (=, +=). Unary operators like ! coerce to boolean; + can coerce to number or concatenate strings depending on operands. Coercion is JavaScript calling ToNumber, ToString, or ToBoolean internally per spec rules — not random behavior, but rules long enough that explicit conversion is easier to read.

Arithmetic and the + trap

The + operator is dual-purpose: if either operand is a string (or becomes one via ToPrimitive), concatenation wins. Otherwise both convert to numbers and add. Subtraction, multiplication, and division always favor numeric conversion — which is why "10" - 5 works but "10" + 5 yields "105". Template literals (`${x}`) avoid this trap for string building.

arithmetic.js
Loading editor…
Outputconsole
15
105
5
21
5
1
42
0

== vs === — loose vs strict equality

Strict equality === compares type and value without coercion — if types differ, result is false immediately. Loose equality == runs Abstract Equality Comparison: null == undefined is true by spec, false == 0 is true because false becomes 0, objects compare by reference after unboxing. The algorithm is learnable but unreadable in code review — that is why teams ban == in lint rules.

equality.js
Loading editor…
Outputconsole
true
false
true
false
true
false
false
true

Truthy and falsy values

In boolean contexts (if, while, &&, ||, ternary condition), JavaScript converts values to true or false using ToBoolean. Falsy values are a closed list: false, 0, -0, 0n, "", null, undefined, NaN. Everything else — including [], {}, and the string "false" — is truthy. This is why if (items) passes for an empty array and why explicit .length or Boolean checks matter in APIs.

  • Falsy: false, 0, -0, 0n, "", null, undefined, NaN
  • Truthy: [], {}, "0", "false", function(){}, -1, 3.14, …
truthy-falsy.js
Loading editor…
Outputconsole
0          false
           false
null       false
undefined  false
NaN        false
hello      true
           true
[object Object] true
Truthy array, but length is 0

Logical operators and short-circuiting

The example below demonstrates "Logical operators and short-circuiting" in runnable form. Read the comment lines first — they map each step to the mental model from earlier sections, then trace execution top to bottom as the engine would.

logical.js
Loading editor…
Outputconsole
logged in
0
default
0
100
https://api.dev
undefined

Increment and compound assignment

Logical operators return operands, not booleans — they short-circuit. && stops at the first falsy value and returns it; || stops at the first truthy value. That enables patterns like user && user.name without nested ifs. ?? (nullish coalescing) only treats null and undefined as missing — 0 and "" are valid values, which fixes bugs where || replaced legitimate zeros with defaults.

assignment.js
Loading editor…
Outputconsole
{ score: 16, post: 1, pre: 2, x: 2, y: 2 }

Chapter 1 checkpoint

Compound assignment (+=, -=) reads and writes in one expression. Post-increment (x++) returns the old value then adds 1; pre-increment (++x) adds first. In modern code you rarely need ++ in expressions — use += 1 for clarity unless you are in a tight loop where idioms matter.

You now know what JavaScript is, how to run it, how to declare variables, which types exist, and how operators coerce values. Chat 2 continues with strict comparisons in depth, conditionals, loops, functions, and scope.

  1. 1Use === unless you explicitly need coercion rules
  2. 2Remember + with strings concatenates; - * / coerce to number
  3. 3Falsy list is small — empty arrays/objects are truthy
  4. 4?? defaults only null/undefined; || defaults any falsy value
  5. 5Next: strict equality patterns and if/else control flow