**JavaScript numbers** can be roughly grouped as **regular and BigInt numbers** in modern JavaScript.

Regular js numbers are the commonly used numbers, while the BigInt numbers represent arbitrary-length integers.

**A JavaScript number has no special syntax** and is written with or without decimals. You can write them straight into JavaScript and perform mathematical operations.

This write-up lays bare the details of numbers in JavaScript. You’ll learn the details of different numbers and how to add numbers in JavaScript.

## JavaScript Numbers: What Do They Represent?

A JavaScript type number is simply a primitive data type generated from literals. They are for negative and positive integers, binary, octal, long, short, floating-point, etc.

*Example:*

**let a = 456;**

To define the numbers are objects, use keyword “**new**”

**let b = new Number(456);**

Here is a simple example:

**let a = 123;**

**let b = new Number(456);**

**// typeof a returns number**

**// typeof b returns object**

Nevertheless, creating number objects **slows down JavaScript code execution speed**. The keyword “new” complicates the entire code and can produce unintended results.

When you use the operator, **==** equal numbers are equal. However, when you use the operator, **===**, equal numbers **are not equal**. The **=== expects equality in both value and type**. Also, objects cannot be compared.

**(x==y) and** **(x===y)** **differ significantly** – when you compare two JavaScript objects, it always returns False.

## Regular JavaScript Numbers

These are numbers stored in 64-bit format. This format is better known as the **double-precision floating-point numbers**, and it follows the IEEE-754 international standards.

The numbers are:

- Fractions/numbers (value) – 0 to 51
- Exponent – 52 – 62
- Sign – 63

The first number character must be an integer – don’t place it in quotes.

**Decimals and fractions:** to present a fraction, use the division operator “**/,**” and the result will be decimals. Remember, **JavaScript does not distinguish between decimals and whole numbers**.

### – Integers

**An integer is a number without a period**, and JavaScript number precision in integers is up to 15 digits. Integer values can be positive or negative. Values beyond 16 digits are usually changed.

JavaScript precisely presents integer numbers between -(253 -1) and 253 +1. Integer numbers beyond this threshold cannot be defined.

However, **integer division means 1 / 2 = 1**, which may not suit all coding uses.

### – Floating-Point Numbers

A **floating-point number** is a **fixed number with a decimal point** – 0, 4.14, 6.52, and -135.5. JavaScript number precision in floating-point numbers is **up to 17 decimal places**. Since it covers multiple numbers, arithmetic operations in JavaScript are not always accurate.

Division, multiplication, and modulus operations **always output a number,** unlike addition and subtraction. If decimal numbers have different absolute values, **you lose precision with subtraction and addition**. The + operator concatenates if any single value is a literal string.

Binary fractions represent floating-point numbers. Sadly, **it is impossible to represent most decimal fractions** precisely as binary fractions. Binary floating-point numbers stored in the machine approximate the decimal floating-point numbers you enter. That’s why the floating-point arithmetic is NOT 100% accurate.

## Binary, Hexadecimal, Octal, and Exponential Numbers

**Binary (base 2) numbers** start with 0B or 0b, followed by 1 or 0.

**Hexadecimal (base 16) numbers** start with zero (0) followed by either upper or lower case X – 0x or 0X

**Octal numbers (base 8)** start with zero (0) and are followed by either a lower case or upper case O – 0o or 0O

**Exponential numbers** must follow the beN format. The b stands for the base integer/float number while e is char and N is an exponential power number.

Note that** JavaScript, by default, displays numbers as base 10 decimals**. Again, avoid writing numbers in JavaScript with a leading zero, e.g., 02. Some versions interpret numbers as octal when they have a leading zero.

But with the toString() method, you can output numbers from base 2 to base 36.

## JavaScript Numbers: The BigInt Values

**BigInt**, also known as **BigInt value**, is a **built-in numeric primitive** whose constructor returns BigInt. Its function is to store whole numbers larger than 253 – 1, i.e., it holds integers with arbitrary precision.

**Use the BigInt for integers with more than 15 digits**. To create BigInt, append n to the end of an integer literal. Alternatively, call BigInt() constructor (devoid of the new operator) and give it a string value integer value.

In some ways, the **BigInt values** are similar to Number values. But the difference is you cannot use the BigInt value with methods in the built-in Math object. Besides, you cannot mix it with a Number value in operations. In this case, you must coerce them to the same type. However, coercing values might lead to losing a BigInt value precision.

### – BigInt Operators

The operators that can work with BigInt values and **object-wrapped BigInt values are**:

**+ * – % ****

