Operators in Javascript

Introduction 

Operators play a vital role in any programming language. Operators are used extensively to build applications like the calculator app, where mathematical computations are necessary. They are also used to perform logical comparisons and execute the required task in a software application.

In this blog, we will discuss operators in Javascript like arithmetic operators, comparison operators, logical operators, etc., in detail.

Also See, Javascript hasOwnProperty

Operators in JavaScript

Operators are symbols used for performing mathematical operations, logical comparisons. An operand (or argument) is an object or quantity on which the operator is applied. For instance, in "1 + 2", 1 and 2 are the operands, and "+" is the operator.
 

Operators in JavaScript can be classified into three types based on the number of operands. The classification is as follows:

1. Unary Operator: An operator with a single operand.

Example
 

// unary operator
let a = typeof(1);
console.log(a)

Output

number

In the above example, "typeof" is the operator, and "1" is the operand.

1. Binary Operator: An operator with two operands.

Example

// binary operator
let a = 1 + 2;
console.log(a)

Output

3

In the above example, "+" is the operator, and "1" and "2" is the operand.
 

1. Ternary Operator: An operator with three operands. It is a conditional operator that assigns a value to a variable based on some condition. It can be used as the replacement of the if statement.

Syntax

 Example

// ternary operator
let a = 10;
let votingStatus = a >= 18 ? "Eligible for voting" : "Not eligible for voting"
console.log(votingStatus)

Output

Not eligible for voting

In the above example, the second value is assigned as the condition is false.

Arithmetic operators in JavaScript

Arithmetic operations are performed on the operands using the arithmetic operators. Let's go through the list of arithmetic operators in JavaScript.

Note on increment and decrement operator: 

• The increment/decrement operator can only be applied to variables not on integers directly.
• When the operator goes after the variable, it is in the postfix form. In the postfix form, the value is incremented, but the previous value is used.
• When the operator goes before the variable, it is in the prefix form. In the prefix form, the value is decremented, but the previous value is used.

Example

let num1 = 10;
let num2 = 5;

// addition
console.log("num1 + num2: " + (num1 + num2));

// subtraction
console.log("num1 - num2: " + (num1 - num2));

// multiplication
console.log("num1 * num2: " + (num1 * num2));

// division
console.log("num1 / num2: " + (num1 / num2));

// remainder
console.log("num1 % num2: " + (num1 % num2));

// increment operator
console.log("num1++: " + num1++);

// decrement operator
console.log("num1--: " + num1--);

// power
console.log("num1 ** num2: " + (num1 ** num2));

Output

num1 + num2: 15

num1 - num2: 5

num1 * num2: 50

num1 / num2: 2

num1 % num2: 0

num1++: 10

num1--: 11

num1 ** num2: 100000

Comparison operators in JavaScript

They are used to compare the two operands, and the result is always true or false. Let's go through the list of comparison operators in JavaScript.
 

Example

let val1 = 10;
let val2 = 5;
let val3 = "10";
let val4 = 15;

// equal to operator
console.log("val1 == val3: " + (val1 == val3));

// strict equal to operator
console.log("val1 === val3: " + (val1 === val3));

// not equal to operator
console.log("val1 != val2: " + (val1 != val2));

// strict not equal to operator
console.log("val1 !== val3: " + (val1 !== val3));

// greater than operator
console.log("val1 > val2: " + (val1 > val2));

// greater than or equal operator
console.log("val1 >= val4: " + (val1 >= val4));

// lesser than operator
console.log("val1 < val4: " + (val1 < val4));

// lesser than or equal operator
console.log("val1 <= val2: " + (val1 <= val2));
 

Output

val1 == val3: true

val1 === val3: false

val1 != val2: true

val1 !== val3: true

val1 > val2: true

val1 >= val4: false

val1 < val4: true

val1 <= val2: false

Bitwise operators in JavaScript

They are used to perform bitwise operations on operands. Let's go through the list of bitwise operators in JavaScript.
 

Example

let num1 = 0;
let num2 = 1;

// bitwise AND  operator
console.log("num1 & num2:" + (num1 & num2));

// bitwise OR operator
console.log("num1 | num2:" + (num1 | num2));

// bitwise XOR operator
console.log("num1 ^ num2:" + (num1 ^ num2));

// bitwise NOT operator
console.log("~num1:" + (~num1));

// bitwise left shift operator
console.log("num2<<1: " + (num2<<1));

// bitwise right shift operator
console.log("num2>>1: " + (num2>>1));

