Understanding Operators In JavaScript : Types & Examples

What Is an Operator?

In simple terms, an operator refers to the one that operates on something, like a person operating a machine to perform some dedicated task. So, the person will be an operator.

Similarly, in computer programming, an operator refers to a character that tells the machine to perform a particular operation. For example, the (+) sign is used to add two numerical values. In any programming language, this (+) sign is an operator that performs the task of adding two values.

• Operand refers to the values on which you operate, In the above example, the two numeric values are the operands on which it performs the operation.

Consider the following code:

var x = 10;       

var y = 5;       

document.write("The sum is "+(x+y));  

The two variables x & y are defined with values 10 & 5. The (+) operator is used to add the two values and it will return the output on the browser.

The output of the above code will be:

So, this was a brief introduction to Operators. In the next section, you will go through the types of Operators.

Types of Operators in Javascript

In JavaScript, there are eight different types of Operators present. They are:

• Arithmetic Operators
• Assignment Operators
• String Operators
• Comparison Operators
• Logical Operators
• Conditional Operators
• Bitwise Operators
• Type-of Operator

You'll go through each of these in this tutorial on Operators in JavaScript.

Here's How to Land a Top Software Developer Job

Full Stack Developer - MERN StackExplore Program

What Are Arithmetic Operators in Javascript?

As the name suggests, you use arithmetic operators to perform mathematical operations like addition, subtraction, multiplication, division, and many other operations. 

• For example, if you want to perform addition between two numeric values. In this case, you'll use the (+) operator in JavaScript.

**Note: The (+) operator in JavaScript is also used to concatenate two Strings. You'll get to know more about it in upcoming sections.

There are several different types of arithmetic operators present in JavaScript. Below is the list of all the arithmetic operators present in JavaScript.

Implementation of arithmetic operators in a program:

var x = 10;

var y = 5;

document.write("Addition = "+(x+y)+"<br>");

document.write("Subtraction = "+(x-y)+"<br>");

document.write("Multiplication = "+(x*y)+"<br>");

document.write("Division = "+(x/y)+"<br>");

document.write("Modulus = "+(x%y)+"<br>");

document.write("Increment = "+(x++)+"<br>");

document.write("Decrement = "+(x--)+"<br>");

Arithmetic Operators

The two variables x & y are defined with values 10 & 5. The different types of arithmetic operators are used in the above code to perform certain mathematical operations like addition, subtraction, multiplication, division, and so on.

The output for the above code will be:

Operator Precedence in JavaScript 

Operator Precedence in JavaScript refers to the order of operations. It evaluates different operators falling under a single expression according to the precedence of operators.

• Parentheses have the highest precedence. In any expression, it evaluates the operations present inside the parentheses first.

var x = 10;

var y = 5;

console.log(x+y*(3*2));

/*

(10+5*(3*2))

(10+5*(6))

(10+30)

40 (Expected output)

*/

The output for the above code will be:

• Division(/) and multiplication(*) holds higher precedence than addition(+) and subtraction(-). 
•  If any of the operations have the same precedence (like division and multiplication), it evaluates them from left to right. 

var x = 10;

var y = 5;

document.write("The output will be "+(x/y*2));

/*

(x+/y*2)

(10/5*2)

(2*2)

4 (expected output)

*/

It evaluates division first in the above example, followed by multiplication because both the operators have the same precedence. Hence the expression is evaluated from left to right.

The output for the above example will be:

What Are Assignment Operators in Javascript?

You use assignment operators to assign values to different JavaScript variables. If you want to assign a value 15 to a variable X, you can do it with the help of the assignment operator. 

Consider the following example:

var x = 10;

document.write(x);

In the above example, the value assigned to variable x is 10. If you try to print the value variable x is holding on to the browser, then, the output will be 10.

• Any value present to the right of (=) will be assigned to the variable present to the left of (=)

The different types of assignment operators present in JavaScript are:

Implementation of assignment operators:

var x = 10;

var y = 5;

console.log(x);                // Returns the value of x.

console.log(x+=y);             // Returns x = x+y

console.log(x-=y);             // Returns x = x-y

console.log(x*=y);             // Returns x = x*y

console.log(x/=y);             // Returns x = x/y

console.log(x%=y);             // Returns x = x%y

console.log(x^=y);             // Returns x = x^y

console.log(x|=y);             // Returns x = x|y

console.log(x**=y);            // Returns x = x**y

The output for the above code will be:

What Are String Operators in Javascript?

String operators are used for performing operations on strings in JavaScript. You can use the (+) operator to concatenate two different strings, or the (+=) can also be used to add something to an existing string.

Implementation of string operators.

var x =  "Hello";         // Variable x with string value

var y = "World";          // Variable y with string value

document.write(x+y+"<br>")     // (+) operator will concatenate both the strings

document.write(x += "Everyone"); // (+=) operator will add "Everyone" to the existing String

• The (+) operator in the above code will concatenate both the values present inside the variables x & y. 
• The (+=) operator will add the word “Everyone” to the value present inside the variable y.

The output of the above code will be:

What Are Comparison Operators in Javascript?

Comparison operators are also used to check for true and false. As the name suggests, you use a comparison operator to compare two values or variables using different operators.

Several comparison operators are present in JavaScript. Below is the list of comparison operators:

•  (=) operator in JavaScript is an assignment operator. It is used to assign a value to a variable. To compare two variables in JavaScript, you have the double equals-to (==) operator. 

Implementation of comparison operators:

var x = 5;  // Declaring variable x

