JavaScript Numeric Separators: A Complete Tutorial with Examples

JavaScript Numeric Separators were introduced in ECMAScript 2021 (ES12) to make large numbers easier to read and understand by adding underscores (_) as separators. This is particularly useful when dealing with large numbers like credit card numbers, IDs, or any numerical values that involve a lot of digits. The numeric separator has no effect on the numeric value itself; it’s purely for readability.

1. Basic Usage of Numeric Separators

The numeric separator (_) can be inserted within numbers (integers, floating-point, hexadecimal, binary, or octal numbers) to improve readability. It cannot be placed at the beginning, end, or immediately before or after a decimal point.

Example 1: Using Numeric Separators with Large Numbers

let billion = 1_000_000_000;
console.log(billion); // Output: 1000000000

Explanation

The number 1_000_000_000 is easier to read compared to 1000000000 because of the underscores.
The underscores do not affect the numeric value; 1_000_000_000 is still interpreted as 1000000000.

2. Using Numeric Separators with Different Number Formats

Example 2: Floating-point Numbers

let price = 12_345.67_89;
console.log(price); // Output: 12345.6789

Explanation

You can use numeric separators in both the integer part (12_345) and the fractional part (67_89) of a floating-point number.
The output remains 12345.6789; the underscores are just for readability.

Example 3: Binary, Octal, and Hexadecimal Numbers

Numeric separators can also be used with binary (0b), octal (0o), and hexadecimal (0x) literals.

// Binary
let binaryNumber = 0b1010_1010_1010;
console.log(binaryNumber); // Output: 2730

// Octal
let octalNumber = 0o1234_5670;
console.log(octalNumber); // Output: 3422784

// Hexadecimal
let hexNumber = 0xAB_CD_EF_01;
console.log(hexNumber); // Output: 2882400001

Explanation

Binary: 0b1010_1010_1010 is equivalent to 0b101010101010.
Octal: 0o1234_5670 is equivalent to 0o12345670.
Hexadecimal: 0xAB_CD_EF_01 is equivalent to 0xABCDEF01.

3. Incorrect Usage of Numeric Separators

The numeric separator cannot be used in certain positions. Let's look at some incorrect usages that will cause syntax errors.

Example 4: Invalid Placements

// Invalid: Leading or trailing separator
// let number1 = _1000; // SyntaxError
// let number2 = 1000_; // SyntaxError

// Invalid: Consecutive separators
// let number3 = 1__000; // SyntaxError

// Invalid: Adjacent to the decimal point
// let number4 = 1000_.00; // SyntaxError
// let number5 = 1000._00; // SyntaxError

Explanation

You cannot place numeric separators at the beginning or end of a number (_1000, 1000_).
Consecutive separators (1__000) are not allowed.
Numeric separators cannot be directly adjacent to the decimal point (1000_.00 or 1000._00).

4. Real-world Use Cases

Numeric separators are especially useful in scenarios involving large numbers, like credit card numbers, population counts, or scientific values.

Example 5: Population Count

let worldPopulation = 7_800_000_000; // 7.8 billion
console.log(worldPopulation); // Output: 7800000000

Explanation

7_800_000_000 is much easier to read and understand as 7.8 billion compared to 7800000000.

Example 6: Currency Representation

let salary = 50_000.00;
console.log(`Your annual salary is $${salary}`); // Output: Your annual salary is $50000.00

Explanation

Using numeric separators in currency amounts like 50_000.00 makes the number more readable, especially in financial applications.

Example 7: Long Numbers for Identification

let creditCardNumber = 1234_5678_9012_3456;
console.log(creditCardNumber); // Output: 1234567890123456

Explanation

The credit card number is easier to read when separated into chunks (1234_5678_9012_3456), resembling the format commonly used on cards.

5. Working with Numeric Separators in JavaScript Operations

Numeric separators have no impact on numerical operations. JavaScript treats these numbers exactly the same as if there were no separators.

Example 8: Mathematical Operations

let largeNumber1 = 1_000_000;
let largeNumber2 = 2_500_000;

let sum = largeNumber1 + largeNumber2;
console.log(sum); // Output: 3500000

Explanation

The numeric separators do not interfere with the addition. The values are treated as normal numbers.

Summary

JavaScript numeric separators (_) make working with large numbers easier and improve code readability. Here’s a quick overview:

Correct Usage: Use numeric separators to improve readability of large numbers, floating-point numbers, binary, octal, and hexadecimal literals.
Incorrect Usage: Numeric separators cannot be at the beginning or end of a number, adjacent to a decimal point, or used consecutively.
No Impact on Operations: Numeric separators do not affect the numeric value; they are purely for the programmer’s convenience.

Key Points

Example Correct Usage:

1_000_000: One million.
3.1415_9265_3589: A readable representation of pi.
0xAB_CD_EF: A hexadecimal value.

Example Incorrect Usage:

_1000, 1000_, 1__000, 1000_.00: These will result in syntax errors.

By using numeric separators, you can make your JavaScript code involving large numbers more maintainable and easier to read.