// bitwise zero-fill right shift operator
console.log("num2>>>1: " + (num2>>>1));

Output
num1 & num2:0

num1 | num2:1

num1 ^ num2:1

~num1:-1

num2<<1: 2

num2>>1: 0

num2>>>1: 0

Logical operators in JavaScript

Logical operations like AND, OR, and NOT are performed on the operands using the logical operators. Let's go through the list of logical operators in JavaScript.

Example

let val1 = true;
let val2 = false;

// logical and operator 
console.log("val1 && val2: "+ (val1 && val2));

// logical or operator
console.log("val1 || val2: "+ (val1 || val2));

// logical not operator
console.log("!val1: "+ (!val1));

Output

val1 && val2: false

val1 || val2: true

!val1: false

Assignment operators in JavaScript

They are used to assign values to the operand. Let's go through some of the assignment operators in JavaScript.

Example
 

// assignment operator
let num1 = 5;

// addition operator
num1 += 2;
console.log("num1: "+ num1);

// subtraction operator
num1 -= 8;
console.log("num1: "+ num1);

// multiplication operator
num1 *= 2;
console.log("num1: "+ num1);

// division operator
num1 /= 5;
console.log("num1: "+ num1);

Output

num1: 7

num1: -1

num1: -2

num1: -0.4

String operators in JavaScript

On strings apart from the comparison operators, the concatenation operator (+) can be used. The concatenation operator concatenates two string values together and returns a new string. 

Example
 

let str1 = "Coding";
let str2 = "Ninjas";

// comparison operator
console.log("str1 === str2: "+ (str1 === str2));

// concatenation operator
let resultStr = str1 + " " + str2;
console.log(str1 + " " + str2 + ": " + resultStr);

Output
str1 === str2: false

Coding Ninjas: Coding Ninjas

Comma operator in JavaScript

The comma operator "," evaluates the operands and returns the value of the last operand. It is mainly used inside a for loop to allow multiple variables to be updated each time through the loop. 
 

Example
 

// a is assigned with the last value
let a = (1, 2, 3);
console.log("a: " + a);

let arr =  [
   [1, 2, 3],
   [4, 5, 6],
   [7, 8, 9],
]

console.log("Array before updation: ");
for(let i = 0 ; i < 3 ; i++)
   console.log(arr[i]);

// comma operator to updates two variables at once
for (let i = 0, j = 0; i < 3; i++, j++)
 arr[i][j] += 1;

console.log("Array after left diagonal elements are updated by 1: ");
for(let i = 0 ; i < 3 ; i++)
   console.log(arr[i]);

Output

a: 3

Array before updation: 

[ 1, 2, 3 ]

[ 4, 5, 6 ]

[ 7, 8, 9 ]

Array after left diagonal elements are updated by 1: 

[ 2, 2, 3 ]

[ 4, 6, 6 ]

[ 7, 8, 10 ]

Operator Precedence

The execution order is defined by the operator precedence order when an expression has more than one operator. Operator precedence can be overridden using parentheses.
 

The following table describes the operator precedence order, from highest to lowest.

You can practice by yourself with the help of an online javascript compiler.

Frequently Asked Questions

1. What is string coercion?
   Ans:- String coercion is the automatic or implicit conversion of a data type to a string data type. For example, when a number is added to a string, the number type is automatically converted to the string type.
    
2. What is the grouping operator?
   Ans:- The round brackets used to override the operator precedence are called the grouping operator.
    
3. What is the difference between "===" and "=="?
   Ans:- The equality operator "==" is used to compare values of the operands, whereas the strict equality "===" is used to compare the value and type of the operands.
    
4. What is the use of the delete operator?
   Ans:- The delete operator removes a property from an object. It is released automatically if no more references to the same property are held.
    
5. What is the use of the new operator?
   Ans:- The new operator creates an instance of a user-defined object type or one of the built-in object types with a constructor function.

Key Takeaways

The blog covered the various operators in JavaScript, namely, arithmetic operators, comparison operators, bitwise operators, logical operators, assignment operators, string operators, and the comma operator. The precedence order of the operators has also been covered.
 

Now that you know the concept of variables and data types in Javascript go ahead and try out some questions based on them on our CodeStudio Platform!
To learn more about Micro Operations, refer to Arithmetic Micro Operations.

Don't stop here. Check out our Basics of JavaScript - guided path to learn JavaScript from scratch. If you are preparing for JavaScript Interviews, check out the blog Javascript Interview Questions.

We hope you found this blog useful. Feel free to let us know your thoughts in the comments section.