Loading...
Loading...
How JavaScript converts between types — sometimes helpfully, sometimes surprisingly.
Before you can build anything in JavaScript you need the vocabulary the language is built on: what JavaScript is, how to store data, how to combine it, how values change type, and how to talk to the user. Every later module assumes you are fluent in these five ideas.
How JavaScript turns values from one type to another — both automatically (coercion) and on purpose.
Every JavaScript journey starts with the fundamentals. Before loops, functions, or frameworks, you need to understand what JavaScript is, how to declare variables, what types values can have, and how to print results to the console.
Whether you are brand new to programming or coming from another language, this module gives you a solid foundation. Each chapter includes interactive visualizations so you can watch values move through memory instead of only reading about them.
Understanding type conversion is essential for every JavaScript developer. It shows up in frontend UI code, backend APIs, and framework internals — and getting it wrong leads to bugs that are hard to trace. This chapter builds intuition with visuals so the behavior sticks.
Two kinds of type conversion in JavaScript.
JavaScript is a dynamically typed language. When an operation expects a certain type, JavaScript will try to convert values automatically. This is called type coercion.
You can also convert types manually using built-in functions. This is called explicit conversion.
You do it intentionally
Number("42") → 42JavaScript does it automatically
"5" * 2 → 10// Three target types: String(42) // "42" → to string Number("42") // 42 → to number Boolean(1) // true → to boolean
Using String() and .toString() methods.
| Value | String() | Result |
|---|---|---|
| 42 | String(42) | "42" |
| true | String(true) | "true" |
| false | String(false) | "false" |
| null | String(null) | "null" |
| undefined | String(undefined) | "undefined" |
| NaN | String(NaN) | "NaN" |
// Methods to convert to string: String(42) // "42" — explicit (42).toString() // "42" — method 42 + "" // "42" — implicit (concatenation) // Template literals always produce strings: `Value: ${42}` // "Value: 42"
Using Number(), parseInt(), parseFloat(), and the + operator.
| Value | Number() | Notes |
|---|---|---|
| "42" | 42 | Numeric string → number |
| " 42 " | 42 | Whitespace trimmed |
| "" | 0 | Empty string → 0 |
| "hello" | NaN | Non-numeric → NaN |
| true | 1 | Boolean conversion |
| false | 0 | Boolean conversion |
| null | 0 | null → 0 (special case) |
| undefined | NaN | undefined → NaN |
Try it — Number() converter
// Other conversion methods: parseInt("42px") // 42 (stops at non-numeric) parseFloat("3.14abc") // 3.14 parseInt("0xFF", 16) // 255 (hex) +"42" // 42 (unary + operator)
The simplest conversion — every value is truthy or falsy.
// Explicit conversion: Boolean(1) // true Boolean(0) // false Boolean("hello") // true Boolean("") // false // Double NOT shortcut: !!1 // true !!0 // false !!"hello" // true !!"" // false
💡 Surprising truthys: "0", "false", [], and {} are all truthy! Only the 6 values listed above are falsy.
When JavaScript converts types automatically.
// String concatenation with + "5" + 3 // → "53" (number becomes string)
When + has a string operand, JavaScript converts the other operand to a string and concatenates.
The weird parts of JavaScript type conversion.
| Expression | Result | Why |
|---|---|---|
| [] + [] | "" | Arrays → strings → concat |
| [] + {} | "[object Object]" | String concat |
| "" == false | true | Both become 0 |
| "0" == false | true | Both become 0 |
| "0" == "" | false | String comparison |
| null == 0 | false | null only == undefined |
| NaN == NaN | false | NaN ≠ anything |
// How to avoid coercion bugs: // 1. Always use === instead of == 5 === "5" // false (safe!) // 2. Convert explicitly Number("42") + 8 // 50 (clear intent) // 3. Check for NaN Number.isNaN(NaN) // true isNaN("hello") // true (converts first — less safe) // 4. Use parseInt for user input parseInt(prompt("Enter age:"), 10)
🏆 Rule of thumb:Be explicit. Convert types yourself rather than relying on JavaScript's implicit coercion.
Common questions about type conversion.
Test your understanding — 3 questions
What does this evaluate to?
console.log(Number("hello"));