1. Introduction

In this guide, we will explore one of the fundamental aspects of JavaScript: arithmetic operators. JavaScript provides a rich set of arithmetic operators that allow you to perform numeric calculations with ease. Whether you need to add numbers, subtract quantities, multiply values, divide ratios, or find remainders, JavaScript has got you covered.

Throughout this guide, we will cover various arithmetic operators, including addition, subtraction, multiplication, division, modulo division, as well as concepts like operator precedence and handling special cases like NaN and Infinity.

2. The addition operator in JavaScript

The addition operator in JavaScript, denoted by the symbol "+", is a fundamental arithmetic operator that allows you to perform numeric calculations and concatenate strings. Let's dive into the syntax, usage, and examples to understand its functionality better.

2.1 Syntax and usage of the addition operator (+)

The syntax of the addition operator is quite straightforward. It is used to add numeric values or concatenate strings together. Here's how it works:


result = operand1 + operand2;

For string concatenation:


result = string1 + string2;

In both cases, the addition operator is represented by "+", and the operands can be either numeric values or strings.

2.2 Examples demonstrating addition of numbers

Let's explore some examples to see how the addition operator works with numeric values:

Example 1: Adding two numbers


let num1 = 5;
let num2 = 10;
let sum = num1 + num2;
console.log(sum);  // Output: 15

In this example, the addition operator is used to add num1 and num2 together, resulting in a sum of 15.

Example 2: Adding numbers with decimal points


let decimal1 = 3.14;
let decimal2 = 2.45;
let total = decimal1 + decimal2;
console.log(total);  // Output: 5.59

Here, the addition operator is used to add two decimal numbers, decimal1 and decimal2, resulting in a total of 5.59.

Example 3: Adding numbers stored as strings


let numString1 = "7";
let numString2 = "3";
let sumString = numString1 + numString2;
console.log(sumString);  // Output: "73"

Even if the operands are strings, the addition operator performs string concatenation rather than numeric addition. In this case, "7" and "3" are concatenated, resulting in the string "73".

2.3 String concatenation using the addition operator:

In addition to performing arithmetic operations with numbers, the addition operator can also concatenate strings together. Here's an example:

Example 4: Concatenating strings


let greeting = "Hello";
let name = "John";
let message = greeting + ", " + name + "! Welcome!";
console.log(message);  // Output: "Hello, John! Welcome!"

In this example, the addition operator concatenates the strings "Hello", ", ", "John", and "! Welcome!" to form the message "Hello, John! Welcome!".

3. The subtraction operator in JavaScript

The subtraction operator in JavaScript, represented by the symbol "-", allows you to subtract one numeric value from another. This operator is fundamental for performing mathematical calculations in your code. Let's delve into the syntax, usage, and examples to understand how it works.

3.1. Syntax and usage of the subtraction operator (-)

The syntax of the subtraction operator is quite simple. It is used to subtract one numeric value from another. Here's how it is written.


result = operand1 - operand2;

In this syntax, operand1 and operand2 are the numeric values you want to subtract. The subtraction operator, "-", is placed between the operands.

3.2. Examples showcasing subtraction of numbers

Let's explore a few examples to see the subtraction operator in action and understand how it subtracts numeric values.

Example 1: Subtracting two numbers


let num1 = 10;
let num2 = 5;
let difference = num1 - num2;
console.log(difference);  // Output: 5

In this example, the subtraction operator subtracts num2 from num1, resulting in a difference of 5.

Example 2: Subtracting decimal numbers:


let decimal1 = 7.5;
let decimal2 = 2.3;
let result = decimal1 - decimal2;
console.log(result);  // Output: 5.2

Here, the subtraction operator subtracts decimal2 from decimal1, resulting in a value of 5.2.

Example 3: Combining subtraction with variables


let initialAmount = 100;
let withdrawal = 25;
let remainingAmount = initialAmount - withdrawal;
console.log(remainingAmount);  // Output: 75

In this example, the subtraction operator is used to calculate the remaining amount after a withdrawal. It subtracts the withdrawal amount from the initialAmount, resulting in a remaining balance of 75.

Note: The subtraction operator is a fundamental arithmetic operator in JavaScript and is widely used in various mathematical calculations.

4. The multiplication operator in JavaScript

