Operators in JavaScript

You must have learned the mathematical operators till now. e.g addition +, multiplication *, division /, subtraction and many more.
There are two types of operator.

  • Unary

    Unary operator requires only one operand.
    like operator operand ( ++x ) or operand operator ( x++ )

  • Binary

    Binary operator requires two operands.
    like operand operator operand ( x + y )

Note: operand is one on which operation is applied.

Assignment Operators

An assignment operator evaluates of the right operand and assigns that value to its left operand. e.g. var x = y;. In this sample, a value of y ( right operand ) is assigned to x ( left operand ).
There are more compound assignments. Please have a look at following code.


var x = 3, y = 5;

x += y; // meaning: x = x + y;
x *= y; // meaning: x = x * y;
                    

Right now, we have just looked at two compound assignments. You will have more idea in coming arithmetic operators and other operators.

Comparison Operators

Comparison Operators compares its operands and returns boolean value whether both operands are same or not.

== ( Equal ) and != ( Not equal )

== and != don't compare type. They only compare value.

  • ==

    Returns true if both operands are equal.

  • !=

    Returns true if both operands are unequal.


console.log("3" == 3); //output: true
console.log(3 == 3); //output: true
console.log(3 == "4"); //output: false

console.log("3" != 4); //output: true
console.log("3" != 3); //output: false
console.log("3" != "3"); //output: false
                    

As from above code, we can see that == and != only compares value. They don't check type. For that, JavaScript converts both the operands into appropriate type and then compares both. Most of the times, operands are converted into a number.

=== ( Strict equal ) and !== ( Strict not equal)

=== and !== compares value and type. So === and !== compares the operands strictly. Please have a look at the following code to get more idea.


console.log("3" === 3); //output: false
console.log(3 === 3); //output: true
console.log(3 === "4"); //output: false

console.log("3" !== 4); //output: true
console.log("3" !== 3); //output: true
console.log("3" !== "3"); //output: false
                    

Other Operators

Other operators are as per following:

  • > ( Greater than )

    > returns true if left operand is greater than right operand.

  • >= ( Greater than or equal )

    >= returns true if left operand is greater than or equal to right operand.

  • < ( Less than )

    < returns true if left operand is less than right operand.

  • <= ( Less than or equal )

    <= returns true if left operand is less thaor equal to right operand.


console.log("12" > 2); //output: true
console.log(12 > 12); //output: false
console.log(12 > 13); //output: false 

console.log("12" >= 2); //output: true
console.log(12 >= 12); //output: true
console.log(12 >= 13 ); //output: false

console.log("12" < 2); //output: false
console.log(12 < 12); //output: false
console.log(12 < 13); //output: true

console.log("12" <= 2); //output: false 
console.log(12 <= 12); //output: true
console.log(12 <= 13); //output: true 
                    

Arithmetic Operators

An arithmetic opertator performs arithmetic operation on its operand/operands. Standard arithmatic operatros are +, -, / and *.

Standard arithmetic operators

Standard arithmetic operators work with integer and floating point numbers. Please have a look at the following code.


let number1 = 10, number2 = 21;
console.log(number1 + number2); //output: 31
console.log(number1 - number2); //output: -11
console.log(number1 / number2); //output: 0.47619047619047616
console.log(number1 * number2); //output: 210
                    

As you can see, these are binary arithmetic numbers as they are having two operands.

% (Remainder)

% (Remainder) is a binary operator which returns the integer remainder of dividing two operands.
Please have a look at the following code.


console.log(5 % 2); //output: 1
console.log(6 % 3); //output: 0
console.log(7 % "4"); //output: 3
console.log(7 % "4n"); //output: NaN
                    

While working with %, if one of an operand is in a string, then JavaScript will try to convert into a number and then performs the operation. And if a string cannot be converted into a number, then the output will be NaN.

++ (increment) and -- (decrement)

The ++ adds 1 to the operand. And -- subtracts 1 from the operand. ++ and -- have two forms.

  • postfix
  • counter++ and counter--

  • prefix
  • ++counter and --counter

Let us have a look at postfix forms and then prefix forms.


let counter = 0;
console.log(counter++); //output: 0
console.log(counter); //output: 1

console.log(counter++); //output: 1
console.log(counter); //output: 2

console.log(counter--); //output: 2
console.log(counter); //output: 1

console.log(counter--); //output: 1
console.log(counter); //output: 0
                    

