Skip to content

JavaScript Numbers

المعرفة:: JavaScript
الحالة:: ملاحظة_مؤرشفة
المراجع:: The Complete JavaScript Course 2022 From Zero to Expert, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt

How numbers work in JavaScript?

  • In JavaScript, all numbers are presented internally as floats. 
console.log(23 === 23.0); // true
  • Also, numbers are presented internally in 64-bits base 2 format. (always in binary, similar to PHP and Ruby)
  • The decimal.js library provides an arbitrary-precision Decimal type for JavaScript.
  • Floating point math. 
// Base 10 - 0 to 9. 1/10 = 0.1. 3/10 = 3.3333333  
// Binary base 2 - 0 1  
console.log(0.1 + 0.2); // 0.300000000000000004  
console.log(0.1 + 0.2 === 0.3); // false

Convert a string to number

// Conversion  
console.log(Number("23")); // 23  
console.log(+"23"); // 23

See Also: Type Conversion and Coercion

Parse number from a string

  • parseInt and parseFloat are global functions.
  • It’s preferred to use them from Number object.
  • It’s useful in situations like reading value from css without the unit. ^09d46f 
// parseInt(string, base)  
console.log(Number.parseInt("30px")); // 30  
console.log(Number.parseInt("e23")); // NaN  
console.log(Number.parseInt("30px", 10)); // 30  
console.log(Number.parseInt("e23", 10)); // NaN  
console.log(Number.parseFloat("2.5rem")); // 2.5  
console.log(Number.parseInt("2.5rem")); // 2  
// whitespace doesn't affect anything  
console.log(Number.parseInt("  2.5rem  ")); // 2  
console.log(Number.parseFloat("  2.5rem  ")); // 2.5  
// console.log(parseFloat('  2.5rem  ')); // also works

More: MDN.

Checking if value is NaN

console.log(Number.isNaN(20)); // false  
console.log(Number.isNaN("20")); // false  
console.log(Number.isNaN(+"20X")); // true  
console.log(Number.isNaN(23 / 0)); // true

Checking if value is number

console.log(Number.isFinite(20)); // true  
console.log(Number.isFinite("20")); // false  
console.log(Number.isFinite(+"20X")); // false  
console.log(Number.isFinite(23 / 0)); // false  
console.log(Number.isInteger(23)); // true  
console.log(Number.isInteger(23.0)); // true  
console.log(Number.isInteger(23 / 0)); // false

JavaScript Math Operations

Math Operators

Square Root

console.log(Math.sqrt(25)); // 5  
console.log(25 ** (1 / 2)); // 5

Cubic Root

console.log(8 ** (1 / 3)); // 2

Max Value

console.log(Math.max(5, 18, 23, 11, 2)); // 23  
console.log(Math.max(5, 18, "23", 11, 2)); // 23  
console.log(Math.max(5, 18, "23px", 11, 2)); // NaN

Minimum Value

console.log(Math.min(5, 18, 23, 11, 2)); // 2

PI

console.log(Math.PI * Number.parseFloat("10px") ** 2); // 314.1592653589793

Random

// Get random number from 1 to 6  
Math.trunc(Math.random() * 6) + 1; // This is not okay for negative numbers  
// Get random number from 1 to 20  
Math.floor(Math.random() * 20) + 1;  

// 0...1 -> 0...(max - min) -> min...max  
const randomInt = (min, max) => Math.floor(Math.random() * (max - min) + 1) + min;  
console.log(randomInt(10, 20));

Rounding Integers

All these methods does Type Coercion.

  • trunc returns the integer part of a number by removing any fractional digits.
  • round returns the value of a number rounded to the nearest integer.
  • ceil rounds a number up to the next largest integer.
  • floor returns largest integer less than or equal to a given number (rounds down). 
// Rounding integers  
console.log(Math.round(23.3)); // 23  
console.log(Math.round(23.9)); // 24  
console.log(Math.ceil(23.3)); // 24  
console.log(Math.ceil(23.9)); // 24  
console.log(Math.floor(23.3)); // 23  
console.log(Math.floor("23.9")); // 23  
console.log(Math.trunc(23.3)); // 23  
console.log(Math.trunc(-23.3)); // -23  
console.log(Math.floor(-23.3)); // -24

Rounding Decimals

  • toFixed formats a number using fixed-point notation, returns a string. 
// Rounding decimals  
console.log((2.7).toFixed(0)); // 3  
console.log((2.7).toFixed(3)); // 2.700  
console.log((2.345).toFixed(2)); // 2.35  
console.log(+(2.345).toFixed(2)); // 2.35