The multiplication operator in JavaScript, represented by the symbol "*", is a fundamental arithmetic operator that allows you to multiply numeric values together. It plays a crucial role in performing mathematical calculations within your code. Let's explore the syntax, usage, and examples to understand how it works.

4.1. Syntax and usage of the multiplication operator (*):


result = operand1 * operand2;

In this syntax, operand1 and operand2 represent the numeric values you want to multiply. The multiplication operator, "*", is placed between the operands.

4.2. Examples illustrating multiplication of numbers:

Example 1: Multiplying two numbers:


let num1 = 5;
let num2 = 3;
let product = num1 * num2;
console.log(product);  // Output: 15

In this example, the multiplication operator multiplies num1 by num2, resulting in a product of 15.

Example 2: Multiplying decimal numbers:


let decimal1 = 2.5;
let decimal2 = 1.5;
let result = decimal1 * decimal2;
console.log(result);  // Output: 3.75

Here, the multiplication operator calculates the product of decimal1 and decimal2, resulting in a value of 3.75.

Example 3: Combining multiplication with variables:


let quantity = 4;
let pricePerUnit = 10;
let totalCost = quantity * pricePerUnit;
console.log(totalCost);  // Output: 40

In this example, the multiplication operator is used to find the total cost by multiplying the quantity by the pricePerUnit. The result is a total cost of 40.

5. The division operator in JavaScript

The division operator in JavaScript, denoted by the symbol "/", is a fundamental arithmetic operator that allows you to divide numeric values. It enables you to perform precise calculations involving ratios, proportions, and sharing of quantities. Let's explore the syntax, usage, and examples to understand how it works.

5.1. Syntax and usage of the division operator (/):


result = dividend / divisor;

In this syntax, the dividend represents the value to be divided, and the divisor represents the value by which the division is performed. The division operator, "/", is placed between the dividend and the divisor.

5.2. Examples demonstrating division of numbers:

Example 1: Dividing two numbers:


let dividend = 15;
let divisor = 3;
let quotient = dividend / divisor;
console.log(quotient);  // Output: 5

In this example, the division operator divides the dividend by the divisor, resulting in a quotient of 5.

Example 2: Dividing decimal numbers:


let dividend = 8.5;
let divisor = 2.5;
let result = dividend / divisor;
console.log(result);  // Output: 3.4

Here, the division operator calculates the quotient of dividend divided by divisor, resulting in a value of 3.4.

Example 3: Combining division with variables:


let totalQuantity = 12;
let groups = 3;
let quantityPerGroup = totalQuantity / groups;
console.log(quantityPerGroup);  // Output: 4

In this example, the division operator is used to find the quantity per group by dividing the totalQuantity by the groups. The result is a quantity of 4 per group.

5.3. Handling division by zero and potential issues:

Example 4: Handling division by zero:


let dividend = 10;
let divisor = 0;
if (divisor !== 0) {
  let quotient = dividend / divisor;
  console.log(quotient);
} else {
  console.log("Error: Division by zero.");
}

In this example, a check is performed to ensure the divisor is not zero before attempting division. If the divisor is zero, an error message is displayed to handle the division by zero scenario gracefully.

note: Remember to handle division by zero cases appropriately to ensure the reliability and accuracy of your code.

6. The modulo operator

The modulo operator, represented by the symbol "%", is a mathematical operator in JavaScript that calculates the remainder of a division operation. It is a handy tool when you need to determine whether a number is divisible by another or when you want to cycle through a set of values. Let's explore the syntax, usage, and examples to understand how it works.

6.1. Syntax and usage of the modulo operator (%):


result = dividend % divisor;

In this syntax, the dividend represents the number being divided, and the divisor represents the number that divides the dividend. The modulo operator, "%", is placed between the dividend and the divisor.

6.2. Examples showcasing modulo operation for finding remainders:

Example 1: Finding the remainder of a division operation:


let dividend = 17;
let divisor = 5;
let remainder = dividend % divisor;
console.log(remainder);  // Output: 2

In this example, the modulo operator calculates the remainder of dividing dividend by divisor. The result is a remainder of 2.

Example 2: Checking for divisibility:


let number = 24;
let divisor = 8;
let isDivisible = number % divisor === 0;
console.log(isDivisible);  // Output: true

