Operators in JavaScript

Operators in JavaScript are used in different type of expressions like arithmetic( 1 + 2 ). Most of JavaScript operators are just punctuation marks, however there are a few which are keywords(delete and instanceof). Below is a table listing all of operators in JavaScript in order of their presedence moving from higher to lower.

OperatorOperation Done by it
++Pre or post increment
Pre or post decrement
~Invert bits
!Invert boolean value
deleteRemove property
typeofDetermine type of operand
voidReturn undefined value
*, /, %Mutiply, divide, remainder
+, –Add, Subtract
<<Shift Left
>>Shift right with sign extension
>>>Shift right with zero extension
>, <=, >, >=Comparing numbers or strings(Alphabetic Order)
instanceofTest object’s class
inTesting whether an object have a property or not
==Testing for equality
!=Inequality testing
===Test for strict equality
!==Testing for strict inequality
&Computer Bitwise AND
^Compute Bitwise OR
|Computer bitwise OR
&&Compute logical AND
||Computer logical OR
?:Choose 2nd or 3rd operator
=Assign to a variable or property
*=, /=, %=, +=Operate and assign
-=, &=, ^=, | =Operate and assign
<<=, >>=, >>>=Operate and assign
,Discard 1st operand, return second

Types of Operators in JavaScript

Briefly JavaScript operators can be divided into two parts – Unary and Binary. While unary operators just need one operand, binary require two operands. Instead it could also be said that JavaScript operators are of 12 types depending upon which expression they’re used in –

Arithmetic Operators

Arithmetic operators in JavaScript are used for performing arithmetic operations on variables/values. Below is a table listing all of Arithmetic Operators –

Arithmetic OperatorWhat it doExamples
+Addition of numbers2 + 3 (5)
Subtraction of numbers10 – 3 (7)
*Multiplication of numbers54 * 3 (162)
/Division of numbers84/4 (21)
%Modulus(Remainder left after division of two numbers)11%3 (2)
++Incrementing number++10 (11)
Decrementing number–84 (83)

Assignment Operators

As is clear from name Assignment Operators itself, it’s about assigning a value to something, which in case of JavaScript is variable. Below is a table listing all of Assignment Operators in JavaScript –

Assignment OperatorWhat it doExamplesExplanation
=Assign value of one of it’s operand to anothera = bIf a = 10 then b will also become 10
+=Adding two values first then assigninga += b
(a = a + b)
If a = 1, b = 3 then after execution of this expression a will become 4
-=Subtracting two values first then assigninga -= b
(a = a – b)
If a = 10, b = 8 then after execution of this expression a will become 2
*=Multiply two numbers then assigna *= b
(a = a * b)
If a = 30, b = 4 then a will become 120
/=Divide two numbers then assigna /= b
(a = a / b)
If a = 100, b = 5 then a will become 20
%=Take remainder of two numbers then assigna %= b
(a = a % b)
If a = 35, b = 3, then a will become 2

String Operators

String Operators in JavaScript are used for concatenating two strings together. Below is a table listing JavaScript String Operators –

String OperatorsWhat it doExamplesExplanation
+Stick together number of strings and make one“Computer” + ” Science” + ” Hub”Computer Science Hub
Just squeezing together strings
+=Stick together number of strings and make onetext_a += text_b
(text_a = text_a + text_b)
“Computer” += ” Science”
Will become Computer Science

Comparison Operators

Comparison Operators in JavaScript are used inside Logical Expressions mainly for testing equality of identities. In case you want to know more about Logical Expressions in JavaScript, see this article – JavaScript Logical Expressoins. Below is a table listing all of JavaScript Comparison Operators –

Comparison OperatorWhat it doExamplesExplanation
==Check for equality of value of identities(variables, objects, functions in JavaScript)10 == 8Returns false
===Check for equality of value as well as typeIf x is 5
x === “5” (false)
Returns false as x is numeric number while “5” is a string in JavaScript
!=Not equalIf x is 5
x != 7
Returns true as x is actually 5
!==Checking either type is not same or value is not samex !=== “10” (true)
x !=== 10 (false)
>Greater thanx > 10
<Less thanx < 18
>=Greater than or equal tox >= 19
<=Less than or equal tox <= 74

Conditional Operator

A Conditional Operator in JavaScript assigns value to a variable based upon some condition. For JavaScript Programming Language conditional operator is ?: syntax is (condition) ? value_one : value_two

