Operators in JavaScript Programming

JavaScript operators are symbols which are used to assign values, compare values, perform arithmetic operations, and more. 

  • The variables (operations) are called operands.
  • The operation (to be performed between the two operands) is defined by an operator.

JavaScript supports the following types of operators.

  • Arithmetic Operators
  • Comparison Operators
  • Logical (or Relational) Operators
  • Assignment Operators
  • Conditional (or ternary) Operators
  • String Operators
  • Type Operators
  • Bitwise Operators
JavaScript Arithmetic Operators –

Arithmetic operators perform arithmetic operations on numbers.

OperatorDescription
+Addition
Subtraction
*Multiplication
/Division
%Modulus (Remainder)
++Increment
Decrement

Example –

var x = 100 + 50;
// Addition
var a = 4;
var b = 3; 
var x = a + b; // adding 2 variables
var x = (100 + 50) * a; // expressions

// Subtraction
var x = 5;
var y = 2;
var z = x - y;

// Multiplication
var x = 5;
var y = 2;
var z = x * y;

// Division
var x = 5;
var y = 2;
var z = x / y;

// Modulo
var x = 5;
var y = 2;
var z = x % y;

// Increment
var x = 5;
x++;
var z = x;

// Decrement
var x = 5;
x--;
var z = x;
Associativity –

Associativity determines the way in which operators of the same precedence are parsed. For example, consider an expression:

a OP b OP c // OP means a operator

Left-associativity (left-to-right) means that it is processed as (a OP b) OP c, while right-associativity (right-to-left) means it is interpreted as a OP (b OP c).

Operator Precedence –

Operator precedence describes the order in which operations are performed in an arithmetic expression.

Example –

var x = 100 + 50 * 3;

As in traditional school mathematics, the multiplication is done first. Multiplication (*) and division (/) have higher precedence than addition (+) and subtraction (-).

PrecedenceOperator typeAssociativityIndividual operators
20Groupingn/a( … )
19Member Accessleft-to-right… . …
Computed Member Accessleft-to-right… [ … ]
new (with argument list)n/anew … ( … )
Function Callleft-to-right… ( … )
18new (without argument list)right-to-leftnew …
17Postfix Incrementn/a… ++
Postfix Decrement… --
16Logical NOTright-to-left! …
Bitwise NOT~ …
Unary Plus+ …
Unary Negation- …
Prefix Increment++ …
Prefix Decrement-- …
typeoftypeof …
voidvoid …
deletedelete …
awaitawait …
15Exponentiationright-to-left… ** …
14Multiplicationleft-to-right… * …
Division… / …
Remainder… % …
13Additionleft-to-right… + …
Subtraction… - …
12Bitwise Left Shiftleft-to-right… << …
Bitwise Right Shift… >> …
Bitwise Unsigned Right Shift… >>> …
11Less Thanleft-to-right… < …
Less Than Or Equal… <= …
Greater Than… > …
Greater Than Or Equal… >= …
in… in …
instanceof… instanceof …
10Equalityleft-to-right… == …
Inequality… != …
Strict Equality… === …
Strict Inequality… !== …
9Bitwise ANDleft-to-right… & …
8Bitwise XORleft-to-right… ^ …
7Bitwise ORleft-to-right… | …
6Logical ANDleft-to-right… && …
5Logical ORleft-to-right… || …
4Conditionalright-to-left… ? … : …
3Assignmentright-to-left… = …
… += …
… -= …
… **= …
… *= …
… /= …
… %= …
… <<= …
… >>= …
… >>>= …
… &= …
… ^= …
… |= …
2yieldright-to-leftyield …
yield*yield* …
1Comma / Sequenceleft-to-right… , …
JavaScript Comparison Operators –

Comparison and Logical operators are used to test for true or false.  Comparison operators are used in logical statements to determine equality or difference between variables or values.

Given that x = 5, the table below explains the comparison operators:

OperatorDescriptionComparingReturns
==equal tox == 8false
x == 5true
x == “5”true
===equal value and equal typex === 5true
x === “5”false
!=not equalx != 8true
!==not equal value or not equal typex !== 5false
x !== “5”true
x !== 8true
>greater thanx > 8false
<less thanx < 8true
>=greater than or equal tox >= 8false
<=less than or equal tox <= 8true

Example – 

if (age < 18) text = "Too young";
var voteable = (age < 18) ? "Too young":"Old enough"; // ternary operator

// if -else example
age = Number(age);
if (isNaN(age)) {
    voteable = "Input is not a number";
} else {
    voteable = (age < 18) ? "Too young" : "Old enough";
}
JavaScript Logical (or Relational) Operators –

Comparison and Logical operators are used to test for true or false.   Logical operators are used to determine the logic between variables or values.

Given that x = 6 and y = 3, the table below explains the logical operators:

OperatorDescriptionExample
&&and(x < 10 && y > 1) is true
||or(x == 5 || y == 5) is false
!not!(x == y) is true
JavaScript Assignment Operators –

Assignment operators assign values to JavaScript variables.

OperatorExampleSame As
=x = yx = y
+=x += yx = x + y
-=x -= yx = x – y
*=x *= yx = x * y
/=x /= yx = x / y
%=x %= yx = x % y
<<=x <<= yx = x << y
>>=x >>= yx = x >> y
>>>=x >>>= yx = x >>> y
&=x &= yx = x & y
^=x ^= yx = x ^ y
|=x |= yx = x | y
**=x **= yx = x ** y

The **= operator is an experimental part of the ECMAScript 2016 proposal (ES7). It is not stable across browsers. Do not use it.

Example –

// The = assignment operator assigns a value to a variable.
var x = 10;

// The += assignment operator adds a value to a variable.
x += 5;

//The -= assignment operator subtracts a value from a variable.
var x = 10;
x -= 5;

// The *= assignment operator multiplies a variable.
var x = 10;
x *= 5;

// The /= assignment divides a variable.
var x = 10;
x /= 5;

// The %= assignment operator assigns a remainder to a variable.
var x = 10;
x %= 5;
JavaScript Conditional (Ternary) Operator –

JavaScript also contains a conditional operator that assigns a value to a variable based on some condition.

Syntax –

variablename = (condition) ? value1:value2 

Example –

var voteable = (age < 18) ? "Too young":"Old enough";
JavaScript String Operators –

The + operator can also be used to add (concatenate) strings.

var txt1 = "John";
var txt2 = "Doe";
var txt3 = txt1 + " " + txt2;

Output – 

John Doe

The += assignment operator can also be used to add (concatenate) strings:

var txt1 = "What a very ";
txt1 += "nice day";

Output – 

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 –

var x = 5 + 5;
var y = "5" + 5;
var z = "Hello" + 5;

Output –

10
55
Hello5
JavaScript Type Operators –
OperatorDescription
typeofReturns the type of a variable
instanceofReturns true if an object is an instance of an object type
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.

OperatorDescriptionExampleSame asResultDecimal
&AND5 & 10101 & 00010001 1
|OR5 | 10101 | 00010101 5
~NOT~ 5 ~01011010 10
^XOR5 ^ 10101 ^ 00010100 4
<<Zero fill left shift5 << 10101 << 11010 10
>>Signed right shift5 >> 10101 >> 10010  2
>>>Zero fill right shift5 >>> 10101 >>> 10010  2
Watch it on YouTube

Leave a Reply

Your email address will not be published. Required fields are marked *