How to Resolve "TypeError: .toFixed is not a function" Error in JavaScript
The TypeError: ... .toFixed is not a function is a common error in JavaScript that occurs when you try to call the .toFixed() method on a value that is not a Number. This error is a clear signal that the variable you are working with is not the data type you expected it to be, most often because it is a String.
This guide will explain the fundamental reason this error happens, walk you through the most common scenarios where it occurs, and show you how to write "defensive" code to prevent it by properly converting and validating your data.
The Core Problem: .toFixed() is a Number Method
The .toFixed() method is a function that exists exclusively on JavaScript Number objects. Its purpose is to format a number into a string, keeping a specified number of decimal places.
The error is the JavaScript engine telling you, "You asked me to call the .toFixed() function, but the variable you gave me isn't a Number, so that function doesn't exist on it."
Example of problem:
// This is a string, not a number.
let notANumber = '123.45';
// PROBLEM: Strings do not have a `.toFixed()` method.
notANumber.toFixed(2);
Error Output:
Uncaught TypeError: notANumber.toFixed is not a function
Cause 1 (Most Common): The Variable is a String
This is the most frequent source of the error. Data from user input fields, API responses, or HTML attributes is always received as a string, even if it looks like a number.
Example of problem:
<input id="price-input" type="text" value="29.99">
let priceInput = document.getElementById('price-input');
let price = priceInput.value; // `price` is the string "29.99"
console.log(typeof price); // # Output: 'string'
// PROBLEM: `price` is a string, so this will throw the error.
let formattedPrice = price.toFixed(2);
Cause 2: The Variable is null or undefined
If your variable holds null or undefined, attempting to call any method on it will result in a TypeError. This can happen if a function fails to return a number or a DOM query finds no element.
Example of problem:
let myNumber = null;
// This will throw "TypeError: Cannot read properties of null (reading 'toFixed')"
myNumber.toFixed(2);
Solution: Convert to a Number Before Calling .toFixed()
To fix this, you must first explicitly convert the value to a Number. The global parseFloat() function is the best tool for this, as it can parse a string and return a floating-point number.
let priceString = '29.99';
// 1. Convert the string to a number first.
let priceNumber = parseFloat(priceString);
// 2. Now you can safely call `.toFixed()` on the number.
let formattedPrice = priceNumber.toFixed(2);
console.log(formattedPrice); // # Output: 29.99
This two-step process—parse, then format—is the fundamental solution.
A Best Practice: Creating a Safe Formatting Function
To write robust, "defensive" code, you should create a reusable function that can handle inputs that might not be valid numbers. This function should check the validity of the number after parsing it and before calling .toFixed().
/**
* Safely formats a value to a fixed number of decimal places.
* @param {*} value - The value to format (can be a string, number, etc.).
* @param {number} digits - The number of decimal places to keep.
* @returns {string} The formatted string, or a fallback (like 'N/A').
*/
function safeToFixed(value, digits) {
// 1. Attempt to convert the input to a number.
let num = parseFloat(value);
// 2. Check if the result is a valid number (not NaN).
if (isNaN(num)) {
return 'N/A'; // Or return an empty string, 0, etc.
}
// 3. If it's a valid number, call .toFixed().
return num.toFixed(digits);
}
// Example Usage:
console.log(safeToFixed('29.99123', 2)); // # Output: 29.99
console.log(safeToFixed(123, 2)); // # Output: 123.00
console.log(safeToFixed('not a number', 2)); // # Output: N/A (no error thrown)
console.log(safeToFixed(null, 2)); // # Output: N/A (no error thrown)
This function is a powerful and safe utility for any application that needs to format numeric data.
Conclusion
The TypeError: .toFixed is not a function is a clear indicator that you are trying to call a Number-specific method on a value of the wrong type.
To solve it, follow this checklist:
- Inspect the variable's type: Use
console.log(typeof myVar)to confirm that it is not aNumber. It is most likely aString. - Convert and Parse: Before calling
.toFixed(), always convert your value to a number usingparseFloat()orNumber(). - Validate: For robust code, check that the result of the conversion is not
NaNbefore you proceed to format it.