Operators in Javascript

Hari Sapna Nair
Last Updated: May 13, 2022

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.

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.

 

Operator

Description

+

used to perform addition

-

used to perform subtraction

*

used to perform multiplication

/

used to perform division

%

used to obtain the remainder

++

used to increment the value by 1

--

used to decrement the value by 1

**

used to find the power

 

 

 

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.
 

Operator

Description

==

Equal to operator returns the value true if the operands are equal.

===

Strict equal to operator returns the value true if the operands are equal and of the same type.

!=

Not equal to operator returns the value true if the operands are not equal.

!==

Strict not equal to operator returns the value true if the operands are not equal or are of different types.

>

Greater than operator returns the value true if the value of the left operand is greater than the value of the right operand.

>=

Greater than or equal to operator returns the value true if the value of the left operand is greater than or equal to the value of the right operand.

<

Lesser than operator returns the value true if the left operand is smaller than the right operand.

<=

Lesser than or equal to operator returns the value true if the left operand is smaller than or equal to the right operand.

 

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.
 

Operator

Description

&

Bitwise AND operator returns "1" in each bit position for which the corresponding bits of both operands are "1".  Else returns "0".

|

Bitwise OR operator returns a "0" in each bit position for which the corresponding bits of both operands are "0". Else "1" is returned.

^

Bitwise XOR operator returns a "0" in each bit position for which the corresponding bits of both operands are the same. Else "1" is returned.

~

Bitwise NOT operator inverts the bits of its operand.

<<

Bitwise left shift operator shifts all the bits present in the first operand to the left by the number specified in the second operand.

>>

Bitwise right shift operator shifts all the bits present in the first operand to the right by the number specified in the second operand.

<<<

Bitwise zero-fill right shift operator shifts all the bits present in the first operand to the right by the number specified in the second operand. It discards bits shifted off and shifts in zeros from the left.

 

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.

Operator

Description

&&

Logical AND returns the value true if both the operands/boolean values are true. Else false is returned.

||

Logical OR returns the value true if at least one of the operands/boolean values are true. Else false is returned.

!

Logical NOT return the value true if the operand is false and vice-versa.

 

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.

Operator

Description

=

It assigns values from the right side operand to the left side operand.

+=

It adds the right operand to the left operand and assigns the resultant value to the left operand.

-=

It subtracts the right operand from the left operand and assigns the resultant value to the left operand.

*=

It multiplies the right operand with the left operand and assigns the resultant value to the left operand.

/=

It divides the left operand with the right operand and assigns the resultant value to the left operand.

%=

It takes the modulus using two operands and assigns the result to the left operand.

 

 

 

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.

 

Operator type

Operator

member. []
create instance() new
negation/increment/decrement! ~ - + ++ -- typeof void delete
multiply/divide/remainder* / %
addition/subtraction+ -
bitwise shift operators << >> >>>
relational operators< <= > >= in instanceof
Equality operator== != === !==
bitwise AND&
bitwise XOR^
bitwise OR|
logical AND&&
logical OR||
conditional ternary operator?:
assignment= += -= *= /= %= <<= >>= >>>= &= ^= |= &&= ||= ??=
comma,

 

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!
 

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.

Was this article helpful ?
1 upvote

Comments

No comments yet

Be the first to share what you think