JavaScript Type Conversion

Type conversion is the process of changing a value from one data type to another. For example, converting a string "42" into the number 42, or converting a number 0 into the boolean false.

JavaScript handles type conversion in two ways: Implicit (Automatic) and Explicit (Manual).

Implicit Type Conversion (Type Coercion)

Implicit conversion happens automatically when JavaScript tries to perform an operation with mixed types. This can sometimes produce unexpected results.

// JavaScript automatically converts number to string when using +
let result = "The answer is " + 42;
console.log(result);         // The answer is 42
console.log(typeof result);  // string

// JavaScript converts string to number for math operations
let value = "10" - 5;
console.log(value);          // 5
console.log(typeof value);   // number

Common Coercion Surprises

console.log("5" + 3);     // "53" (number 3 becomes string, then concatenated)
console.log("5" - 3);     // 2  (string "5" becomes number for subtraction)
console.log("5" * "2");   // 10 (both strings converted to numbers)
console.log(true + 1);    // 2  (true becomes 1)
console.log(false + 1);   // 1  (false becomes 0)
console.log(null + 5);    // 5  (null becomes 0)

Implicit conversion makes JavaScript flexible, but understanding these rules prevents confusing bugs.

Explicit Type Conversion

Explicit conversion is done intentionally using built-in functions. This gives full control over how values are converted.

Converting to String

Any value can be converted to a string using String() or the .toString() method.

// Using String()
let num = 100;
let str = String(num);
console.log(str);          // "100"
console.log(typeof str);   // string

let bool = true;
console.log(String(bool)); // "true"

// Using .toString()
let score = 98;
console.log(score.toString());  // "98"

Converting to Number

Use Number(), parseInt(), or parseFloat() to convert values into numbers.

// Using Number()
console.log(Number("42"));      // 42
console.log(Number("3.14"));    // 3.14
console.log(Number(""));        // 0
console.log(Number("hello"));   // NaN (not a valid number)
console.log(Number(true));      // 1
console.log(Number(false));     // 0
console.log(Number(null));      // 0
console.log(Number(undefined)); // NaN

parseInt() — Extract Whole Number from String

console.log(parseInt("45px"));    // 45 (extracts the number, ignores "px")
console.log(parseInt("3.99"));    // 3  (removes decimal, gives only integer)
console.log(parseInt("abc"));     // NaN

parseFloat() — Extract Decimal Number from String

console.log(parseFloat("3.99"));    // 3.99
console.log(parseFloat("10.5em")); // 10.5 (extracts decimal, ignores "em")

Converting to Boolean

Use Boolean() to convert any value to true or false.

In JavaScript, some values are considered falsy (they become false) and everything else is truthy (becomes true).

Falsy values: 0, "" (empty string), null, undefined, NaN, false

console.log(Boolean(0));          // false
console.log(Boolean(""));         // false
console.log(Boolean(null));       // false
console.log(Boolean(undefined));  // false
console.log(Boolean(NaN));        // false

console.log(Boolean(1));          // true
console.log(Boolean("Hello"));    // true
console.log(Boolean([]));         // true (empty array is truthy!)
console.log(Boolean({}));         // true (empty object is truthy!)

Truthy vs Falsy Summary

Checking for NaN

NaN (Not a Number) is a special value that results from invalid numeric operations. It has one unique property — it is not equal to itself.

let invalid = Number("hello");
console.log(invalid);         // NaN
console.log(invalid === NaN); // false (NaN ≠ NaN)

// Use isNaN() to check for NaN
console.log(isNaN(invalid));  // true
console.log(isNaN(42));       // false

Practical Example — User Input Handling

User inputs from HTML forms always come as strings. Converting them is essential for calculations.

// Simulating user input (always a string)
let userInput = "250";

// Without conversion
console.log(userInput + 100);   // "250100" (string + number = string)

// With explicit conversion
let amount = Number(userInput);
console.log(amount + 100);      // 350 (now it's numeric addition)

// Check if input is a valid number before using it
if (!isNaN(amount)) {
  console.log("Valid amount:", amount);
} else {
  console.log("Please enter a valid number.");
}

Key Points to Remember

• Implicit conversion (coercion) happens automatically in mixed-type operations
• Use String() to explicitly convert any value to a string
• Use Number() to convert strings and booleans to numbers
• Use parseInt() for whole numbers and parseFloat() for decimals from strings
• Use Boolean() to find the truthy/falsy nature of any value
• The + operator with a string converts everything to a string — be careful
• Always validate and convert user form inputs before using them in calculations
• Use isNaN() to detect invalid number conversions