← 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
Syntax
javascript 
String(value);
Number(value);
Boolean(value);
parseInt(string);

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.

उदाहरण: 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.

उदाहरण: Number(), String(), and Boolean()

javascript 
// Print `Number("42")` to the console
// Print `Number("42")` to the console
console.log(Number("42"));
// Print `String(42)` to the console
// Print `String(42)` to the console
console.log(String(42));
// Print `Boolean(0)` to the console
// Print `Boolean(0)` to the console
console.log(Boolean(0));
// Print `Boolean("hello")` to the console
// Print `Boolean("hello")` to the console
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.

उदाहरण: 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.

उदाहरण: 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.

उदाहरण: 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);
Live Example
Related Topics

JS typeof · JS Destructuring · JS Maps · JS Arrow Functions

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
🔒

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.