Example
Assign values to variables and add them together:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Operators</h2>
<p>x = 5, y = 2, calculate z = x + y, and display z:</p>
<p id=”demo”></p>
<script>
let x = 5;
let y = 2;
let z = x + y;
document.getElementById(“demo”).innerHTML = z;
</script>
</body>
</html>
Result:
JavaScript Operators
x = 5, y = 2, calculate z = x + y, and display z:
7
The assignment operator (=) assigns a value to a variable.
Assignment
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Operators</h2>
<h3>The = Operator</h3>
<p id="demo"></p>
<script>
let x = 10;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Result:
JavaScript Operators
The = Operator
10
The addition operator (+) adds numbers:
Adding
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arithmetic</h2>
<h3>The + Operator</h3>
<p id="demo"></p>
<script>
let x = 5;
let y = 2;
let z = x + y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
Result:
JavaScript Arithmetic
The + Operator
7
The multiplication operator (*) multiplies numbers.
Multiplying
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arithmetic</h2>
<h3>The * Operator</h3>
<p id="demo"></p>
<script>
let x = 5;
let y = 2;
let z = x * y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
Result:
JavaScript Arithmetic
The * Operator
10
avaScript Arithmetic Operators
Arithmetic operators are used to perform arithmetic on numbers:
| Operator | Description |
|---|---|
| + | Addition |
| – | Subtraction |
| * | Multiplication |
| ** | Exponentiation (ES2016) |
| / | Division |
| % | Modulus (Division Remainder) |
| ++ | Increment |
| — | Decrement |
JavaScript Assignment Operators
Assignment operators assign values to JavaScript variables.
| Operator | Example | Same As |
|---|---|---|
| = | x = y | x = y |
| += | x += y | x = x + y |
| -= | x -= y | x = x – y |
| *= | x *= y | x = x * y |
| /= | x /= y | x = x / y |
| %= | x %= y | x = x % y |
| **= | x **= y | x = x ** y |
The addition assignment operator (+=) adds a value to a variable.
Assignment
<!DOCTYPE html>
<html>
<body>
<h2>The += Operator</h2>
<p id="demo"></p>
<script>
var x = 10;
x += 5;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Result:
The += Operator
15
Assignment operators are fully described in the JS Assignment chapter.
JavaScript String Operators
The + operator can also be used to add (concatenate) strings.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Operators</h2>
<p>The + operator concatenates (adds) strings.</p>
<p id="demo"></p>
<script>
let text1 = "John";
let text2 = "Doe";
let text3 = text1 + " " + text2;
document.getElementById("demo").innerHTML = text3;
</script>
</body>
</html>
Result:
JavaScript Operators
The + operator concatenates (adds) strings.
John Doe
The += assignment operator can also be used to add (concatenate) strings:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Operators</h2>
<p>The assignment operator += can concatenate strings.</p>
<p id="demo"></p>
<script>
let text1 = "What a very ";
text1 += "nice day";
document.getElementById("demo").innerHTML = text1;
</script>
</body>
</html>
Result:
JavaScript Operators
The assignment operator += can concatenate strings.
What a very nice day
Adding Strings and Numbers
Adding two numbers, will return the sum, but adding a number and a string will return a string:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Operators</h2>
<p>Adding a number and a string, returns a string.</p>
<p id="demo"></p>
<script>
let x = 5 + 5;
let y = "5" + 5;
let z = "Hello" + 5;
document.getElementById("demo").innerHTML =
x + "<br>" + y + "<br>" + z;
</script>
</body>
</html>
Result:
JavaScript Operators
Adding a number and a string, returns a string.
10
55
Hello5
If you add a number and a string, the result will be a string!
JavaScript Comparison Operators
| Operator | Description |
|---|---|
| == | equal to |
| === | equal value and equal type |
| != | not equal |
| !== | not equal value or not equal type |
| > | greater than |
| < | less than |
| >= | greater than or equal to |
| <= | less than or equal to |
| ? | ternary operator |
Comparison operators are fully described in the JS Comparisons chapter.
JavaScript Logical Operators
| Operator | Description |
|---|---|
| && | logical and |
| || | logical or |
| ! | logical not |
Logical operators are fully described in the JS Comparisons chapter.
JavaScript Type Operators
| Operator | Description |
|---|---|
| typeof | Returns the type of a variable |
| instanceof | Returns true if an object is an instance of an object type |
Type operators are fully described in the JS Type Conversion chapter.
JavaScript Bitwise Operators
Bit operators work on 32 bits numbers.Any numeric operand in the operation is converted into a 32 bit number. The result is converted back to a JavaScript number.
| Operator | Description | Example | Same as | Result | Decimal |
|---|---|---|---|---|---|
| & | AND | 5 & 1 | 0101 & 0001 | 0001 | 1 |
| | | OR | 5 | 1 | 0101 | 0001 | 0101 | 5 |
| ~ | NOT | ~ 5 | ~0101 | 1010 | 10 |
| ^ | XOR | 5 ^ 1 | 0101 ^ 0001 | 0100 | 4 |
| << | left shift | 5 << 1 | 0101 << 1 | 1010 | 10 |
| >> | right shift | 5 >> 1 | 0101 >> 1 | 0010 | 2 |
| >>> | unsigned right shift | 5 >>> 1 | 0101 >>> 1 | 0010 | 2 |
The examples above uses 4 bits unsigned examples. But JavaScript uses 32-bit signed numbers.
Because of this, in JavaScript, ~ 5 will not return 10. It will return -6.
~00000000000000000000000000000101 will return 11111111111111111111111111111010
Bitwise operators are fully described in the JS Bitwise chapter.