As you can see, postfix ++ returns the value before adding 1. So, console.log(counter++); returns the value of counter and then adds 1 to counter.
Postfix -- returns the value before subtracting 1. So, console.log(counter--); returns the value of counter and then subtracts 1 from counter.
Now have a look at prefix forms.


let counter = 0;
console.log(++counter); //output: 1
console.log(counter); //output: 1
                        
console.log(++counter); //output: 2
console.log(counter); //output: 2
                        
console.log(--counter); //output: 1
console.log(counter); //output: 1
                        
console.log(--counter); //output: 0
console.log(counter); //output: 0
                    

As you can see, prefix ++ returns the value after adding 1. So, console.log(++counter); adds 1 to the counter and then returns the value of counter.
Prefix -- returns the value after subtracting 1. So, console.log(--counter); subtracts 1 from the counter and then returns the value of counter.
-- and ++ work with one operator, so it is unary operator.

- (Unary Negation)

- (Unary negation) returns negation of the operand and is Unary operator.


let counter = 3;
console.log(-counter); //output: -3

let counter1 = "3";
console.log(-counter1); //output: -3

let counter2 = "3n";
console.log(-counter2); //output: NaN
                    

When working with unary negation, if an operand is a string, then JavaScript tries to convert to number and if cannot be converted to a number, then returns NaN.

+ (Unary plus)

+ (Unary plus) tries to convert the operand to number. It is a unary operator.


console.log(+3); //output: 3
console.log(+"3"); //output: 3
console.log(+true); //output: 1
console.log(+false); //output: 0
console.log(+""); //output: 0
console.log(+null); //output: 0
console.log(+undefined); //output: NaN
console.log(+NaN); //output: NaN
                    

** (Exponentiation Operator)

Calculates the base to the exponent power that is code exponent .


console.log(2 ** 3); //output: 8
console.log(10 * -1); //output: 0.1
                    

Falsy Values

Before starting the logical operators, you need to learn about falsy values.
By Falsy Values means the values which returns false in logical operation.
There are 6 falsy values in JavaScript.

  • undefined
  • null
  • false
  • 0
  • "" or '' (empty string)
  • NaN
Other than above values, everything is truthy values.
You will have more idea about falsy values in if..else section.

Logical Operators

Most of the times, logical operators are used with boolean values, they return a boolean value. But logical operators can be used non-boolean value and then they return non-boolean value. There are three types of logical operators.

  • || (Logical OR)
  • && (Logical AND)
  • ! (Logical NOT)
We will see them one by one.

|| (Logical OR)

In operand1 || operand2, it returns operand1 if it is true else returns operand2.
When used with non-boolean operands, it returns operand1 (first operand) if it is truthy value (Not falsy value).


console.log(true || true); //output: true
console.log(true || false); //output: true
console.log(false || true); //output: true
console.log(false || false); //output: false

console.log("a" || "b"); //output: "a"
console.log("" || "b"); //output: "b"
console.log(false || ""); //output: ""
                    

&& (Logical AND)

In operand1 && operand2, it returns operand1 if it is false else returns operand2.
When used with non-boolean operands, it returns operand1 (first operand) if it is falsy value.


console.log(true && true); //output: true
console.log(true && false); //output: false
console.log(false && true); //output: false
console.log(false && false); //output: false

console.log("a" && "b"); //output: "b"
console.log("" && "b"); //output: ""
console.log(false && ""); //output: false
                    

! (Logical NOT)

In !operand, it returns true if operand is falsy value.


console.log(!""); //output: true
console.log(!undefined); //output: true

console.log(!true); //output: false
console.log(!"abc"); //output: false
                    

Bitwise Operators

Bitwise operators are used when working with binary numbers. They treat operands in 32 bits rather than decimal, hexadecimal or octal numbers.
Below is the list of the bitwise operators.

  • & (Bitwise AND)
  • | (Bitwise OR)
  • ^ (Bitwise XOR)
  • ~ (Bitwise NOT)
  • << (Left Shift)
  • >> (Right Shift)
  • >>> (Zero Right Shift)

Bitwise operators are not commonly used in JavaScript. So we are not covering this part. If you need more info, then please follow this MDN article.

Conclusion

In this section, you learned about the different type of operators. There are other operators too. You will be learning in coming sections.
In next section, you will learn about the destructuring assignment in JavaScript.