JavaScript arithmetic operators are used to perform mathematical calculations. The commonly used arithmetic operators in JavaScript include addition, subtraction, multiplication, division, modulo, increment, and decrement.
These operators can be used with variables, literal values, or a combination of both to perform a wide range of mathematical operations.
JavaScript supports the following standard arithmetic operators:
| Operator | Description | Example | Result |
|---|---|---|---|
| + | Addition | 2 + 3 | 5 |
| – | Subtraction | 5 - 2 | 3 |
| * | Multiplication | 2 * 3 | 6 |
| / | Division | 6 / 3 | 2 |
| % | Modulo | 7 % 3 | 1 |
| ++ | Increment | var x = 5; x++; | 6 |
| — | Decrement | var y = 10; y--; | 9 |
Note: JavaScript follows the standard order of operations when evaluating expressions, meaning that multiplication and division will be performed before addition and subtraction unless parentheses are used to change the order of operations.
JavaScript arithmetic operators examples
Simple example code for arithmetic operators to perform a calculation:
var num1 = 10;
var num2 = 5;
// Addition
var sum = num1 + num2;
console.log(sum); // Output: 15
// Subtraction
var difference = num1 - num2;
console.log(difference); // Output: 5
// Multiplication
var product = num1 * num2;
console.log(product); // Output: 50
// Division
var quotient = num1 / num2;
console.log(quotient); // Output: 2
// Modulo
var remainder = num1 % num2;
console.log(remainder); // Output: 0
// Increment
var count = 0;
count++;
console.log(count); // Output: 1
// Decrement
count--;
console.log(count); // Output: 0
If you want to use HTML and CSS to display the results of these calculations, you can do so by creating a simple web page that includes a heading and a list of the results.
<!DOCTYPE html>
<html>
<head>
<title>Arithmetic Operations</title>
<style>
/* Style the heading */
h1 {
font-size: 24px;
text-align: center;
}
/* Style the list */
ul {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
/* Style the list items */
li {
display: inline-block;
margin-right: 20px;
font-size: 18px;
}
</style>
</head>
<body>
<h1>Arithmetic Operations</h1>
<ul>
<li>Sum: <span id="sum"></span></li>
<li>Difference: <span id="difference"></span></li>
<li>Product: <span id="product"></span></li>
<li>Quotient: <span id="quotient"></span></li>
<li>Remainder: <span id="remainder"></span></li>
<li>Count: <span id="count"></span></li>
</ul>
<script>
// Set the values of num1 and num2
var num1 = 10;
var num2 = 5;
// Calculate the results
var sum = num1 + num2;
var difference = num1 - num2;
var product = num1 * num2;
var quotient = num1 / num2;
var remainder = num1 % num2;
var count = 0;
// Increment and decrement count
count++;
count--;
// Update the HTML with the results
document.getElementById("sum").innerHTML = sum;
document.getElementById("difference").innerHTML = difference;
document.getElementById("product").innerHTML = product;
document.getElementById("quotient").innerHTML = quotient;
document.getElementById("remainder").innerHTML = remainder;
document.getElementById("count").innerHTML = count;
</script>
</body>
</html>
Output:
- Addition (+): The addition operator is used to add two or more values together. For example,
2 + 3would result in5. - Subtraction (-): The subtraction operator is used to subtract one value from another. For example,
5 - 2would result in3. - Multiplication (*): The multiplication operator is used to multiply two or more values together. For example,
2 * 3would result in6. - Division (/): The division operator is used to divide one value by another. For example,
6 / 3would result in2. - Modulo (%): The modulo operator returns the remainder of a division operation. For example,
7 % 3would result in1, since 3 goes into 7 two times with a remainder of 1. - Increment (++): The increment operator is used to increase the value of a variable by 1. For example,
var x = 5; x++;would result inxhaving a value of6. - Decrement (–): The decrement operator is used to decrease the value of a variable by 1. For example,
var y = 10; y--;would result inyhaving a value of9.
Comment if you have any doubts or suggestions on this JS Operators topic.
Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version