Also, it supports **all bitwise operators except >>>** because each BigInt value is signed. Nonetheless, it does not support the unary operator (**+**) so as not to break **asm.js**.

The operator** /** works with whole numbers. However, operations with fractions, as a result, will be truncated when used with a BigInt value. They will not return fractional digits.

### – BigInt Comparisons

**BigInt** values are not strictly equal to Number values:

**0n == 0 // true**

**0n === 0 // false**

Comparisons (<, >) work with both bigints and numbers

## How to Add Numbers in JavaScript

JavaScript is loosely typed, unlike C#. Therefore, **you can assign any data type to a variable** without giving it a specific type. That makes adding numbers in JavaScript easy.

Both addition (for numbers) and concatenation (for strings) **use the + operator.** Adding two numbers results in a number. When you add two strings, you get a string concatenation.

If you add a string and a number, **you get a string concatenation**. That also applies to adding a number and a string.

### – Adding Numbers in JavaScript: Basic Addition

**To add numbers in JavaScript, use the operator +**. First, assign values to variables, and second, add them together.

For example:

**Let**

**x = 2, y = 4, and z = x + y**

(=) is the assignment operator. So, = assigns the value 2 to x, 4 to y, and 6 to z (2 + 4)

The **+ (addition)** operator adds the numbers.

### – Floating-Point Addition

**Floating-point numbers have decimals**. JavaScript usually retains a decimal place during additions. For example:

**Let a = 1.324; b = 8.4; c = a + b;**

JavaScript outputs 9.724 in the c variable. You can specify the decimal places you want with the “**toFixed**” function.

*The syntax:*

**c = (a+b).toFixed();**

### – Adding Text Data

Here, the JavaScript add number process simply sums the values entered in text boxes – **text boxes contain strings**.

**a = “Cows” + “Goats”;**

The a variable has **CowsGoats.** Use the same approach when you have numbers in textboxes. **But first ID them**. For instance: **Textbox a and textbox b**

**a = document.getElementById(a).value; b = document.getElementById(b).value; c = a + b**

Suppose the first textbox has 2 while the second one has 1; JavaScript does not add but appends. Thus, it stores output as 21 and not 3. To avoid this, use the Number () function.

**c = Number(a) + Number(b);**

## Math.round Method: How Precise Is It?

**To eliminate decimals or round numbers**, use the **Math.Round** method. This method works on all browsers. It rounds numbers to the next integer when the result is 0.5+

**var x = 1.2 var y = 1.4; var z = Math.round(x+y);**

The result should be 2.6. However, when you apply the **Math.Round** method, JavaScript output to 3 and not 2.6.

## Number() Function in JavaScript

The Number() function is simply a constructor function that converts object arguments of other types to numbers. If the value is inconvertible to a legal number, **it returns NaN**; however, **if no statement is provided, it returns 0.**

*The syntax:*** Number(object)**

## NaN Output

**NaN** (**Not a Number**) is a reserved word in JavaScript – it shows that a** number is not legal.** For instance, if you perform arithmetic computations with a non-numeric string, the output will be **NaN**.

For example: **let x = 100 / “Oranges”; // ****x will be NaN (Not a Number)**

However, if the string has a numeric value , it results into a number:

For example: **let x = 100 / “20”; // x is 5**

You can determine whether a value is Not a Number by using the global JavaScript function isNaN():

Example:** let x = 100 / “Oranges”; isNaN(x); // returns tru**e**. x is Not a Number**

**Be careful with NaN**: if you use it in mathematical operation, it yields NaN, or the output might be a concatenation.

If you use a **typeof NaN,** it returns a number.

## Conclusion

In this article, we’ve learned that:

- JavaScript has two types of numbers – BigInt and Regular numbers
- JavaScript number types are double-precision 64-bit format
- Integers up to 15 digits are precise
- In Floating Point, number 17 is the maximum number of decimals but still not 100% accurate
- Js uses + for both addition (numbers) and concatenation (Strings)
- The number () function converts an object argument to a number representing the object’s value.
- NaN shows a number is not legal, and it occurs when you perform an arithmetic operation with a non-numeric string.

The JavaScript type number is a data type, usually primitive; it can be both negative and positive. This **primitive wrapper object** represents and manipulates different numbers such as 37, 42, or -23. The Number type can represent fractional values **but with some limitations.** Since its precision is only up to 17 decimal places, arithmetic is subject to rounding.

- CSS Hack: A Guide for Every Front Web Developer - November 30, 2021
- CSS Relative vs Absolute: Understanding These CSS Positioning Values - November 30, 2021
- Display Options CSS: Understanding and Using CSS Display Property - November 30, 2021