Work With Numbers in JavaScript I

In JavaScript, the Number type represents numeric data, such as integers (e.g., 42, -2) and floating-point numbers (e.g, 3.14, -0.1), both positive and negative, and special values like NaN, Infinity, or -Infinity.

It is used for performing arithmetic operations, calculations, and also for storing user-facing values representing quantities or measurements.

Writing number literals

In JavaScript, numbers can be written in 4 different forms called bases including: decimal, hexadecimal, binary, and octal.

Decimal numbers (base 10)

Decimal numbers use digits 0-9.

They are the most common number system as they are used in everyday arithmetic and most general-purpose programming tasks, such as counters, prices, measurements, and so on.

For example:

// Integer
const age = 34;

// Floating-point
const pi = 3.14;

Hexadecimal numbers (base 16)

Hexadecimal numbers use digits 0-9 and letters 'A-F' (or 'a-f') to represent values 0-15, and are prefixed with 0x.

They are commonly used in computing to represent data in a shorter and more readable format, such as binary data, memory addresses, color codes, and more.

For example:

// 255 in base 10
const value = 0xFF;

Octal numbers (base 8)

Octal numbers use digits 0-7 and are prefixed with 0o.

They are commonly used in legacy systems or applications where octal notation is a standard, such as file permissions in Unix/Linux systems.

For example:

// 496 in base 10
const value = 0o760;

Binary numbers (base 2)

Binary numbers use digits 0-1 and are prefixed with 0b.

They are commonly used to perform bitwise operations, or representing flags and binary states.

For example:

// 5 in base 10
const flags = 0b101;

Arithmetic operators

Here is the list of available arithmetic operators:

• +: the addition of two numbers.
• -: the subtraction of two numbers.
• *: the product of two numbers.
• /: the division of two numbers.
• %: the remainder of the division of two numbers.
• **: the exponentiation of two numbers.

Example

For example:

5 + 2    // 7
5 - 2    // 3
5 * 2    // 10
5 / 2    // 2.5
5 % 2    // 1
5 ** 2   // 25

Arithmetic operators precedence

In JavaScript, operator precedence determines the order in which operators are evaluated in an expression.

Operators with higher precedence are evaluated before operators with lower precedence.

If operators have the same precedence, their associativity determines the order of evaluation (left-to-right or right-to-left).

Here's the precedence of arithmetic operators and their associativity, from highest to lowest:

1. () is evaluated first, regardless of the precedence of the operators outside the parentheses.
2. ** is evaluated from right-to-left.
3. *, /, % are evaluated from left-to-right.
4. +, - are evaluated from left-to-right.

Example

In this example, (2 + 3) will be evaluated before * 4 because of the higher precedence of the parentheses:

(2 + 3) * 4
// 5 * 4
// 20

In this example, 3 ** 2 will be evaluated before 2 ** 3 because of the right-to-left evaluation of the ** operator:

2 ** 3 ** 2
// 2 ** 9
// 512

In this example, 3 * 2 will be evaluated before 10 + 3 because of the higher precedence of the * operator:

10 + 3 * 2
// 10 + 6
// 16

In this example, 5 + 2 will be evaluated before 2 - 1 because the + and - operators have the same precedence:

5 + 2 - 1
// 7 - 1
// 6

Arithmetic assignment operators

The arithmetic assignment operators are a combination of all arithmetic operators, such as +, -, *, /, %, and **, and the assignment operator =.

variable operator= value

They provide a shorthand way to update the value of a variable by performing a mathematical operation on it and then assign it the result, equivalent to this syntax.

variable = variable operator value

Example

Let's consider this script, that reassigns different values to the same variable n using all the available arithmetic assignment operators:

let n = 0;

n += 10;   // 10
n -= 1;    // 9
n *= 2;    // 18
n /= 3;    // 6
n %= 4;    // 2
n **= 5;   // 32

Increment and decrement operators

In programming, incrementing and decrementing respectively mean increasing and decreasing the numeric value of a variable by a predetermined step or unit.

In JavaScript, the increment ++ and decrement -- operators are shorthands used to increase and decrease the value of a variable by 1.

// Increment
variable++;
++variable;

// Decrement
variable--;
--variable;

If used postfix (variable++, variable--), the operator increments/decrements and returns the value before incrementing/decrementing.

If used prefix (++variable, --variable), the operator increments/decrements and returns the value after incrementing/decrementing.

Note: When using these operators, the result is automatically stored in the specified variable without the need to use the assignment operator =.

Example

Let's consider this script:

let i = 0;

console.log(i);

console.log(i++);

console.log(++i);

When executed, it will:

1. Output the current value of the i variable.
2. Output the current value of the i variable then increment it by 1.
3. Increment the current value of the i variable by 1 and output its value.

Which will produce this output:

0
0
2

Summary

Here's a summary of what you've learned in this lesson:

• Decimals are numbers in base 10 that use digits 0-9.
• Hexadecimals are numbers in base 16 prefixed with 0x that use digits 0-9 and letters A-F to represent values 0-15.
• Octals are numbers in base 8 prefixed with 0o that use digits 0-7.
• Binaries are numbers in base 2 prefixed with 0b that use digits 0-1.
• The increment operator ++ is used to increase the value of a variable by 1.
• The decrement operator -- is used to decrease the value of a variable by 1.