Start learning free

LESSON 15 OF 344 · VARIABLES

Type Conversion in JavaScript: String, Number and parseInt

Lesson Read the full explanation

In JavaScript, every value has a type: number, string, boolean, and so on. Sometimes you need to convert a value from one type to another. This is called type conversion.

Use these functions to convert between types:

String(x)      // converts x to a string
Number(x)      // converts x to a number
parseInt(x)    // converts x to an integer (drops decimals)
parseFloat(x)  // converts x to a float

Here are some examples:

let score = 42;
let scoreStr = String(score);        // "42"  (number → string)

let weight = 70.8;
let weightInt = parseInt(weight);    // 70    (float → integer, decimal dropped)

let count = "100";
let countInt = parseInt(count);      // 100   (string → integer)

Note that parseInt drops the decimal part - it does not round.

parseInt(9.99)  // → 9
parseInt(3.1)   // → 3

Assignment
Follow the Coding Tutorial and convert each variable to a different type!

Hint
Use String() and parseInt().

STEP 1 OF 3
    Ctrl + Enter to check

    JAVASCRIPT · VARIABLES

    Type Conversion in JavaScript, explained

    What type conversion is

    Every JavaScript value has a type: number, string, boolean, undefined, and so on. Type conversion means turning a value of one type into a value of another, for example the number 25 into the string "25", or the string "2024" into the number 2024.

    You need it whenever data arrives in the wrong form. Text typed into a form or read from a file is always a string, even if it looks like a number. Arithmetic works on numbers, and text output works on strings, so you convert on purpose instead of hoping JavaScript guesses right.

    The four conversion functions

    String(x)      // any value to a string
Number(x)      // any value to a number
parseInt(x)    // to an integer, reading digits from the start
parseFloat(x)  // to a number with decimals, reading from the start

    They look similar but behave differently on messy input. Here is what each one returns:

    console.log(String(25), String(true), String(null));   // 25 true null
console.log(Number("3.5"), Number(true), Number(null)); // 3.5 1 0
console.log(parseInt("3.7"), parseFloat("3.14abc"));    // 3 3.14

    Each of these calls returns a new value. The original variable keeps its old value and type, so you store the result in a new variable (or reassign the old one).

    String(x)

    String(x) works on every value, so it is the safe way to get text. String(25) is "25", and String([1, 2]) is "1,2". After the conversion, typeof reports "string", and the value joins with other text instead of adding.

    Number(x)

    Number(x) is strict. The whole string must look like a number, except for spaces at the ends. Number(" 12 ") is 12, but Number("42px") is NaN, which stands for "not a number". An empty string is a surprise: Number("") is 0.

    parseInt(x) and parseFloat(x)

    These two are forgiving. They read from the start of the string and stop at the first character that doesn't fit, so parseInt("42px") is 42. If the very first character doesn't fit, you get NaN: parseInt("abc") is NaN.

    parseInt keeps only the whole part. It truncates, which means it drops everything after the decimal point and never rounds:

    console.log(parseInt(9.99));   // 9
console.log(parseInt(3.1));    // 3
console.log(parseInt(-9.99));  // -9
console.log(Math.round(9.99)); // 10

    For negative numbers, truncating moves toward zero, so -9.99 becomes -9. If you want rounding, use Math.round. parseFloat keeps the decimals: parseFloat("3.14abc") is 3.14.

    Implicit conversion: when JavaScript converts for you

    JavaScript also converts values on its own when you mix types. The result can surprise you:

    console.log("5" + 1);  // 51
console.log("5" - 1);  // 4

    The + operator joins text when either side is a string, so 1 becomes "1" and the result is "51". The - operator only works on numbers, so "5" becomes 5. This is the main reason to convert explicitly: write Number("5") + 1 and the intent is clear.

    The exercise, step by step

    The starter code has three variables of different types:

    let age = 25;
let price = 9.99;
let year = "2024";

    The task is to add three new variables, each holding a converted copy of one of these.

    1. Turn age into a string. Declare ageStr with let and set it to String(age). It holds "25", a string, while age stays the number 25.
    2. Turn price into an integer. Declare priceInt as parseInt(price). The result is 9, because the decimal part is dropped, not rounded up to 10.
    3. Turn year into an integer. Declare yearInt as parseInt(year). The string "2024" becomes the number 2024.

    The solution in JavaScript

    let age = 25;
let price = 9.99;
let year = "2024";

let ageStr = String(age);
let priceInt = parseInt(price);
let yearInt = parseInt(year);

    Printing the types of the new variables confirms the conversions:

    console.log(ageStr, typeof ageStr);    // 25 string
console.log(priceInt, typeof priceInt); // 9 number
console.log(yearInt, typeof yearInt);   // 2024 number

    Note that ageStr prints the same as age. The difference only shows up in its type, and in how it behaves with operators such as +.

    Common mistakes

    • Expecting parseInt to round. parseInt(9.99) is 9. Use Math.round when you want 10.
    • Forgetting the result is new. Calling String(age) on a line by itself changes nothing. Assign the result to a variable.
    • Ignoring NaN. Converting text that isn't numeric gives NaN, and any arithmetic with it gives NaN again. NaN is also not equal to itself, so test for it with Number.isNaN(value).
    • Using parseInt on numbers when Math.trunc says it better. parseInt first turns its argument into a string, which can misfire on tiny numbers: parseInt(0.0000005) is 5. For a number that is already a number, Math.trunc(9.99) is the direct choice. In this lesson, parseInt(price) is what the tests expect, and it works for 9.99.
    • Comparing across types. "2024" === 2024 is false because the types differ. After parseInt(year) === 2024 it is true.

    Key takeaways

    • String(x) gives text, Number(x) gives a strict number, parseInt(x) and parseFloat(x) read leading digits.
    • parseInt drops the decimal part instead of rounding.
    • Conversions return new values and leave the original variable alone.
    • Convert on purpose: "5" + 1 is "51", but "5" - 1 is 4.
    Keep going with JavaScriptAbout 340 step-by-step lessons, from your first line of code to coding interviews. Free to start.
    Start learning free