Academic Block

JavaScript Type ConversionGet Certified

Type conversion is the process of changing a value from one data type to another. JavaScript performs conversion both automatically (implicit) and when you request it (explicit).

Implicit vs Explicit Conversion

Implicit conversion (also called coercion) happens automatically when JavaScript needs a different type. Explicit conversion is when you deliberately convert a value using functions such as String(), Number(), or Boolean().

// Implicit
console.log("5" + 2);   // "52"  (number becomes string)
console.log("5" - 2);   // 3     (string becomes number)

// Explicit
console.log(Number("5") + 2);  // 7
console.log(String(5) + "2");  // "52"

Converting to String

The most common ways to convert a value to a string are String() and the .toString() method.

let num = 123;
let bool = true;
let arr = [1, 2, 3];

console.log(String(num));
console.log(String(bool));
console.log(String(arr));
console.log(num.toString());
console.log((456).toString());

Converting to Number

Use Number() for a full conversion, or parseInt() / parseFloat() when you want to extract a number from the beginning of a string.

console.log(Number("42"));
console.log(Number("42.5"));
console.log(Number("42px"));   // NaN
console.log(Number(true));
console.log(Number(false));
console.log(Number(null));
console.log(Number(undefined));

parseInt and parseFloat

console.log(parseInt("42px", 10));
console.log(parseInt("3.14", 10));
console.log(parseFloat("3.14abc"));
console.log(parseInt("1010", 2));   // binary
console.log(parseInt("FF", 16));    // hexadecimal

Converting to Boolean

Boolean() (or the double-not !!) converts any value to true or false.

console.log(Boolean(1));
console.log(Boolean(0));
console.log(Boolean("hello"));
console.log(Boolean(""));
console.log(Boolean(null));
console.log(Boolean(undefined));
console.log(Boolean([]));
console.log(Boolean({}));

Truthy and Falsy Values

Only a short list of values is falsy. Everything else is truthy.

// Falsy values
console.log(Boolean(false));
console.log(Boolean(0));
console.log(Boolean(-0));
console.log(Boolean(0n));
console.log(Boolean(""));
console.log(Boolean(null));
console.log(Boolean(undefined));
console.log(Boolean(NaN));

// Everything else is truthy
console.log(Boolean("0"));
console.log(Boolean("false"));
console.log(Boolean([]));
console.log(Boolean({}));

Converting Objects to Primitives

When an object is used where a primitive is expected, JavaScript tries to convert it (usually via toString() or valueOf()).

const user = { name: "Michael" };

console.log(String(user));
console.log(`User: ${user}`);

const fruits = ["Apple", "Banana", "Orange"];
console.log(String(fruits));
console.log(Number([5]));
console.log(Number([1, 2]));

Common Coercion Gotchas

console.log(1 + "1");      // "11"
console.log("5" - 2);      // 3
console.log("5" + 2);      // "52"
console.log([] + []);      // ""
console.log([] + {});      // "[object Object]"
console.log(1 == "1");     // true  (loose)
console.log(1 === "1");    // false (strict)

Practical Example

A common real-world case is reading numeric input from a form field (which always arrives as a string).

const priceInput = "49.99";
const quantityInput = "3";

const price = parseFloat(priceInput);
const quantity = parseInt(quantityInput, 10);

const total = price * quantity;

console.log("Total: $" + total.toFixed(2));

Common Mistakes With Type Conversion

  • Forgetting that values from form inputs and prompt() are always strings.
  • Using parseInt() without a radix argument.
  • Relying on == instead of ===.
  • Assuming empty arrays and objects are falsy (they are truthy).
  • Not checking for NaN after a conversion that might fail.

Best Practices for Type Conversion

  • Prefer explicit conversion (Number(), String(), Boolean()) over implicit coercion.
  • Always provide a radix of 10 with parseInt(): parseInt(value, 10).
  • Use Number.isNaN() to safely detect failed numeric conversions.
  • Validate and convert user input as early as possible.
  • Prefer strict equality (===) to avoid hidden coercion.

Quick Summary

  • Type conversion changes a value from one data type to another.
  • Implicit conversion happens automatically; explicit conversion is intentional.
  • String(), Number(), and Boolean() are the main explicit converters.
  • parseInt() and parseFloat() extract numbers from the start of a string.
  • Only a short list of values is falsy; empty arrays and objects are truthy.

Try It Yourself

Modify the input string below and compare how Number(), parseInt(), and Boolean() each handle it.

let input = "42px";

console.log(Number(input));
console.log(parseInt(input, 10));
console.log(Boolean(input));
Tip: When you’re unsure how a value will be converted, convert it explicitly yourself. It removes the guesswork and makes your code’s behavior predictable.

Understanding type conversion is essential before moving on to conditionals, loops, functions, and more advanced JavaScript concepts.

🧪 Test Your JavaScript Code

Edit the code on the left and click “Run Code” to see the console output on the right.

📝 JavaScript Code
👁 Console Output

Click “Run Code” to see the output here.

Ctrl + Enter to run code Esc to close