Conditional OperatorWhat it doExamples
variable_name = (condition) ? value1 : value2Check for condition then based upon it select a single value out of twovoteable = (oil > 10) ? “Will Reach New York” : “Not reach New York”

Logical Operator

Logical Operator in JavaScript are used for checking logic between two entities (either JavaScript Object or Function).

Logical OperatorWhat it doExamples
&& (AND)Will do logical AND operation and would return a Boolean(x > 8 && x < 10)
|| (OR)Do logical OR operation and will return a Boolean(x < 10 || x > 20)
! (NOT)Logical NOT operation, just reserves true to false or false to true! (x > 10)

(Read as => x is not greater than 10)

typeof Operator

The operator typeof return JavaScript Type of a variable, object, function. Most often these returned type would be primitive data type(string, number, boolean).

typeof Operator
typeof(“Computer Science Hub”) // Returns string
typeof(10.23) // Returns number
typeof NaN // Returns number
typeof false // Returns Boolean
typeof new Date() // Returns Object
typeof {website: “computersciencehub.io”, age: “1 year”} // Returns Object

delete Operator

JavaScript delete Operator just deletes a property from an object. If your not aware of “What a JavaScript Object?” then please see this – What are Objects in JavaScript?

delete Operator
var car = { name : “Tesla”, model : “2020 Model S”, color : “red”};
delete car.color; (Deleting color property of car object)
{ name : “Tesla”, model : “2020 Model S” } (Object after delete car.color)

in Operator

JavaScript in operator returns true if specificed property is in the specified object itself other wise it would return false.

  • in Javascript Operator for Arrays

For arrays JavaScript checks whether there’s value at that index or not.

in Javascript Operator for Arrays
var coding = [“JavaScript”, “Python”, “SQL”] //JavaScript Array
0 in coding // returns true
1 in coding // returns true
2 in coding // returns true
3 in coding // returns false
  • in JavaScript Operator for Objects

For objects JavaScript in operator looks for specific property name.

in JavaScript Operator for Objects
var cars = {car_one : “Tesla”, car_two : “Cybertruck”};
“car_one” in cars // returns true
“car_two” in cars // returns true
“car_three” in cars // returns false

instanceof Operator

JavaScript instanceof Operator checks for whether object is an instance of a specific class.

JavaScript instanceof Operator
var websites = [“Google”, “Facebook”, “Bing”];
websites instanceof Array; // returns true
websites instanceof Object; // returns true
websites instanceof String; // returns false
websites instanceof Number; // returns false

void Operator

JavaScript void operator evaluates an expression and returns undefined.

Operator Precedence JavaScript

For various operators in JavaScript while doing different computations, then you need to take care of priority of different operators. Operators with higher priority should be calculated first and then that with less priority is computed.

JavaScript Operators priority table

Moreover if content on this image is not appearing clear to you, then don’t worry I’ve put together a pdf as well – Listing all of JavaScript’s Operators Precedence. Download that pdf by clicking button below –

Let’s understance this with an example –

w = x + y*z for this JavaScript Expression as * (multiplication) have higher precedence over + (addition). That’s why JavaScript Engine will compute y*z first and then would add result to x.

Conclusion

Operators are fundamental building block of JavaScript Programming Language, remembering symbols of operator and what they do is easy part. What I personally have seen that most of people struggle with precedence order which JavaScript uses internally. Specifically if your doing a lot of computations in code, then just ignoring Operators Precedence/Priority may broke whole program and you would end up with something which you never expected.

But don’t worry I’ve put together Operator’s precedence table for you, if you got stuck somewhere or just forgets something then you can refer to this article on Computer Science Hub or can also download precedence table by clicking “Download” button little above on this page, save it in your PC for referencing.

I hope that you find this article useful, moreover if your learning JavaScript Programming Language. Then for you I’ve put together some awesome articles, on this website, as a learning resource, you can see those here – JavaScript Computer Science Hub.

Gagan

Hi, there I'm founder of ComputerScienceHub(Started this to bring useful Computer Science information just at one place). Personally I've been doing JavaScript, Python development since 2015(Been long) - Worked upon couple of Web Development Projects, Did some Data Science stuff using Python. Nowadays primarily I work as Freelance JavaScript Developer(Web Developer) and on side-by-side managing team of Computer Science specialists at ComputerScienceHub.io

Leave a Reply

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

Recent Posts