JavaScript Number Methods

Numbers are fundamental in programming. JavaScript provides comprehensive methods for working with numeric data, from basic arithmetic to advanced mathematical operations.

🔢 What are Numbers in JavaScript?

JavaScript has one numeric type: Number. It represents both integers and floating-point numbers using double-precision 64-bit binary format (IEEE 754).

Number Characteristics:

Double-precision 64-bit floating point
Integers are accurate up to 15 digits
Maximum safe integer: 9,007,199,254,740,991
Special values: Infinity, -Infinity, NaN
Supports decimal, binary, octal, and hexadecimal

💡 Number Systems

// Decimal (base 10)
let decimal = 42;

// Binary (base 2) - prefix 0b
let binary = 0b101010; // 42

// Octal (base 8) - prefix 0o
let octal = 0o52; // 42

// Hexadecimal (base 16) - prefix 0x
let hex = 0x2A; // 42

// Scientific notation
let sci = 4.2e1; // 42

Special Number Values:

Infinity - Larger than any number
-Infinity - Smaller than any number
NaN - "Not a Number" (invalid operation)
±0 - Positive and negative zero

🔧 Number Creation and Properties

Explore different ways to create numbers and their built-in properties.

JavaScript Editor

// Number Creation and Properties
let num1 = 42; // Integer
let num2 = 3.14; // Float
let num3 = 1.5e6; // Scientific notation (1.5 × 10⁶)
let num4 = 0xff; // Hexadecimal (255)
let num5 = 0o377; // Octal (255)
let num6 = 0b11111111; // Binary (255)

console.log("Number 1:", num1);
console.log("Number 2:", num2);
console.log("Number 3:", num3);
console.log("Number 4 (hex):", num4);
console.log("Number 5 (octal):", num5);
console.log("Number 6 (binary):", num6);

// Special numbers
console.log("\nSpecial numbers:");
console.log("Infinity:", Infinity);
console.log("-Infinity:", -Infinity);
console.log("NaN (Not a Number):", NaN);

// Number properties
console.log("\nNumber properties:");
console.log("Max safe integer:", Number.MAX_SAFE_INTEGER);
console.log("Min safe integer:", Number.MIN_SAFE_INTEGER);
console.log("Max value:", Number.MAX_VALUE);
console.log("Min value:", Number.MIN_VALUE);
console.log("Positive infinity:", Number.POSITIVE_INFINITY);
console.log("Negative infinity:", Number.NEGATIVE_INFINITY);
console.log("NaN:", Number.NaN);

Number Systems

0b1010 // Binary
0o777  // Octal
0xFF   // Hex
1e6    // Scientific

Special Values

Infinity
-Infinity
NaN
±0

Number Properties

MAX_SAFE_INTEGER
MIN_SAFE_INTEGER
MAX_VALUE
MIN_VALUE

🔄 Number Conversion Methods

Convert between strings and numbers, and check for valid numbers.

JavaScript Editor

// Number Conversion Methods
// String to number
console.log("String to number conversions:");
console.log("parseInt('42'):", parseInt("42"));
console.log("parseInt('101', 2):", parseInt("101", 2)); // Binary to decimal
console.log("parseInt('ff', 16):", parseInt("ff", 16)); // Hex to decimal
console.log("parseFloat('3.14'):", parseFloat("3.14"));
console.log("Number('123'):", Number("123"));

// Handling invalid conversions
console.log("\nInvalid conversions:");
console.log("parseInt('abc'):", parseInt("abc")); // NaN
console.log("Number('123abc'):", Number("123abc")); // NaN
console.log("+ '123':", +"123"); // Unary plus operator
console.log("+ 'abc':", +"abc"); // NaN

// Checking numbers
console.log("\nNumber checking:");
console.log("isNaN(42):", isNaN(42)); // false
console.log("isNaN('abc'):", isNaN("abc")); // true
console.log("Number.isNaN(NaN):", Number.isNaN(NaN)); // true
console.log("Number.isNaN('abc'):", Number.isNaN("abc")); // false
console.log("isFinite(42):", isFinite(42)); // true
console.log("isFinite(Infinity):", isFinite(Infinity)); // false
console.log("Number.isFinite(42):", Number.isFinite(42)); // true

