Code has been added to clipboard!

JavaScript Operators Explained: Types, Syntax and Purpose

Reading time 5 min
Published Aug 8, 2017
Updated Oct 1, 2019

As the computer is a powerful calculator, it only understands the given commands in mathematical form - with numbers, arithmetic operators, and so on.

In this JavaScript operators tutorial, you'll learn about operators used in JavaScript. You'll see how similar writing equations in JavaScript is to your regular maths. However, it's also about understanding the logical functionality of the language.

JavaScript Operators: Main Tips

  • JavaScript consists of arithmetic, assignment, string, comparison and logical operators, as well as a conditional one.
  • Different JavaScript operators serve a different function in code.
  • You can use JavaScript operators to perform various calculations and comparisons in JavaScript.
  • Writing equations and operators are very similar to regular arithmetics.

Arithmetic Operators

One of the operator types is arithmetic operators. These operators are used to perform numeric calculations in JavaScript. You can find a list of JavaScript operators and their descriptions in a table below.

Operators Descriptions
+ Used for addition
- Used for subtraction
* Used for multiplication
** Used for exponentiation
/ Used for division
% Used for creating a modulus
++ Used for increment
-- Used for decrement

JavaScript addition +, subtraction -, multiplication *, and division / operators are used most often. Let's check a few examples of addition and multiplication.

Addition Operator

The + operator (addition) sums up the given numbers.

Example
var a = 3;
var b = 4;
var c = a + b;

Multiplication Operator

The * operator (multiplication) multiplies the numbers in JavaScript.

Example
var a = 3;
var b = 4;
var c = a * b;

Assignment Operators

JavaScript assignment operators assign particular values to the variables of JavaScript:

Operators Examples Matches Definitions
= a = b a = b Assigns a value to variable
+= a += b a = a + b Assigns and adds a value to a variable
-= a -= b a = a - b Assigns and subtracts a value from variable
*= a *= b a = a * b Assigns and multiplies a value of a variable
/= a /= b a = a / b Assigns and divides the value of a variable
%= a %= b a = a % b Assigns and adds modulus to the variable

Assignment Operator Example

In our example, the = operator (assignment) will be assigning values to variables:

Example
var a = 20;

Now here, JavaScript += operator (addition and assignment) will be adding values and then assigning them to the variable. While the previous example shows that var a is equal to 20, in this case, it becomes 30. Why? Because you add 10 to it.

Example
var a = 20;
a += 10; // a = a + 10 (a = 20 + 10)

String Operators

JavaScript variables can also have string values, not only numerical. The operator + can be used to concatenate strings as well as numbers. This is called JavaScript string concatenation:

Example
t1 = "Bob";
t2 = "Bonbon";
t3 = t1 + " " + t2;

To reduce the amount of typing, you can also use the operator += for JavaScript string concatenation. It depicts the same kind of result (but with different words, for the example's sake):

Example
t1 = "Hello it's me ";
t1 += "a friend!";

Adding Strings and Numbers

You know that when you sum up a couple of numbers, the result you'll see will be their sum. However, when summing up a string with a number, the result will be shown as a string, not an overall sum.

Example
a = 2 + 2;
b = "2" + 2;
c = "Hi" + 2;

Note: adding numbers to a string will turn out as a string.

Comparison and Logical Operators

JavaScript operators can also be used for comparison and logic. The table below shows the purpose of each JavaScript comparison and logical operator and how it can be used.

JavaScript comparison operators are used to determine the similarity and difference between different variables. For example, if you try to compare 5 and 3 with any of these operators, the browser will return either true or false, depending on what operator you're using.

The JavaScript conditional (ternary) operator selects a value based on a specified condition. It takes three operands. It is often used as a substitute for an if statement.

Comparison Operators

Operators Descriptions
== identical
=== identical value and identical type
!= different
!== different value or different type
> greater than
< less than
>= greater than or identical value
<= less than or identical value
? ternary operator

Comparison Operators Example

In the example below, you can see how you can use JavaScript comparison operators in your code:

Example
if (a == 1) {
  var greeting = "Hello World";
}

Conditional Operator Syntax

JavaScript conditional operator syntax is as follows. If a certain set condition is true, valueTrue is set as the variable value, if the condition is false, the variable value is set to valueFalse:

variable = condition ? valueTrue : valueFalse

Conditional Operator Example

In the example below, if age is lower than 18, variable adult will be assigned a value No. If the value of age is higher (and it is, because var age = 20;), the variable adult will be assigned a value Yes.

Example
var age = 20;
var adult = (age > 18) ? "Yes" : "No";

Logical Operators

While JavaScript comparison operators compare two variables, logical operators check the logic between JavaScript variables and values.
Logical operators return true or false, depending on the given information.

  • JavaScript AND operator returns true only if both statements are correct.
  • OR operator returns true if one or both statements are correct. Otherwise, it returns false.
  • NOT operator returns true for false statements and false for true statements.

You can see the operators for checking logic in the table down below. In the examples, var a = 5 and var b = 3:

Operator Example Definition
&& (var a = 5 && var b = 3)
returns true
(var a = 5 && var b = 2)
returns false
AND
|| (var a = 5 || var b = 2)
returns true
(var a = 6 || var b = 2)
returns false
OR
! !(a === b)
returns true
!(b < a)
returns false
NOT

JavaScript Operators: Summary

Now that you learned the types of JavaScript operators and their purpose, it is time to round up the material:

  • There are six types of operators in JavaScript.
  • JavaScript operators are used similarly as in regular mathematics.
  • The browser returns true or false statements with operator equations.
What Is JavaScript Used For?
Tutorial
Introduction
Output
Syntax
Comment
Commands
Operators
Comparison and Logical Operators
Data Types
Math.random()
Type Conversion
Function Definitions
Events
Objects
Object Properties
Prototype
Array
Sorting Arrays
Strings
Numbers
Number Format
Math Object
Onclick Event
Date
Date Formats
Scope
Regular Expressions
Reserved Words
Common Mistakes
Performance
Forms
Form Validation
Window: The Browser Object Model
Popup Boxes
Cookies
JSON
AJAX Introduction
AJAX Form
Automatic File Download
Functions
Array Methods
String Methods
Date Methods
Timing Events
Cheat Sheet
JavaScript in HTML
HTML DOM Methods
HTML DOM Changing HTML
HTML DOM Animation
HTML DOM EventListener
HTML DOM Navigation
HTML DOM NodeList
HTML DOM Element Nodes
Array Functions
Boolean
Calling a Function
Date Functions
Global Objects
Input Text
Operator
Statements
String Functions
Math
Math.random
Number
RegEx
alert
array.filter
array.length
array.map
array.reduce
array.push
array.sort
break and continue
className
confirm
decodeURIComponent
for
forEach
if
indexOf
innerHTML
location.reload
number.toString
onclick
onload
parseInt
prompt
replace
setAttribute
setInterval
setTimeout
slice
splice
string.includes
string.indexOf
string.split
style.display
submit
substr
substring
switch
test
throw, try and catch
toLowerCase
toUpperCase
use strict
while
window.history
window.location
window.navigator
window.screen