Are Underlying Values Or Displayed Values Used In Calculations

Underlying vs. Displayed Value Calculator

This tool demonstrates the critical difference between underlying data and displayed data, showing why calculations must use the raw, underlying values to avoid errors.

Base Numeric Value

Enter any number. This is the raw, underlying value.

Percentage to Apply

Enter a percentage (e.g., 15 for 15%).

✅ Correct Calculation (Using Underlying Values)

This calculation uses the actual numbers you entered, which is the correct way to program calculations.

Formula: result = baseValue * (percentageValue / 100)

❌ Incorrect Calculation (Attempting to use Displayed Values)

This demonstrates what happens if code tries to calculate using the formatted text (like “$1,234.57”) that a user sees. This typically fails.

Attempted Code:

Result of Attempt:

NaN

What is the Difference Between Underlying and Displayed Values?

In computing and web development, the concept of “underlying vs. displayed values” is fundamental. It refers to the distinction between the raw data as it is stored in a variable or database and the formatted version of that data presented to a user. This concept is crucial for anyone wondering if are underlying values or displayed values used in calculations — the answer is always underlying values.

Underlying Value: This is the raw, pure data. For a number, it’s a floating-point or integer value (e.g., 1999.99). For a date, it might be a Unix timestamp (e.g., 1737897600). This is the value that should always be used for logic and mathematical operations.
Displayed Value: This is a human-readable string formatted for presentation. The number 1999.99 might be displayed as “$1,999.99” or “1.999,99 €”. The timestamp 1737897600 is displayed as “26/01/2026”. These formats are for visual appeal and clarity but are not suitable for direct calculation.

Confusing the two is a common source of bugs for new developers. For instance, trying to perform math on the string “$1,999.99” will result in an error or NaN (Not a Number) because the dollar sign and comma are not valid numeric characters.

Formula and Explanation for Calculations

The core principle is simple: always perform calculations on the raw, underlying numeric data before formatting the final result for display. The calculator above demonstrates this with a percentage calculation.

Correct Method (Using Underlying Values)

The formula to calculate a percentage of a number is:

Result = Base Value × (Percentage / 100)

In code, this translates to retrieving the direct numeric values from the input fields and then computing the result.

Incorrect Method (Using Displayed Values)

An incorrect approach would be to take the formatted strings and attempt to multiply them. JavaScript’s parseFloat() function, when it encounters a non-numeric character like a ‘$’ or ‘,’, will either stop parsing or return NaN.

For example: parseFloat("$1,234.57") results in NaN in modern JavaScript because it sees the ‘$’ first.

Table: Variable Representation
Variable	Meaning	Underlying Type	Displayed Type	Example
`baseValue`	The initial number	Number	Formatted String (Currency)	Underlying: `1234.5678`, Displayed: “$1,234.57”
`percentageValue`	The percentage to apply	Number	Formatted String (Percentage)	Underlying: `15`, Displayed: “15.0%”
`result`	The calculated outcome	Number	Formatted String (Currency)	Underlying: `185.18517`, Displayed: “$185.19”

Practical Examples

Example 1: Calculating a Sales Discount

Imagine an e-commerce site with a product priced at $49.99 and a 20% discount coupon.

Inputs (Underlying): Base Value = 49.99, Percentage = 20
Calculation: 49.99 * (20 / 100) = 9.998
Result (Displayed): The discount is “$10.00” (rounded). The final price is “$39.99”.

The system MUST use 49.99 for the calculation, not the displayed string “$49.99”. Check out our guide on data representation in web development for more info.

Example 2: Interest on a Savings Account

A bank account has a balance of €10,500.00 and earns 1.5% annual interest.

Inputs (Underlying): Base Value = 10500.00, Percentage = 1.5
Calculation: 10500.00 * (1.5 / 100) = 157.5
Result (Displayed): The annual interest earned is “€157.50”.

The backend system that performs this calculation works with the number 10500, never the formatted string with the euro symbol or comma. For more on this, see our article on how to handle currency and percentage calculations in javascript.

How to Use This Underlying vs. Displayed Value Calculator

This calculator is a live demonstration of why it’s essential to understand that are underlying values or displayed values used in calculations. Here’s how to use it to see the concept in action:

Enter a Base Value: Input any number into the “Base Numeric Value” field. This represents your raw data.
Enter a Percentage: Input a number into the “Percentage to Apply” field.
Observe the “Correct Calculation” block: This block shows the result of the calculation performed correctly using the numeric values you entered. The final result is then formatted as currency for display.
Observe the “Incorrect Calculation” block: This block shows what happens when code tries to use the *displayed* values. It takes the formatted currency string and tries to parse it, which results in `NaN` (Not a Number), effectively breaking the calculation.

The key takeaway is that the program stores `1234.5678` but shows you `”$1,234.57″`. All math must happen on `1234.5678`. Want to dive deeper? Read about data visualization.

Key Factors That Affect Data Handling

Several factors highlight the importance of separating underlying and displayed values:

Data Types: Programming languages have strict data types like Number and String. Mathematical operations can only be performed on numbers.
Localization: A number displayed as “1,234.56” in the US is “1.234,56” in Germany. Using the displayed value would break calculations for international users. The underlying value 1234.56 remains consistent.
Floating-Point Precision: Financial calculations should be handled with care to avoid floating-point inaccuracies. Often, it’s best to work with integers (e.g., cents) for calculations and only convert back to a decimal format for the final display.
Data Integrity: Storing values in their raw, numeric form ensures data integrity. Formatting should only be a concern for the “view” layer of an application.
Parsing Functions: Functions like parseFloat() and parseInt() are used to convert strings to numbers, but they have specific rules and can fail if the string contains non-numeric characters at the beginning.
User Input: When a user types “$500” into a form, the application’s first job is to strip the non-numeric characters and convert the input into an underlying numeric value (500) before processing it. Learn more about the difference between underlying and displayed values in programming here.

Frequently Asked Questions (FAQ)

1. Are underlying values or displayed values used in calculations?: Only underlying values (raw numbers) should ever be used in calculations. Displayed values (formatted strings like “$100.00”) are for presentation only and will cause errors if used in mathematical operations.
2. Why does my calculation result in NaN?: NaN (Not a Number) is the typical result when you try to perform a mathematical operation on a value that is not a number. For example, trying to calculate "$" + 100 or parseFloat("$1,234") will often lead to NaN.
3. How should I handle currency in JavaScript?: A common best practice is to handle money in its smallest unit (e.g., cents) as an integer to avoid floating-point precision issues. For example, store $19.99 as 1999. Perform all calculations with integers and then divide by 100 only for the final display.
4. What is parsing?: Parsing is the process of analyzing a string of characters (like user input) to convert it into another data type, such as a number or a date. For example, parsing the string “123” creates the number 123.
5. Can you get the underlying value from a formatted cell in Excel?: Yes. Even in spreadsheets, there is a distinction. A cell might display “$10.55”, but the underlying value used in formulas is 10.5485. Excel’s calculations are based on the more precise underlying value.
6. How do I get the number from a string like “€24.99”?: You need to clean the string by removing all non-numeric characters except for the decimal point. You can use regular expressions for this, for example: str.replace(/[^\d.-]/g, ''), and then use parseFloat() on the result.
7. Why is this concept so important for web developers?: Web developers constantly handle user input and data from APIs. Understanding this separation is critical for building robust applications that don’t break when presented with formatted data. It’s a key part of data representation in web development.
8. What’s the difference between data and value?: In this context, “data” can be thought of as the raw information (the underlying value), while the “value” could refer to either the underlying or displayed form. It’s more precise to use the terms “underlying value” and “displayed value.”