String to Number

parseInt() - Integer, specify base
parseFloat() - Floating point
Number() - Strict conversion
+ - Unary plus operator

Number Checking

isNaN() - Global (coerces)
Number.isNaN() - Strict
isFinite() - Global
Number.isFinite() - Strict

Type Checking

Number.isInteger()
Number.isSafeInteger()
typeof value === 'number'

✨ Number Formatting Methods

Format numbers for display with fixed decimals, precision, or exponential notation.

JavaScript Editor

// Number Formatting Methods
let number = 1234.5678;

// toFixed() - Fixed decimal places
console.log("toFixed():");
console.log(number.toFixed()); // "1235" (rounded)
console.log(number.toFixed(1)); // "1234.6"
console.log(number.toFixed(2)); // "1234.57"
console.log(number.toFixed(5)); // "1234.56780"

// toPrecision() - Total digits
console.log("\ntoPrecision():");
console.log(number.toPrecision()); // "1234.5678"
console.log(number.toPrecision(5)); // "1234.6"
console.log(number.toPrecision(2)); // "1.2e+3"

// toExponential() - Exponential notation
console.log("\ntoExponential():");
console.log(number.toExponential()); // "1.2345678e+3"
console.log(number.toExponential(2)); // "1.23e+3"
console.log(number.toExponential(5)); // "1.23457e+3"

// toString() - String representation
console.log("\ntoString():");
console.log(number.toString()); // "1234.5678"
console.log((10).toString(2)); // "1010" (binary)
console.log((255).toString(16)); // "ff" (hexadecimal)
console.log((255).toString(8)); // "377" (octal)

📌 Formatting Differences:

toFixed(n) - n digits after decimal, rounds
toPrecision(n) - n total digits, may use scientific notation
toExponential(n) - Scientific notation with n fractional digits
toString(radix) - String in specified base (2-36)
toLocaleString() - Locale-specific formatting

🧮 Math Object Methods

The Math object provides mathematical constants and functions.

JavaScript Editor

// Math Methods with Numbers
let num = -15.7;

// Absolute value
console.log("Math.abs(-15.7):", Math.abs(num)); // 15.7

// Rounding
console.log("\nRounding methods:");
console.log("Math.round(15.7):", Math.round(15.7)); // 16
console.log("Math.round(15.2):", Math.round(15.2)); // 15
console.log("Math.floor(15.7):", Math.floor(15.7)); // 15
console.log("Math.ceil(15.2):", Math.ceil(15.2)); // 16
console.log("Math.trunc(15.7):", Math.trunc(15.7)); // 15

// Min and Max
console.log("\nMin/Max:");
console.log("Math.min(5, 10, 1):", Math.min(5, 10, 1)); // 1
console.log("Math.max(5, 10, 1):", Math.max(5, 10, 1)); // 10

// Powers and roots
console.log("\nPowers and roots:");
console.log("Math.pow(2, 3):", Math.pow(2, 3)); // 8
console.log("2 ** 3:", 2 ** 3); // 8 (ES7 exponentiation)
console.log("Math.sqrt(16):", Math.sqrt(16)); // 4
console.log("Math.cbrt(27):", Math.cbrt(27)); // 3

// Random numbers
console.log("\nRandom numbers:");
console.log("Math.random():", Math.random()); // 0-1
console.log("Random 1-10:", Math.floor(Math.random() * 10) + 1);

// Trigonometric functions
console.log("\nTrigonometric:");
console.log("Math.PI:", Math.PI);
console.log("Math.sin(Math.PI/2):", Math.sin(Math.PI/2)); // 1
console.log("Math.cos(Math.PI):", Math.cos(Math.PI)); // -1

Common Math Methods:

