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"
+ operator prefers strings, so the number is turned into a string.- operator forces both sides to numbers.Number().String() deliberately creates a string.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());
String() works on any value and returns a string representation..toString() method that does the same job.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));
NaN.true becomes 1, false becomes 0.null becomes 0, undefined becomes NaN.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({}));
false."0", the string "false", empty arrays and empty objects all evaluate to true.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]));
"[object Object]".NaN.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)
"[object Object]".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));
parseFloat and parseInt(..., 10) turn them into real numbers.toFixed(2) produces a clean currency string.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
NaNafter a conversion that might fail.
Best Practices for Type Conversion
- Prefer explicit conversion (
Number(),String(),Boolean()) over implicit coercion. - Always provide a radix of
10withparseInt():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(), andBoolean()are the main explicit converters.parseInt()andparseFloat()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));
NaN because of the non-numeric characters.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.
Click “Run Code” to see the output here.
Code Explanation
The complete example stays visible. Use Previous and Next to move through its logical blocks.
Select Next to begin exploring the code.