7 Javascript operators you need to learn about!

7 min readJan 8, 2022

Being programmers we need to perform various operations on various values to get our desired results. To perform our operations, we often use symbols that are defined by the language in which we are writing our program. Most of the languages, In which we are used to writing programs, offers us similar types of symbols so that we can use them to create a masterpiece. What are these symbols? What is the exact name for these symbols? How do they work? Is there any order in which they perform their functionalities? Let’s dive in to explore and find the answers to our questions.

If we go systematically then the very question is what are these symbols called? And the answer is these symbols are often called “Operators”.

What are Operators?

“Symbols used to act on one or two values/operands are referred to as operators”

Operators are adapted from Mathematics. An operator can manipulate any 1 or 2 values of the allowed data types (To learn more about datatypes click here). Operators are considered the spine of any program. They are used in every program whether it is a simple program of counting or a complex algorithm of cyber security encryption.

For example,

“+”, “-”, “/”, “*” are some of the operators known as Arithmetic operators. We will discuss all types of operators later.

Why do we need Operators?

As mentioned previously operators are considered the backbone of any program. We need them to communicate with the compiler or interpreter and tell them what kind of operation are we going to perform whether it is an Arithmetic operation or a Logical operation. For example:

We want to add two or more numbers and expect our computer to compute that expression and give us the resultant value.

2 + 3 = 5

Now we are exactly telling our computer what arithmetic operation we want to carry out and what will be the operands on which we want to carry out addition operation.

Types of Operators

Arithmetic operators

Arithmetic operations are the most thing to do with numbers some of the commonly used arithmetic operations include Addition, Subtraction, Multiplication, Division. Mostly Arithmetic operators are binary but there are also some operators which are the unary operator. We will divide arithmetic operators into two categories which are as follows:

Binary operators

“Such operators which requires two operands to perform their action”

Addition

x + y

This expression will return the value obtained after adding x and y.

Subtraction

x — y

This expression will return the value obtained after subtracting x and y.

Multiplication

x * y

This expression will return the value obtained after multiplying x and y.

Division

x / y

This expression will return the value obtained after dividing x and y.

Remainder

x % y

This expression will return the value of the remainder obtained after dividing x and y.

Exponentiation

x ** y

This expression will return value after calculating the base raised to the power

Unary operators

“Such operators which require only one operand to perform their action”

Increment

x++

The value of x will be increased by 1

Decrement

x–

The value of x will be decreased by 1

Unary negation

-x

It will convert positive value to negative value

Unary plus

It will convert the operand into numbers. i.e

x = true

console.log(+x) // output will be 1

Assignment operators

“=” is known as an assignment operator its function is to assign the value of the operand placed on its right side to the operand placed on its left side. For example,

x = y

In the above expression, the value of y is assigned to x. The assignment operator combines with other arithmetic operators to form compound operators which are as follows:

Assignment

x=y

x = y

Value of y is assigned to x

Addition Assignment

x+=y

x = x + y

Value after arithmetic operation x + y is assigned to x

Subtraction Assignment

x-=y

x = x — y

Value after arithmetic operation x — y is assigned to x

Multiplication Assignment

x*=y

x = x * y

Value after arithmetic operation x * y is assigned to x

Division Assignment

x/=y

x = x / y

Value after arithmetic operation x / y is assigned to x

Remainder Assignment

x%=y

x = x % y

Value after arithmetic operation x % y is assigned to x

Exponentiation Assignment

x**=y

x = x ** y

Value after arithmetic operation x ** y is assigned to x

Comparison operators

Comparison operators are used to comparing the operands and returns the value in the form of “true” or “false”. The type of operands can be of “Number, String, Object or Logical”. In case we want to compare different type of operands Javascript automatically tries to convert the data type of those operands but there is an expectation of two operators “!==” and “===” these operators compares the operand strictly which means it will compare the operands on basis of value and datatype also.

Equal

x == y

It returns the value true if the operands are equal and vice versa.

Not equal

x != y

It returns the value true if the operands are not equal and vice versa.