Here, the modulo operator is used to check whether number is divisible by divisor. If the remainder is zero, it means the number is evenly divisible. In this case, the result is true.

Example 3: Cycling through a set of values:


let index = 9;
let numValues = 4;
let cycleIndex = index % numValues;
console.log(cycleIndex);  // Output: 1

In this example, the modulo operator is employed to cycle through a set of values. By taking the remainder of dividing index by numValues, we obtain a cyclic index that wraps around the range. Here, the result is 1, indicating the second value in the cycle.

Note: The modulo operator is a versatile tool for various scenarios. It can be used to find remainders, check for divisibility, perform cyclic operations, and more.

7. The exponentiation operator in JavaScript

The exponentiation operator in JavaScript, represented by the symbol "**", is a powerful mathematical operator that allows you to raise a base number to a given exponent. It simplifies complex calculations and is especially useful when working with powers and exponential growth. Let's explore the syntax, usage, and examples to understand how it works.

7.1. Syntax and usage of the exponentiation operator (**):


result = base ** exponent;

In this syntax, the base represents the number to be raised, and the exponent represents the power to which the base is raised. The exponentiation operator, "**", is placed between the base and the exponent.

7.2. Examples demonstrating exponentiation of numbers:

Example 1: Raising a number to an exponent:


let base = 2;
let exponent = 3;
let result = base ** exponent;
console.log(result);  // Output: 8

In this example, the exponentiation operator raises the base number 2 to the power of 3, resulting in a value of 8.

Example 2: Using decimal exponents:


let base = 3;
let exponent = 0.5;
let result = base ** exponent;
console.log(result);  // Output: 1.7320508075688772

Here, the exponentiation operator is used with a decimal exponent. It raises the base number 3 to the power of 0.5, resulting in a value of approximately 1.7320508075688772.

Example 3: Combining exponentiation with variables:


let base = 5;
let exponent = 2;
let squared = base ** exponent;
let cube = base ** 3;
console.log(squared);  // Output: 25
console.log(cube);  // Output: 125

In this example, the exponentiation operator is used to calculate both the square and the cube of the base number. The result of raising 5 to the power of 2 is 25, while raising it to the power of 3 yields 125.

8. Order of operations

When you work with arithmetic operations in JavaScript, it's essential to understand the order of operations, also known as operator precedence. This determines the sequence in which different arithmetic operators are evaluated. It ensures that calculations are performed accurately and consistently. Let's explore how operator precedence works and how parentheses can be used to control the order of operations.

8.1. Understanding the precedence of arithmetic operators:


1. Parentheses: Operations within parentheses are evaluated first.
2. Exponentiation (**): Exponentiation takes precedence over other operations.
3. Multiplication (*) and division (/): These operations are evaluated from left to right.
4. Addition (+) and subtraction (-): These operations are evaluated from left to right.

8.2. Using parentheses to control the order of operations:

Parentheses play a crucial role in controlling the order of operations. They allow you to explicitly specify which calculations should be performed first. Here are some examples:

Example 1: Controlling addition and multiplication operations:


let result = 2 + 3 * 4;
console.log(result);  // Output: 14

In this example, without parentheses, the multiplication operation is performed first due to its higher precedence, resulting in 3 * 4 = 12. Then, the addition operation is executed: 2 + 12 = 14.

Example 2: Using parentheses to prioritize addition:


let result = (2 + 3) * 4;
console.log(result);  // Output: 20

Here, the parentheses group the addition operation, indicating that it should be evaluated first. The addition of 2 + 3 results in 5. Then, the multiplication operation of 5 * 4 is executed, resulting in a final value of 20.

Example 3: Nested parentheses for precise calculations:


let result = ((2 + 3) * 4) / (7 - 2);
console.log(result);  // Output: 2

In this example, nested parentheses are used to control the order of operations more precisely. The inner parentheses evaluate 2 + 3 as 5. Then, the multiplication of 5 * 4 is performed, resulting in 20. Finally, the division of 20 by the subtraction of 7 - 2 gives the final result of 2.

9. The increment and decrement operators in JavaScript

The increment and decrement operators in JavaScript, represented by "++" and "--" respectively, are powerful tools for modifying and manipulating numeric values. They allow you to increment or decrement a value by 1, providing convenience and flexibility in various scenarios. Let's explore the syntax, usage, and effects of these operators.

