JavaScript Operators: The Basics You Need to Know

Hi readers, we will discuss operators in this blog. Let's first take one example to understand what an operator is and why it is required.

// Example:1.0
const total = 3+4;
console.log(total) // 7

In the above JavaScript code, we used the operator ( + ) to add two numbers, i.e., 3 and 4, and also have a fancy name operand.

Here are 2 fancy terms that came :

1. Operator

2. Operand

Operator: Operators are symbols already defined during language creation that have specific tasks. As in the above example, we used the symbol (+) to add two numbers, and when it is used between string values, it works like concat and merges two strings.

Some examples of operands are:- +,-,/,*,%, etc.

Operand: Operands are the values that operators act upon. In Example:1:0, 3 and 4 are operands on which the operator (+) is added to deliver the result as 7.

---

Let's explore the types of operators in JavaScript, discussing each one individually with examples:

Arithmetic Operators
It is used to perform mathematical calculations like addition, subtraction, division and multiplication as per the requirements in our code.

Some arithmetic operators are as follows:

Operator	Description	Example
+	Addition	3 + 4
-	Subtraction	7 - 3
*	Multiplication	3 * 4
/	Division	4 / 2
%	Modulus (remainder)	3 % 2

//Example:1.1

3 + 4 // 7 'adding two numbers 3 and 4 output will be 7'
7 - 3 // 4 'subtracting 3 from 7 giving output 4'
3 * 4 // 12 'multiplying 3 with 4 giving output 12'
4 / 2 // 2 'dividing 4 by 2 giving output 2'
3 % 2 // 1 'It is called Modulus (remainder) operator '

---

Assignment Operators
Suppose you are calculating a value using an assignment operator or any other operator and want to store it in one variable and later use it. The assignment operator does the same work for us. It is actually used to store computed values in a third variable, and we can use these variables whenever required.

Some assignment operators are as follows:

Operator	Example	Meaning
=	x = 10	Assign value
+=	x += 5	x = x + 5
-=	x -= 3	x = x - 3
*=	x *= 2	x = x * 2
/=	x /= 4	x = x / 4
%=	x %= 3	x = x % 3

let result;

result = 6+7;
console.log(result) //13 will be output after computing addition of 6 and 7

// above we have also used short hand assignment like 

let a=6

// and you want to add and assigne 3 we can do it as 

a = a + 3;

//but using short hand we can do it like : 

a += 3

// += means first add value to same variable and then assign it same goes to other like *= (multiply and assigne) /= (divide and assigne) etc

---

Comparison (Relational) Operators:

It actually compares two variables based on their values and type. If the comparison is successful, it will return true (sahi hai), else it will return false ( galat hai).

The following are some examples of Relational Operators:

Operator	Example
== Equal to	5 == "5"
=== Strict equal	5 === "5"
!= Not equal	5 != 3
!== Strict not equal	5 !== "5"
> Greater than	10 > 5
< Less than	5 < 10
>= Greater or equal	10 >= 10
<= Less or equal	5 <= 10

const a=5;
const b=6;
const c=5;

a==b // false // kya a or b equal hai result naa that's why false
a==c // true // kya a or c equal hai, as 5 == 5 so true
a>b // false // kya a bada hai b se 5 kaise 6 se bada ho sakta, false
a<b // true // kya a chota hai b se mtlab kya 5 chota hai 6 se bilkul
a>=b // false  // kya a bada ya equal hai b ke nahi ji na to bada hai na hi barabar is liye false output diya
a<=b // true // kya a chota ya equal hai b ke haji sahi pakra 5 to 6 se chota hi hota hai
a!=b // true // yaha pe ! ka matlab hota hai "nahi" matlab kya a or b equal nahi hai result aya true sahi to diya 5 or 6 kab se barabar hone lage 

We need to understand what strict equality(===) and strict not-equality(!==) are.

Strict equality (===) and strict not-equality (!==) compare both the values and their types. This means that 5 and "5" are considered different because one is a number and the other is a string. Let's discuss it with one example:

// first will discuss for strict equal 

const a=6;
const b="6";

a==b  // true --> here I am using equal to operator so result is true here because it is checking value only

a===b // false --> here I am using strict equal to which means it will check two thing 
// 1 . value which result ==>   
// 2 . type of value ===> one is number type other is string type so it will give false 
// and finally true && false ==> false so we see false 

// lets unfold !==

const d=5
const e="5"

d!=e // false beacuse here string value i.e "5" converted to number value 
// i.e 5 then it compare and result false as the are equal now.

d!==e // true beacuse here no string typecasting will happen it will check type as different and consider it as different and return true. 
// simple number not equal to string which means condition used here become true so we got true as output. 

---

Logical Operators:

Logical operators are used to combine multiple conditions or logical expressions and return a Boolean result. They are useful when making decisions in programs, especially in conditional statements where more than one condition must be evaluated.

Before going to different types of logical operators, we need to understand the working of a logic gate based on a truth table.

In the table above, we used the && (AND Operator), || (OR Operator), and ! (NOT Operator). Let's explore each with examples:

AND (&&)

It returns true only when both A and B are true. If either A or B is false, the result will be false. In programming, it is represented by the symbol. && .

let A=true
let B=false
let C=true
let D=false

console.log(A && B) // true && true ==> true, here both values are true that's why result will be true

console.log(A && B) // true && false ==> false, here one value is true and other is false so finally result will be false

console.log(B && A) // false && true ==> false, similar to above one value is true and other is false so output will be false.

console.log(B && D) // false && false ==> false, here both values are false so output become false

OR (||)

The logical OR operator returns true if at least one condition is true. It only returns false when both conditions are false. It is represented by a symbol. ||

let A=true
let B=false
let C=true
let D=false

console.log(A || B) // true && true ==> true, here both values are true that's why result will be true

console.log(A || B) // true && false ==> true, here one value is true and other is false so finally result will be true

console.log(B || A) // false && true ==> true, similar to above one value is true and other is false so output will be true.

console.log(B || D) // false && false ==> false, here both values are false so output become false

NOT (!)

The logical NOT operator reverses the given value, returning false if the input is true, and true if the input is false. It is represented by a symbol. !

let A=true
let B=false

console.log( !A ) // !true ==> false , It just resverse the provided true value to false 

console.log( !B ) // !false ==> true . similar to above here we have provide false as input so our output become true

Let's create a code for a website access system to understand logical operators:

let isLoggedIn = true;
let hasSubscription = false;
let hasFreeTrial = true;

// AND operator
if (isLoggedIn && hasSubscription) {
  console.log("Access premium content");
} else {
  console.log("Subscription required");
}

// OR operator
if (hasSubscription || hasFreeTrial) {
  console.log("User can watch videos");
} else {
  console.log("Please buy subscription");
}

// NOT operator
if (!isLoggedIn) {
  console.log("Please login first");
} else {
  console.log("Welcome user");
}

Thanks for reading...