Strict equal

x === y

It returns the value true if the operands are equal and the data type is the same.

Strict not equal

x !== y

It returns the value true if the operands are not equal and the data type is different.

Greater than

x > y

It returns true if x is greater than y.

Greater than or equal

x >= y

It returns true if x is greater than equal to y.

Less than

x < y

It returns true if x is less than y.

Less than or equal

x <= y

It returns true if x is less than equal to y.

Bitwise operators

Bitwise operators first convert the operands into a set of 32 bits (zeros and ones) and perform the necessary operation and then returns the standard Javascript numerical values.

AND

x & y

It returns 1 in each bit position for which the corresponding bits of both operands are ones.

x | y

It returns 0 in each bit position for which the corresponding bits of both operands are zeros.

XOR

x ^ y

It returns 0 in each bit position for which the corresponding bits are the same and 1 in each bit position for which the corresponding bits are different.

NOT

! x

It inverts the bits of the operand.

Left shift

x << y

It shifts x in binary representation y bits to the left, shifting in zeros from the right.

Sign-propagating right shifts

x >> y

It shifts x in binary representation y bits to the right, discarding bits shifted off.

Zero-fill

x >>> y

It shifts x in binary representation y bits to the right, discarding bits shifted off, and shifting in zeros from the left.

Logical operators

These types of operators are known as logical operators because they work with logical values and return a boolean value. There are 3 logical operators AND, OR, Not. If we use AND and OR operator with the non-boolean value it will return a non-boolean value because they return a value of 1 specified operand.

AND

x && y

AND operator will return true if and only if both operands are true.

x || y

OR operator will return true unless both values are false

NOT

! x

NOT operator will invert true into false vice versa

Conditional (ternary) operators

Ternary operators work just as if/else statements. It takes 3 operands and the syntax is as follows:

Condition? return x: return y

If the condition is true the value it will return will be x instead if the condition is false it will return the value of y. We can also make a compound ternary operator by adding more conditions like else if statements. The syntax will be

Condition1? return x : Condition2 ? return x: return y

String operators

In programming, a time always comes when we need to combine two or more strings to console a simple message or we want to show two separate strings concatenated together. For such times and cases, we use the string operator (“+”) to join two strings or more into 1 single string.

Short-circuiting of operators

Logical Operator AND and OR (&& and ||) works in a different way. First, they will convert the value of the left operand of the expression into a boolean value and decide what is needed to be get done but depending on the operator and result of the conversion will decide whether to return the original left operand’s value or the right operand’s value.

In the OR operator if the value of the left operand is true then it will return the value of its left operand and if false it will return the value of its operand.

console.log(null || “user”)

// → user

console.log(“Agnes” || “user”)

// → Agnes

Keep in mind that 0, NaN, and the empty string (“”) count as false, while all the other values count as true. So 0 || -1 produces -1, and “” || “!?” yields “!?”.

The AND operator works in the same way but it works exactly opposite to the OR operator. It will return the value of the left operand of the expression if the left operand is false otherwise it will return the value of its right operand.

Another important property of these two operators is that the part to their right is evaluated only when necessary. In the case of true || A, no matter what A is — even if it’s a piece of program that does something terrible — the result will be true, and A is never evaluated. The same goes for false && A, which is false and will ignore A. This is called short-circuit evaluation.

The conditional operator works in a similar way. Of the second and third

values, only the one that is selected is evaluated.

Precedence of Operators

The table below shows the precedence of operators, from highest to lowest:

Operator type

Individual operators

Negation/ Increment

! ~ — + ++ —

Multiply/ Divide

* / %

Addition/ Subtraction

+/-

Bitwise shift

<< >> >>>

Relational

< <= > >=

Equality

==!= ===!==

Bitwise AND

Bitwise XOR

Bitwise OR

Logical AND

Logical OR

Conditional

Conclusion

In this article, we have learned about different types of Javascript Operators and their properties. We also have learned their precedence. Learning Operators is very important if anybody wants to continue to be a programmer.