9.1. Syntax and usage of the increment (++) and decrement (--) operators:


++operand;
--operand;


operand++;
operand--;

In both cases, the operand represents the variable or value you want to modify. The increment operator "++" increases the value by 1, while the decrement operator "--" decreases it by 1.

9.2. Pre-increment vs. post-increment and their effects:

Example 1: Pre-increment and post-increment:


let num = 5;
let preIncrement = ++num;
let postIncrement = num++;
console.log(preIncrement);    // Output: 6
console.log(postIncrement);   // Output: 6
console.log(num);             // Output: 7

In this example, with pre-increment (++num), the value of "num" is incremented by 1 before the assignment, resulting in a value of 6. With post-increment (num++), the assignment occurs first, and the value is incremented afterward, so "postIncrement" holds the original value of 6, and "num" becomes 7 after the operation.

Example 2: Pre-decrement and post-decrement:


let num = 10;
let preDecrement = --num;
let postDecrement = num--;
console.log(preDecrement);    // Output: 9
console.log(postDecrement);   // Output: 9
console.log(num);             // Output: 8

In this case, pre-decrement (--num) reduces the value of "num" by 1 before the assignment, resulting in a value of 9. With post-decrement (num--), the assignment occurs first, and the value is decremented afterward, so "postDecrement" holds the original value of 9, and "num" becomes 8 after the operation.

Example 3: Combining increments and decrements:


let count = 2;
let result = count++ + ++count - count-- + --count;
console.log(result);  // Output: 6
console.log(count);   // Output: 2

In this example, multiple increments and decrements are combined in a single expression. The calculation follows the order of operations and evaluates to a result of 6. After the calculation, "count" retains its original value of 2.

10. Assignment operators and shorthand notations in JavaScript

Assignment operators and shorthand notations in JavaScript provide concise and efficient ways to perform arithmetic operations and update variable values. They enhance code readability and simplify complex calculations. Let's explore the compound assignment operators and shorthand notations in detail.

10.1. Compound assignment operators (+=, -=, *=, /=, %=):


// 1. Addition assignment (+=):
let num = 5;
num += 3;  // Equivalent to num = num + 3;
console.log(num);  // Output: 8

// 2. Subtraction assignment (-=):
let num = 10;
num -= 4;  // Equivalent to num = num - 4;
console.log(num);  // Output: 6

// 3. Multiplication assignment (*=):
let num = 3;
num *= 5;  // Equivalent to num = num * 5;
console.log(num);  // Output: 15

Similar to addition, subtraction, and multiplication, compound assignment operators exist for division (/=) and modulo division (%=) as well.

10.2. Shorthand notations for common arithmetic operations:


// 1. Increment (++)
let count = 5;
count++;  // Equivalent to count = count + 1;
console.log(count);  // Output: 6

// 2. Decrement (--)
let count = 10;
count--;  // Equivalent to count = count - 1;
console.log(count);  // Output: 9

// 3. Exponentiation (**=)
let base = 2;
base **= 3;  // Equivalent to base = base ** 3;
console.log(base);  // Output: 8

Shorthand notations provide concise alternatives to common arithmetic operations, making the code more readable and efficient.

11 . NaN (Not a Number) and Infinity are special values in JavaScript

NaN (Not a Number) and Infinity are special values in JavaScript that represent specific cases and error scenarios. Understanding how to handle these values is essential to ensure accurate calculations and prevent unexpected behaviors. Let's explore NaN and Infinity in more detail.

11.1. Introduction to NaN (Not a Number) and Infinity

11.1.1 NaN (Not a Number)

NaN is a value that represents an invalid or unrepresentable mathematical result. It is typically returned when an arithmetic operation or function fails to produce a meaningful numeric value. For example, dividing zero by zero or performing mathematical operations with non-numeric values can result in NaN.

11.1.2 Infinity

Infinity is a value that represents mathematical infinity. It is generated when a number exceeds the maximum numeric value that JavaScript can represent. It can also be produced by dividing a non-zero number by zero.

11.2. Handling special cases and error scenarios

Handling NaN and Infinity is crucial to ensure the reliability and accuracy of your code. Let's explore some strategies for dealing with these special cases and error scenarios:

Checking for NaN:


let result = someOperation();
if (isNaN(result)) {
  // Handle NaN case
  console.log("Result is not a valid number.");
} else {
  // Process valid result
  console.log("Result:", result);
}