//comparing c with different values

console.log(x==8);      // Return False (x<8)

console.log(x===5);     // Return True 

console.log(x!=8);      // Return True (x!=8)

console.log(x!==5);      // Returns False

console.log(x>8);       // Returns false (x<8)

console.log(x<8);       // Returns true because x = 5 

console.log(x>=5);      // Returns True (x = 5)

console.log(x<=8);      // Returns True (x < 8)

• The (x===5) and (x!==5) operators will check for both: value and the data type. If both data type and the value are equal, then, it will return true. 

The output for the above code will be:

What Are Logical Operators in Javascript?

You use logical operators to determine the logic between two variables or values. Logical operators return boolean values and check whether multiple conditions are true or false.

• In JavaScript, Logical Operators are of three different types:
• Logical And
• Logical Or
• Logical Not

•  The and-operator will return true only if both conditions are true. If one of these two conditions is false, it will return false.

var x = 5;  // Declaring variable x

var y = 8;

document.write(x > 4 && y > 7)      // Return True Because both the conditions are True

document.write("<br>");//  Using <BR> for space.

document.write(x < 7 && y > 8);    // Return False because y is not greater than 8

The output for the above code will be:

• The or operator will return true if any one of the conditions is true. 

var x = 5;  // Declaring variable x

var y = 8;

document.write(x > 6 || y > 9); // Return False because both the conditions are False

document.write("<br>");//Using<BR>for space.

document.write(x < 7 || y > 8);    // Return true because one condition holds true

The output for the above code will be:

• The not operator checks if the value variable x is holding equals that of variable y. It will return true if the values are not equal.

var x = 5;  // Declaring variable x

var y = 8;

document.write(!(x==y));  // Return True because x is not equal to y.

The output for the above code will be:

Here's How to Land a Top Software Developer Job

Full Stack Developer - MERN StackExplore Program

What Are Conditional Operators in Javascript?

The conditional operator in JavaScript is used to assign a value to the variable based on a condition. It contains a condition, and for every condition, there are only two possibilities, either true or false.

• The syntax for the conditional operator is straightforward. You have a variable name and a condition. Depending upon the condition, you have two values, value 1 and value 2.

• For example, suppose you have a variable voter, next up, you have a condition. If age (of voter) < 18  value 1, i.e., too young will be printed on the screen; otherwise if age > 18 value 2, i.e., old enough will be published on the console.

Refer to the following code for the above example:

var age = 20;               //Age of person is 20

var x = (age >=18)  ?  "Old enough" : "Too Young";  // variable x will hold the value   

document.write(x);     // Return "Old enough"

The output will be:

What Are Bitwise Operators in Javascript?

This operator doesn't have much practical usage in the real world, although they are not useless. But, this is something you are not going to use daily. In computers, the numbers are stored in binary format. Bitwise operators work on 32-bit numbers. 

• Any operand present in operation is first changed to a binary number and converted back to a JavaScript number. 
• The four most critical bitwise operators present in JavaScript are:
• Bitwise And
• Bitwise Or
• Bitwise Not
• Bitwise XOR

Implementation of bitwise operators:

var x = 5;

var y = 1;

document.write((x & y)+"<br>");  // works the same as logic gates

document.write((x | y)+"<br>");  // works the same as logic gates 

document.write((~x)+"<br>");    // Returns (-6) and works the same as (-x-1)

document.write((x ^ y)+"<br>"); // Returns 4 and works the same as XOR gate.

For the XOR gate, the value will be true only when 1 of the two values is true. If both values are true, then the final value will be false.

The output will be:

Type-of Operator in JavaScript

The type of() operator in JavaScript will tell you the kind of value a variable holds, whether it is a number, string, or boolean value. It can also differentiate between null and undefined. These 5 are the primitive data types present in JavaScript, and the type of() operator can tell you about which data type a variable is holding.

Consider the following code:

var x = 5;                   // Numeric value

var y = "hello";            // String value

var flag = false;           // Boolean Value

var p;                      // No value

document.write(typeof(x)+"<br>");               // Return number    

document.write(typeof(y)+"<br>");               // Return String

document.write(typeof(flag)+"<br>");            // Return Boolean   

document.write(typeof(p)+"<br>");               // Return undefined

The output of the above code will be:

• Suppose you are using NULL as the value for any variable. The type of() operator will return this variable as an object, but if you don’t give any value to the variable, you will leave it after declaration. The type of() operator will return undefined.

var x = null;     // variable with value as NULL

document.write(typeof(x));    // Returns Object

var y;                 // Variable with no value

document.write(typeof(y)); // Returns undefined

The output of the above code will be:

With this, you have reached the end of this "Operators in JavaScript" tutorial.

Master the complete JavaScript fundamentals, jQuery, Ajax, and more with the Javascript Certification Training Course. Check out the course preview!

Conclusion

In this tutorial, you explored the concept of Operators. There are 8 different types of Operators present, with each one consisting of a few more within. 

You also went through the precedence of Arithmetic Operators. Following this, you understood how to use different types of Operators while programming. You also encountered the coding implementation of Type-of Operator.

Are you interested in expanding your knowledge of JavaScript or looking for online JavaScript programming training?

If the answer is yes to either or both the above questions, the JavaScript certification course offered by Simplilearn is something you should explore. This applied training program is designed to help you grasp the concepts of JavaScript from basics to advance.

On that note, if you have any doubts about this tutorial on Operators in JavaScript, don't hesitate to place them as comments at the end of this page; we will respond to them soon!