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.
Hopefully after this explanation you might have a bit of understanding of the difference between the three terms. So let's define them accordingly:
- Operations: are the functions performed on operands using a given operator.
- Operands: are values that can be operated.
- 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:
- Arithmetic Operators
- Assignment Operators
- Comparison Operators
- Logical Operators
Let's start!
Arithmetic Operators
Arithmetic operators perform arithmetic calculations on their operands like addition, subtraction, mutliplication etc.
| Name | Symbol | Description | Syntax |
|---|---|---|---|
| Addition | + | Adds the two operands together | num1 + num2 for e.g 1 + 1 = 2 |
| Subtraction | - | Subtracts the right operand from the first one | num1 - num2 for e.g 10 - 1 = 9 |
| Multiplication | * | Multiplies the two operands together | num1 * num2 for e.g 10 * 1 = 10 |
| Division | / | Divides the left operand by the right one | num1 / num2 for e.g 10 / 2 = 5 |
| Remainder or Modulus | % | Divides the left operand by the right one and returns the remainder | num1 % num2 for e.g 10 % 3 = 1 |
| Exponential | ** | Raises the left operand to the power of the right operand | num1 ** 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 one | num1++ 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 one | num1-- 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.
| Name | Symbol | Description | Syntax |
|---|---|---|---|
| Assigned to | = | Assigns the right operand to the left operand which is a variable | variable = 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.
| Name | Symbol | Description | Syntax |
|---|---|---|---|
| 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 one | value < 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 one | value > 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 one | value <= 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 one | value >= 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.
| Name | Symbol | Description | Syntax |
|---|---|---|---|
| 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 true | cond || 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.