JS Operators Part One

Operator

Operators are the symbols that instruct the Javascript engine to perform an action

For example, + is an operator to add two variables, — is an operator to subtract two variables, =, >, < are the operators to compare two variables.

Operands

The quantity on which an operation is to be done.

5 * 4 = 20 
5 is the left operand and 4 is the right operand

Operands are also known as “Arguments”.

Javascript supports the following Operators:

1. Arithmetic Operator

2. Assignment Operator

3. Comparison Operator

4. Logical Operator

5. Bitwise Operator

6. Conditional Operator

Revising the Data Types and Variables topics would really help to understand the operators.

1. Arithmetic Operator

The operators used to perform arithmetical operations.

Operator             Description
   +                  Addition
   -                 Subtraction
   *                 Multiplication
   /                  Division
   %                  Modulus
  **                 Exponentiation

1.1 Increment Operator

Increment Operator (++) increments the variable value by one

syntax:
++x (or) x++  

Pre-Increment: Increments by one, then return x

line 5 : Evaluates the expression, returns 10
line 6 : Increments the value, and assigns the expression, x = 11
... So on..

Post-Increment: Returns x, then increment by one

line 5 : Evaluates the expression, returns 10
line 6 : Evaluates the expression, Increment the value, returns 10
line 7 : Evaluates the expression, returns 11

What is happening here .? Before incrementing the value, the expression is evaluated. x++ operation is performed after the printing(output) the x value.

Difference between Pre-Increment and Post-Increment Operator

Pre Increment: Increments the value and execute the expression/ statement

Post Increment: Evaluate the expression/ statement, then increments the value

1.2 Decrement Operator

Increment Operator (--) increments the variable value by one

syntax: 
x--(or)--x

Pre-decrement: Decrements the value by one, then return x

line 4 : Evaluates the expression, returns10
line 5 : Decrements the value and assigns the variable, x = 9
line 6 : Evaluates the expression, returns 9

Post-Increment: Returns x, then decrements the value by one

line 4 : Evaluates the expression, returns 10
line 5 : Evaluates the expression, then value is incremented, returns 10
line 6 : Evaluates the expression, returns 9

Difference between Pre-decrement and Post-decrement

Pre Decrement: Decrements the value and execute the expression/ statement

Post Decrement: Evaluate the expression/ statement, then decrements the value

The same applies to the decrements

Use cases of Increment/ Decrement Operator

Pre-Increment 
If we want to increment the value and use it right now. Then use ++xPost-Increment
If we want to increment the value, and want to use the previous value. Then use x++

Increment/ Decrement Operator inside an expression

let x = 1; 
console.log(5 * ++x); //10let x = 1;
console.log(5 * x++); // 5, because x returns the previous value

One example for my satisfaction for the understanding of Pre and Post Increment;)

“Unary”, “Binary” Operators

Unary Operator: An operator with one operand

let x = 1;
x = -x;
alert(x);     //-1, Here the operator is unary minus

Binary Operator: An operator with two operands

let x = 10;
let y = 5;
alert(x + y);  // 15, binary plus adds the value

String Concatenation

The + Operator concatenates two strings

let a = “Hello, ”; // space after the comma
let b = "World!";(or)let a = "Hello,";
let b = " World!"; // space before W, both spaces has same results.

Number as a String

Whatever we writes inside “ ” is a String. Example : “21” Javascript takes it as a String, not as a number Data Type . So, here 21 is not a number anymore

line 4 : Both operands are numbers. Addition operation performed.
line 5 : 10 is Number and 5 is a String. So both operands are concatenated.
line 6 : 10 is a String and 5 is a number. So both operands are concatenated.
line 7 : Both 10s are Numbers and 5 is a String. 10s are added and concatenated with String 5.
line 8 : Both 10s are String. So both concatenated together. 

Rules :

Strings concatenate each other. Numbers are added as normal arithmetic operation.

If any of the operand is a String, then the other operand is converted to a String too. Doesn’t matter whether the first operand or the second operand is a string.

If there are two or more operands and if the third operand is a string followed by two numbers, then the numbers will be added before it being converted to a String.

The above rules are only for binary +. The other arithmetic operators like —, *, / work only with numbers. It converts operands to a Number Data Type before the operation even if it is a String.

Strings to Numbers

We have seen what is unary and binary operators. See how it works to convert a String to a Number

Both string variables women and men are converted to a Number variable before the binary plus operation (Red Box). Code in the green box

Adding + before the variable converts a String variable to a Number variable, Here ‘+’ in the “+women, and +men“ is an unary plus

Booleans to Numbers

alert( +true );  // 1, true is converted to 1 using unary plus
alert( +false ); // 0, false is converted to 0
alert ( +"" );   // 0, empty string converted to 0

Operator Precedence

Operator precedence is the order of execution of an arithmetic expression with more than two operands

console.log(10 + 5 * 3); // 25, First Multiplication then Addition

The precedence table shows the range ordered from 1(lowest) to 20(highest). The unary plus has a higher priority of 16 than the binary plus of 12. So in the example (men, women variable), the unary plus works first and then the binary plus(addition). See the table of precedence for more clarification.

Comma Operator

Comma Operator allows us to evaluate several expressions dividing by comma.

If we evaluate and try it assigns it to a variable, both expressions are evaluated, but the first expression result is thrown away and the second expression is evaluated and returns the result, because

2. Assignment Operator

Assignment operator ‘=’ assign the values to the variables.

let x = 10; // = is the assignment operator
alert(x);

Various assignment operators

Operator         Description              Example         Equals 
   =               Assign                 x = y           x = y
   +=           Add and Assign            x += y          x = x + y
   -=        Subtract and Assign          x -= y          x = x - y
   *=         Multiply and Assign         x *= y          x = x * y
   /=         Divide and Assign           x /= y          x = x / y
   %=      Divide and Assign modulus      x %= y          x = x % y

Assignment operator “=” has the priority of 3 in the precedence table. That is the reason why the assignment operator “=” is used at the last of an expression like

let x = 10 + 5 * 2;

Other arithmetic operators like +, —, *, /, % are higher in order than assignment operator “=” except yield and comma.