← Back to JavaScript Course | Chapter 4: Modern JS, Async & DOM | Lesson 11 of 26

JS Type Conversion

Think of exchanging currency at an airport kiosk, the numbers change form, dollars into euros, but the underlying value is still meant to represent the same thing, just expressed differently. Type conversion in JavaScript is that currency exchange for values, turning a number into text, text into a number, or any value into true or false, either because you asked for it explicitly, or because JavaScript quietly did it for you. Understanding when and how this conversion happens explains a huge portion of JavaScript's sometimes surprising behavior, and it's essential for handling real form input on sites like cookiescursor.com.

In this page:

  1. Implicit vs Explicit Conversion
  2. Number(), String(), and Boolean()
  3. parseInt and parseFloat
  4. Common Coercion Gotchas
  5. Converting Real Form Input

Implicit vs Explicit Conversion

Implicit conversion, also called coercion, happens automatically when JavaScript needs values of matching types, like in + or ==, while explicit conversion is when you deliberately call a function like Number() to convert a value yourself.

Note: Favor explicit conversion whenever the intended type matters, it makes your code's behavior obvious rather than relying on JavaScript's automatic rules.

Warning: Implicit conversion with + can be especially surprising, since it joins text instead of adding numbers whenever either side is a string.

Example: Implicit vs Explicit Conversion

javascript 
console.log("5" + 1);   // "51" - implicit coercion
console.log(Number("5") + 1); // 6 - explicit conversion

Number(), String(), and Boolean()

Number() converts a value to its numeric equivalent, String() converts a value into text, and Boolean() converts a value into true or false based on JavaScript's truthy and falsy rules.

Note: Number() on a non-numeric string, like Number(abc), returns NaN, always check for NaN after converting untrusted input.

Warning: Boolean(0), Boolean(''), and Boolean(null) all convert to false, while nearly everything else, including 0 as a string, converts to true.

Example: Number(), String(), and Boolean()

javascript 
console.log(Number("42"));
console.log(String(42));
console.log(Boolean(0));
console.log(Boolean("hello"));

parseInt and parseFloat

parseInt() reads a string from the start and extracts a whole number, stopping at the first non-numeric character, and parseFloat() does the same but allows a decimal point in the result.

Note: parseInt and parseFloat are especially useful for strings with extra text attached, like 25px, which Number() alone cannot handle cleanly.

Warning: Always pass 10 as the second argument to parseInt, like parseInt(value, 10), to avoid ambiguity with strings that look like they might be another base.

Example: parseInt and parseFloat

javascript 
console.log(parseInt("42px"));   // 42
console.log(parseFloat("3.14m")); // 3.14

Common Coercion Gotchas

A few JavaScript coercion rules are widely considered surprising, including Number('') returning 0, and NaN never being equal to itself, even with ===, which is why isNaN() or Number.isNaN() is required to properly detect it.

Note: Whenever comparing a value that might be NaN, use Number.isNaN(value) instead of value === NaN, which never works as expected.

Warning: NaN !== NaN is true in JavaScript, a famous quirk that trips up developers who expect equal values to always be considered equal.

Example: Common Coercion Gotchas

javascript 
console.log(Number(""));        // 0
console.log(NaN === NaN);       // false
console.log(isNaN(NaN));        // true
console.log(Number.isNaN(NaN)); // true

Converting Real Form Input

Values read from HTML form inputs, including type=number fields, always arrive as strings in JavaScript, making explicit conversion an essential step before performing any arithmetic on user-submitted data.

Note: Always convert and validate form input immediately after reading it, before it's used anywhere else in your calculation logic.

Warning: Forgetting to convert a form input before adding it to a number produces string concatenation instead of the intended arithmetic result.

Example: Converting Real Form Input

javascript 
const inputValue = "25"; // value read from a form input, always a string
const age = Number(inputValue);
console.log(age + 5);
Common Mistakes
  1. Forgetting that values from HTML form inputs always start as strings, even if they look like numbers, requiring explicit conversion first.
  2. Assuming Number('') returns NaN, it actually returns 0, a genuinely surprising conversion rule worth remembering.
  3. Using parseInt without a radix argument in edge cases, always pass 10 explicitly, parseInt(value, 10), for predictable base-10 parsing.
Chapter Summary
  • Implicit conversion happens automatically, like when + combines a number and a string, while explicit conversion is done deliberately with functions like Number().
  • Number(), String(), and Boolean() explicitly convert a value to that specific type.
  • parseInt and parseFloat extract a leading number from a string, even if the string contains extra non-numeric characters after it.
Browser Support

Type conversion functions and coercion rules are core JavaScript behaviors, standardized and identical across every browser.

🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson JS typeof Next Lesson → JS Destructuring

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.