❮ Previous Next ❯

Number Conversion

  • This lesson covers converting values into numbers in JavaScript.

  • Introduction to Number Conversion in JavaScript

    In JavaScript, data often comes from:

    • User input (forms)

    • Prompt boxes

    • APIs

    • URL parameters

    Most of this data is received as strings, even when it looks like a number.

    To perform mathematical operations, we must convert these string values into numbers.

    JavaScript provides built-in functions for this purpose:

    • parseInt()

    • parseFloat()

    Why Number Conversion is Important

    Without proper conversion:

    • Calculations may give wrong results

    • String concatenation may occur instead of addition

    • Logical errors can appear in programs

Importance of Number Conversion

Prevents string concatenation and ensures correct mathematical operations 

// Without conversion (string concatenation happens)
let a = "10";
let b = "5";

console.log(a + b); // "105"

// With conversion (correct addition)
let num1 = Number(a);
let num2 = Number(b);

console.log(num1 + num2); // 15

  • Reason: Both values are strings.

    parseInt()

    What is parseInt() ?

    parseInt() is a JavaScript function used to convert a string into an integer number.

    It extracts the whole number part and ignores decimal values.

    Syntax of parseInt()

    parseInt(string, radix);

    • string → value to convert

    • radix (optional) → number system base (10 for decimal)

Convert String to Integer Using parseInt()

Extracts the integer part from a string and converts it into a number 

// Basic Example of parseInt()
let value = "123";
let result = parseInt(value);

console.log(result); // 123
console.log(typeof result); // number
  • Decimal String with parseInt()

Ignoring Decimal Values with parseInt()

Converts a decimal string to an integer by removing the fractional part 

let value = "45.89";
let result = parseInt(value);

console.log(result); // 45

  • Explanation:

    • Decimal part is ignored

    • Only integer portion is returned

Extract Numbers from Mixed Strings Using parseInt()

Converts a string with numbers and characters by extracting only the numeric part 

let value = "100px";
let result = parseInt(value);

console.log(result); // 100

  • Explanation:

    • Parsing stops when non-numeric character is found

parseInt Fails When String Starts with Characters

Returns NaN if the string does not begin with a number 

let value = "px100";
let result = parseInt(value);

console.log(result); // NaN

  • Reason:

    • Parsing starts from the beginning

    • First character is not a number

      Using Radix with parseInt()

      Radix specifies the base of the number system.

    Using Radix in parseInt for Number Conversion

    Converts a string into a number based on the specified base (radix) 

    // Binary (base 2) to decimal
let num = parseInt("1010", 2);

console.log(num); // 10
    • Common Radix Values
      RadixNumber System
      2Binary
      8Octal
      10Decimal
      16Hexadecimal

      parseFloat()

      What is parseFloat() ?

      parseFloat() is used to convert a string into a floating-point (decimal) number.

      Unlike parseInt(), it keeps the decimal part.

      Syntax of parseFloat()

      parseFloat(string);

    Convert Strings to Decimal Numbers Using parseFloat()

    Extracts and converts numeric values including decimals from strings 

    // Basic Example
let value1 = "12.75";
let result1 = parseFloat(value1);
console.log(result1); // 12.75

// Integer String
let value2 = "50";
let result2 = parseFloat(value2);
console.log(result2); // 50

// String with Units
let value3 = "99.99kg";
let result3 = parseFloat(value3);
console.log(result3); // 99.99

    • Explanation:

      • Stops parsing when invalid character appears

      • Keeps decimal values

    parseFloat Returns NaN for Invalid Starting Characters

    Fails to convert when the string does not begin with a numeric value 

    let value = "kg99.99";
let result = parseFloat(value);

console.log(result); // NaN

    • NaN (Not a Number)

      If conversion fails, JavaScript returns NaN.

    Understanding NaN

    Shows that invalid number conversions result in NaN (Not a Number) 

    let value = "hello";

console.log(parseInt(value)); // NaN
    • parseInt() vs parseFloat()
      FeatureparseInt()parseFloat()
      Output typeIntegerDecimal
      Decimal handlingRemoves decimalsKeeps decimals
      Stops at textYesYes
      Radix supportYesNo
      Use caseWhole numbersDecimal numbers

      Real-Life Use Cases

      • Reading age from input field → parseInt()

      • Reading price, salary, percentage → parseFloat()

      • Converting CSS values (px) → both

      • Processing API numeric strings

      Common Beginner Mistakes

      • Forgetting to convert strings to numbers

      • Using + without conversion

      • Not handling NaN

      • Confusing parseInt() and parseFloat()

      Best Practices

      • Use parseInt() for whole numbers

      • Use parseFloat() for decimal values

      • Always validate converted values

      • Specify radix with parseInt()

      • Avoid unnecessary conversions

    ❮ Previous Next ❯