Math.abs() - Absolute value
Math.round/floor/ceil/trunc() - Rounding
Math.min/max() - Min/Max values
Math.random() - Random number 0-1
Math.pow() / ** - Exponentiation

Math Constants:

Math.PI - π (3.14159...)
Math.E - Euler's number (2.718...)
Math.SQRT2 - √2 (1.414...)
Math.LN2 - Natural log of 2
Math.LOG2E - Log base 2 of E

🚀 BigInt (ES2020)

BigInt is a built-in object that provides a way to represent whole numbers larger than 2⁵³ - 1.

JavaScript Editor

// BigInt (ES2020)
// Regular integers have limits
console.log("Max safe integer:", Number.MAX_SAFE_INTEGER); // 9007199254740991

// Numbers beyond this are unsafe
let unsafe = 9007199254740992;
console.log("\nUnsafe calculation:");
console.log("9007199254740992 === 9007199254740993:", 
  9007199254740992 === 9007199254740993); // true! (wrong)

// BigInt to the rescue
let big1 = 9007199254740992n; // Note the 'n' suffix
let big2 = 9007199254740993n;
console.log("\nBigInt calculation:");
console.log("9007199254740992n === 9007199254740993n:", 
  big1 === big2); // false (correct)

// BigInt operations
console.log("\nBigInt operations:");
let bigA = 123456789012345678901234567890n;
let bigB = 987654321098765432109876543210n;

console.log("Addition:", bigA + bigB);
console.log("Multiplication:", bigA * 2n);
console.log("Division:", bigB / 2n);

// Cannot mix BigInt and regular numbers
// let mixed = bigA + 1; // Error!
let mixed = bigA + 1n; // OK

// Converting between types
console.log("\nConversions:");
let regular = Number(bigA); // May lose precision
let backToBig = BigInt(regular);
console.log("BigInt to Number:", regular);
console.log("Back to BigInt:", backToBig);

⚠️ BigInt Limitations:

Cannot mix with regular Numbers in operations
Cannot use with Math object methods
No decimal/fractional part
Division rounds toward zero
Not serializable to JSON by default
Slower than regular Numbers for small values

🎮 Number Practice Exercises

Implement the number manipulation functions below.

JavaScript Editor

💪 Additional Challenges:

Create a function to format numbers with commas (1,000,000)
Implement a factorial function using BigInt
Create a function to convert between number bases
Build a simple calculator with precision handling
Implement a function to find greatest common divisor (GCD)

📋 Quick Reference

Conversion:

parseInt(str, radix)
parseFloat(str)
Number(value)
+value (unary plus)
BigInt(value)

Formatting:

toFixed(digits)
toPrecision(precision)
toExponential(digits)
toString(radix)
toLocaleString()

← String Methods Date & Time →

JavaScript Tutorial

JavaScript Number Methods

🔢 What are Numbers in JavaScript?

Number Characteristics:

💡 Number Systems

Special Number Values:

🔧 Number Creation and Properties

Number Systems

Special Values

Number Properties

🔄 Number Conversion Methods

String to Number

Number Checking

Type Checking

✨ Number Formatting Methods

📌 Formatting Differences:

🧮 Math Object Methods

Common Math Methods:

Math Constants:

🚀 BigInt (ES2020)

⚠️ BigInt Limitations:

🎮 Number Practice Exercises

💪 Additional Challenges:

📋 Quick Reference

Conversion:

Formatting:

Explore Related Tools

Bootstrap 5 JavaScript Integration: Vanilla JS Components & Architecture

Bootstrap 5 Basic Template: Starter HTML Template & Project Setup Guide

Bootstrap 5 Placeholders: Skeleton Screens, Animations & Best Practices

Bootstrap 5 Visibility Utilities: Show, Hide & Responsive Display Guide

Bootstrap 5 Image Thumbnails: Styling, Borders & Responsive Examples

Bootstrap 5 Forms: Complete Guide to Controls, Layouts & Validation

Follow Us

Our Tools

Our Company

Special Tools