Javascript Operators

When we start learning JS, after variables, we first encounter the operators. When some variables are declared, you need to perform some operations on those variables. Operators help to do some calculations, comparisons, or make decisions on variables.

In this blog, we will understand operators with simple examples.

What are Operators?

Operators are nothing but the symbols that perform operations. Let's take an example:

const a = 10;
const b = 20;

const c = a + b;

console.log(c); // 30

Here, + is the operator.

What are Operands?

Variables on which operation is done, are called operands.

const a = 10;
const b = 20;

const c = a + b;

Here:

• a is left operand

• b is right operand

Types of Operators

In JS, there are multiple types of operators, but we will cover the basic, mandatory operators in this blog.

1. Arithmetic operators (+, -, *, /, %)

2. Comparison operators (==, ===, !=, >, < , >=, <= )

3. Logical operators (&&, ||, !)

4. Assignment operators (=, +=, -=)

Let's understand them one by one:

Arithmetic Operators

These are used for basic mathematical operations.

Operator	Meaning	Expression	Result
+	Addition	9 + 3	12
-	Substraction	9 - 3	6
*	Multiplication	9 * 3	27
/	Division	9 / 3	3
%	Remainder	10 % 3	1

Comparison operators

These operators are used for comparison between two values and return a Boolean (true/false) value.

Operator	Meaning	Expression	Example
==	Equals (loose comparison)	"5" == 5	true
===	Equals (strict comparison)	"5" === 5	false
!=	Not equal (loose comparison)	"5" != 5	false
!==	Not equal (strict comparison)	"5" !== 5	true
<	Less than	5 < 10 5 < 5	true false
<=	Less than or equal to	5 <= 10 5 <= 5	true true
>	Greater than	5 > 2 5 > 5	true false
>=	Greater than or equal to	5 >= 2 5 >= 5	true true

Understanding loose and strict comparison is very important.

Why "5" == 5 gives a result of true?

When there is == operator, JS first converts the value to the same type before comparison.

Which means "5" (string) is first converted to 5 (number) and then 5 == 5 comparison gives true result.

Whereas in === strict comparison, JS does not change the type of both left and right operands and compares both the type and value.

On the left side, there is a string operand and on the right side, there is a number operand. That's why in a strict case it will give a false result.

Logical operators

These operators help in combining the conditions.

• &&
  This is also known as AND operator.

  Truthy Table

  A	B	Expression	Result
  true	true	true && true	true
  false	true	false && true	false
  true	false	true && false	false
  false	false	false && false	false

  By analysing the truthy table, we can see that even if one side of expression is false, the final result is false. In order to get true, both side values should be true.

• ||
  This is also known as OR operator

  Truthy Table

  A	B	Expression	Result
  true	true	true || true	true
  false	true	false || true	true
  true	false	true || false	true
  false	false	false || false	false

  Here we can see that if either side of the operator is true, the final result will be true. Only in the case of both sides of values to being false gives the false result.

• !
  This is known as the NOT operator. As the name suggests, it reverses the given value.

  Truthy Table

  A	Expression	Result
  true	!true	false
  false	!false	true

Assignment Operators

These operators are used to assign values to variables.

• =
  This is known as assign operator. It is used to assign a value to a variable.

let a;

a = 10;

console.log(a); // prints 10

• +=
  This is known as Add and assign operator

let a;

a = 10;

console.log(a); // prints 10

a += 5; // Adding 5 to a variable value and assing back

console.log(a) // prints 15

• -=
  This is known as the Subtract and assign operator

let a;

a = 10;

console.log(a); // prints 10

a -= 5; // Subtracy 5 from the variable value and assing back

console.log(a) // prints 5

Final thoughts

JavaScript operators are the building blocks of logic and calculations in your code. Mastering these will make your JavaScript journey much easier.

To learn JS from fundamentals to advanced, follow this series https://blog.ashishkumarsaini.dev/series/javascript-for-beginners