Operations, Operands and Operators

In all programming languages you have loads and loads of operators that perform operations on operands. Sounds a bit confusing? Let's see what it means.

Operations, Operands and Operators explanation

Hopefully after this explanation you might have a bit of understanding of the difference between the three terms. So let's define them accordingly:

  1. Operations: are the functions performed on operands using a given operator.
  2. Operands: are values that can be operated.
  3. Operators: make operations happen.

Operators in JavaScript

Now that we know the difference between operations, operands and operators we can move on to explore the various operators in JavaScript. But before that we are left with one thing to cover and that is the classifications of operators.

Unary, binary and tertiary

JavaScript comes equipped with three classes of operators namely unary, binary and tertiary operators. The names simply indicate the number of operands the operators take.

Unary takes one operand; binary takes two operands, like the addition operator above; and tertiary takes three operands. Almost all operators fall in the first two classes, except for the conditional operator - which falls under the category of a tertiary operator.

So now with the classifications of operators done, we can finally move on to see a couple of different operators in JavaScript.

The operators are divided according to the core functionality they offer. We have:

  1. Arithmetic Operators
  2. Assignment Operators
  3. Comparison Operators
  4. Logical Operators

Let's start!

Arithmetic Operators

Arithmetic operators perform arithmetic calculations on their operands like addition, subtraction, mutliplication etc.

NameSymbolDescriptionSyntax
Addition+Adds the two operands togethernum1 + num2
for e.g 1 + 1 = 2
Subtraction-Subtracts the right operand from the first onenum1 - num2
for e.g 10 - 1 = 9
Multiplication*Multiplies the two operands togethernum1 * num2
for e.g 10 * 1 = 10
Division/Divides the left operand by the right onenum1 / num2
for e.g 10 / 2 = 5
Remainder or Modulus%Divides the left operand by the right one and returns the remaindernum1 % num2
for e.g 10 % 3 = 1
Exponential**Raises the left operand to the power of the right operandnum1 ** num2
for e.g 2 ** 3 = 8
Pre-increment++Increments the number by one and then returns it++num1
for e.g num = 10 then ++num would give 11
Post-increment++Returns the number and then increments it by onenum1++
for e.g num = 10 then num++ would give 10
Pre-decrement--Decrements the number by one and then returns it--num1
for e.g num = 10 then --num would give 9
Post-decrement--Returns the number and then decrements it by onenum1--
for e.g num = 10 then num-- would give 10

Assignment Operators

Assignment operators are used to assign values to variables. The right operands are first evaluated and then assigned to the one at the left.

With the exception of the basic assignment = operator, all other operators are shortcuts of the above operators.

The names mentioned in this table aren't conventional names. We use them to self-explain the operator's functionality. You can even try to come up with your own names. The purpose here is to explain their use, not their naming.
NameSymbolDescriptionSyntax
Assigned to=Assigns the right operand to the left operand which is a variablevariable = value
var x = 10, var text = "Hello!"
Add-assign+=Adds the right operand to the left operand and then assigns the result to the left operand

(A shortcut for variable = variable + value)		variable += value
x = 10 then x += 10 would set x as 20
Subtract-assign-=Subtracts the right operand from the left operand and then assigns the result to the left operand

(A shortcut for variable = variable - value)		variable -= value
x = 10 then x -= 10 would set x as 0
Multiply-assign*=Multiplies the right and left operands together and then assigns the result to the left operand

(A shortcut for variable = variable * value)		variable *= value
x = 10 then x *= 10 would set x as 100
Divide-assign/=Divides the left operand by the right operand together and then assigns the result to the left operand

(A shortcut for variable = variable / value)		variable /= value
x = 10 then x /= 10 would set x as 1
Remainder-assign%=Divides the left operand by the right operand together, gives the remainder and then assigns the result to the left operand

(A shortcut for variable = variable % value)		variable /= value
x = 10 then x /= 10 would set x as 1
Exponent-assign**=Raises the left operand to the power of the right operand and then assigns the result to the left operand

(A shortcut for variable = variable ** value)		variable **= value
x = 10 then x **= 2 would set x as 100

Comparison Operators

Comparison operators are widely used in programming and form a program's conditional flow. The are used mostly together with the if..else blocks but can also be used in other places like variable values, output console etc.

NameSymbolDescriptionSyntax
Equal to==Returns true if the the right and left operands are equal

Two different types can also return true since this isn't strict comparison		value == value
10 == 10 returns true
10 == "10" returns true
Not equal to!=Returns true if the right and left operands are not equal

Two different types can also return true since this isn't strict comparison		value != value
15 != 10 returns true
10 != 10 returns false
10 != "10" returns false
Identical to===Returns true if the right and left operands are identical i.e equal and of the same type

Two different types can never return true since this is strict comparison		value === value
15 === 10 returns false
10 === 10 returns true
10 === "10" returns false
Not identical to!==Returns true if the right and left operands are not identical i.e not equal and not of the same type

Two different types can never return true since this is strict comparison		value !== value
15 !== 10 returns true
10 !== 10 returns false
10 !== "10" returns true
Lesser than<Returns true if the left operand is lesser than the right onevalue < value
15 < 10 returns false
10 < 10 returns false
10 < "10" returns false
10 < 11 returns true
Greater than>Returns true if the left operand is greater than the right onevalue > value
15 > 10 returns true
10 > 10 returns false
10 > "10" returns false
10 > 9 returns true
Lesser than or equal to<=Returns true if the left operand is lesser than or equal to the right onevalue <= value
15 <= 10 returns false
10 <= 10 returns true
10 <= "10" returns true
10 <= 11 returns true
Greater than or equal to>=Returns true if the left operand is greater than or equal to the right onevalue >= value
15 >= 10 returns true
10 >= 10 returns true
10 >= "10" returns true
10 >= 9 returns true

Logical Operators

Logical operators are used to perform logical operations like AND, OR, NOT on the given operands. These operators are generally used in conditional testing to test for more than one condition in a single statement with either all being true, some being true, or none being true.

NameSymbolDescriptionSyntax
AND&&Returns true if all the operands return true and similarly returns false if either of the operands returns false.cond && cond
true && false gives false
OR||Returns true if either of the operands returns truecond || cond
true || false gives true
NOT!Returns true if the operand returns false.

It returns the opposite of what the operand(s) return(s).		!cond
!true gives false
!false gives true
!(false && true) gives true

And that's it for operators!

In conclusion

Operators are an extremely easy aspect of JavaScript programming; it's just that they are hefty in quantity and therefore seem to be challenging. As you will work with operators in JavaScript numbers, strings, conditions, loops you will become more and more familiar with them to such an extent that operations in JavaScript will seem like a very very basic topic.

But why wait for so long until so many units, before we can start to remember operators.