Remainder Operator

  • The remainder operator (%) returns the remainder left over when one operand is divided by a second operand.
  • It can be used for operations that needs to do something with the nth repeat. For example doing something every 2nd / 3rd / 5th time. 
console.log(5 % 2); // 1  
console.log(5 / 2); // 2.5 - 5 = 2 * 2 + 1  

console.log(8 % 3); // 2  
console.log(8 / 3); // 8 = 2 * 3 + 2  

// is even  
console.log(6 % 2); // 0  
console.log(6 / 2); // 3  
// is odd  
console.log(7 % 2); // 1  
console.log(7 / 2); // 3.5  

const isEven = n => n % 2 === 0;  
console.log(isEven(8)); // true  
console.log(isEven(23)); // false  
console.log(isEven(514)); // true

Numeric Separators

  • Introduced in ES2021.
  • Allows us for format numbers to be easily readable and understandable using underscore.
  • Underscore is only allowed between numbers.
  • Converting strings formatted with underscores to numbers won’t work well. 
// Numeric Separators  
// 287,460,000,000  
const diameter = 287_460_000_000;  
console.log(diameter); // 287460000000  
const price = 345_99;  
console.log(price); // 34599  
const transferFee1 = 15_00;  
const transferFee2 = 1_500;  
const PI = 3.14_15;  
console.log(PI); // 3.1415  
console.log(Number("230000")); // 230000  
console.log(Number("230_000")); // NaN  
console.log(parseInt("230_000")); // 230

BigInt

  • In JavaScript, numbers are represented internally as 64 bits, that means that there are exactly 64 ones or zeros to represent any given number, of these 64 bits only 53 are used to actually store the digits themselves while the rest are used for storing the position of the decimal point and the sign.
  • Number’s maximum safe integer in JavaScript is 2^53 - 1 (9 quadrillion). 
console.log(2 ** 53 - 1); // 9007199254740991  
const x = Number.MAX_SAFE_INTEGER + 1;  
const y = Number.MAX_SAFE_INTEGER + 2;  

console.log(Number.MAX_SAFE_INTEGER); // 9007199254740991  
console.log(x); // 9007199254740992  
console.log(x === y); // true
  • For larger integers BigInt should be used.
  • A BigInt value, is a primitive, created by appending n to the end of an integer literal, or by calling the BigInt() function (without the new operator) and giving it an integer value or string value. 
console.log(4838430248342043823408394839483204n); // 4838430248342043823408394839483204n  
console.log(BigInt(48384302));

Operations

  • BigInt values and normal Number values can’t be mixed. Except for the following cases. 
console.log(10000n + 10000n); // 20000n  
console.log(36286372637263726376237263726372632n * 10000000n); // 362863726372637263762372637263726320000000n  
// console.log(Math.sqrt(16n));  
const huge = 20289830237283728378237n;  
const num = 23;  
console.log(huge * num); // TypeError: Cannot mix BigInt and other types, use explicit conversions  
console.log(huge * BigInt(num));

Exceptions

  • Logical operators, like comparing BigInt with number.
  • String concatenations. 
console.log(20n > 15); // true  
console.log(20n === 20); // false  
console.log(typeof 20n); // bigint  
console.log(20n == "20"); // true  
console.log(huge + " is REALLY big!!!");

Divisions

  • The / operator works as expected with whole numbers — but operations with a fractional result will be truncated when used with a BigInt value — they won’t return any fractional digits. 
console.log(11n / 3n); // 3n  
console.log(10 / 3); // 3.33333333335

Numbers Internationalization

  • The Intl.NumberFormat object enables language-sensitive number formatting. It accepts options parameter for further customization. 
// new Intl.NumberFormat(locales, options)  

const num = 3884764.23;  
const options = {  
  style: 'currency',  
  unit: 'celsius',  
  currency: 'EUR',  
  // useGrouping: false,  
};  
console.log('US: ', new Intl.NumberFormat('en-US', options).format(num)); // US: €3,884,764.23  
console.log('Germany: ', new Intl.NumberFormat('de-DE', options).format(num)); // Germany: 3.884.764,23 €  
console.log('Syria: ', new Intl.NumberFormat('ar-SY', options).format(num)); // Syria: ٣٬٨٨٤٬٧٦٤٫٢٣ €

Formatting currencies

const formatCur = function (value, locale, currency) {  
  return new Intl.NumberFormat(locale, {  
    style: "currency",  
    currency: currency,  
  }).format(value);  
};
Last update : August 14, 2023
Created : August 23, 2022

Comments

Comments