If the result of an operation is NaN, you can handle it appropriately. For example, you can display an error message or perform an alternative calculation.

Handling Infinity:


let result = someOperation();
if (isFinite(result)) {
  // Process finite result
  console.log("Result:", result);
} else {
  if (result === Infinity) {
    // Handle positive infinity
    console.log("Result is infinity.");
  } else if (result === -Infinity) {
    // Handle negative infinity
    console.log("Result is negative infinity.");
  }
}

The isFinite() function allows you to check if a value is finite or not. If the result of an operation is finite, you can process it accordingly. However, if the result is Infinity or -Infinity, you can handle those cases separately.

Preventing NaN and Infinity:


let num1 = parseInt(prompt("Enter a number:"));
let num2 = parseInt(prompt("Enter another number:"));
if (isNaN(num1) || isNaN(num2)) {
  console.log("Invalid input. Please enter numeric values.");
} else {
  let result = num1 / num2;
  console.log("Result:", result);
}

In this example, the parseInt() function is used to convert user input into numeric values. If the input is not a valid number, NaN will be returned. By checking for NaN before performing the division operation, we can handle invalid inputs gracefully.

12. Exercise: Exploring JavaScript Arithmetic Operators

In this exercise, you will have the opportunity to practice and master your understanding of JavaScript arithmetic operators. You will work with various numeric calculations, utilizing different arithmetic operators to perform operations and obtain accurate results.

Instructions:

Task 1: Addition
- Declare two variables, num1 and num2, and assign them any numeric values of your choice.
- Use the addition operator to add num1 and num2.
- Display the result using console.log().
Task 2: Subtraction
- Declare two variables, num3 and num4, and assign them any numeric values of your choice.
- Use the subtraction operator to subtract num4 from num3.
- Display the result using console.log().
Task 3: Multiplication
- Declare two variables, num5 and num6, and assign them any numeric values of your choice.
- Use the multiplication operator to multiply num5 and num6.
- Display the result using console.log().
Task 4: Division
- Declare two variables, num7 and num8, and assign them any numeric values of your choice.
- Use the division operator to divide num7 by num8.
- Display the result using console.log().
13. Solution

Task 1: Addition
```
let num1 = 10;
let num2 = 5;
let sum = num1 + num2;
console.log("Addition:", sum);
```
Explanation: In this task, we declare two variables, num1 and num2, and assign them the values 10 and 5, respectively. Using the addition operator (+), we add num1 and num2 together and store the result in the variable sum. Finally, we display the result using console.log(). The expected output is the sum of 10 and 5, which is 15.

Task 2: Subtraction
```
let num3 = 15;
let num4 = 7;
let difference = num3 - num4;
console.log("Subtraction:", difference);
```
Explanation: In this task, we declare two variables, num3 and num4, and assign them the values 15 and 7, respectively. Using the subtraction operator (-), we subtract num4 from num3 and store the result in the variable difference. Finally, we display the result using console.log(). The expected output is the difference between 15 and 7, which is 8.

Task 3: Multiplication
```
let num5 = 8;
let num6 = 4;
let product = num5 * num6;
console.log("Multiplication:", product);
```
Explanation: In this task, we declare two variables, num5 and num6, and assign them the values 8 and 4, respectively. Using the multiplication operator (*), we multiply num5 and num6 together and store the result in the variable product. Finally, we display the result using console.log(). The expected output is the product of 8 and 4, which is 32.

Task 4: Division
```
let num7 = 20;
let num8 = 5;
let quotient = num7 / num8;
console.log("Division:", quotient);
```
Explanation: In this task, we declare two variables, num7 and num8, and assign them the values 20 and 5, respectively. Using the division operator (/), we divide num7 by num8 and store the result in the variable quotient. Finally, we display the result using console.log(). The expected output is the quotient of 20 divided by 5, which is 4.

14. Encouragement

Thank you for taking the time to read this guide! I hope you found it informative and helpful in deepening your understanding of JavaScript arithmetic operators.
In the end, I highly encourage you to continue your learning journey by exploring the next guideConditional Statements in JavaScript: Making Decisions in Your Code

Main menu

Pages

Exploring JavaScript Arithmetic Operators: Mastering Numeric Calculations