JavaScript Operators: The Basics You Need to Know

Introduction

To be honest when i first time here the name operator it's sound to me like hospital operations, But it's kind of true too.

Operators are the foundation of how we manipulate variables, whether they are numbers, strings, or booleans.

Let's understand with example,

The Kitchen Metaphor

• So, Variables are the Ingredients like The flour, sugar and eggs sitting in bowls on your counter. They hold the "stuff" you're working with.

• And the Operators are the Appliances , like when we make dough by mixing and combine flour, sugar and eggs, then keeping it in the oven, bread is made from it. So, we transforms the state of the ingredient. then scale the means check if the bread fully cooked or not.

In JavaScript operator also works the some, But it's doesn't mean we make bread using variable.

---

What are Operators ?

So basically, Operator is a special symbol used to perform actions on variables and values. They are fundamental building blocks for creating expressions and manipulating data

Expression means,

If you can replace a piece of code with a value (like a number, string, or boolean) without breaking the logic, it is an expression.

In technical terms, a JavaScript expression is any valid unit of code that resolves to a single value.

Code Example:

let total = 50 + 25; 

// The '50 + 25' part is the EXPRESSION (It resolves to 75)
// 50 and 25 are the operands the value
// and the '+' is the assignment operator

Why Operators are important and there use case.

Let understand with example,

You are using Google pay app to buy online game.

So, the app needs operators to handle the entire "behind-the-scenes" logic.

First, The Transaction

The app needs to calculate your new balance. It uses Arithmetic to find the difference and Assignment to update your account.

Then, the Security Check

Before you can buy the game, the app must ask: "Do you have enough money?" It uses a Comparison operator to get a true or false answer.

Last, the Final Approval

But a real app usually checks more than one thing. Maybe it checks if you have enough money AND if the game is currently in stock.

There are fore type of operator we are discussing in this article

• Arithmetic Operators

• Comparison Operators

• Logical Operators

• Assignment Operators

---

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

These work exactly like a calculator. Every time you use an app, these are running in the background. In JavaScript, these are the same basic operators you learned in primary school, plus a few special ones for programming.

These perform the basic math we use every day.

The main Arithmetic Operators in JavaScript are:

• + (Addition): Adds two values (operands).

• - (Subtraction): Subtracts the second operand from the first.

• * (Multiplication): Multiplies two operands.

• / (Division): Divides the first operand by the second.

• % (Modulus): Returns the remainder of a division operation.

1 . Arithmetic with Strings

If you add two number it's gives addition of two numbers, But in case of string it's it performs concatenation means merge the two strings instead of addition.

Code Example:

let x = 10 + 5;                           // Output: 15 (Number)
let y = "10" + 5;                         // Output: "105" (String)
let z = "Hello " + "My self Dipali";      // Output: "Hello My self Dipali"

2 . Modulo (Remainder):

The modulo operator % returns the remainder left over after division.

Code Example:

let x = 12 % 5;           // Output: 2

3 . Exponentiation :

• ** Raises the first operand to the power of the second operand.

code Example:

• 2 ** 3 is 2 raised to 3 (2 *2 *2), which equals 8.

let y = 2 ** 3;           //Output:8

4 . Increment & Decrement :

These are shorthand operators used to increase or decrease a variable's value by exactly 1.

• Increment(++): Increases the value of a variable by one (can be prefix or postfix).

• Increment (++): x++ is the same as x = x + 1.

• Decrement(--): Decreases the value of a variable by one (can be prefix or postfix)

• Decrement (--): x-- is the same as x = x - 1.

Code Example:

let x = 10;
const y = x++;       //Output: "x:10, y:11" 

let a = 10;
const b = y--;      //Output: "a:10, b:9"

---

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

These compare two values and always return a Boolean values, where the comparison true or not. The operands can be numerical, string, logical, or object values.

The main Comparison Operators in JavaScript are:

• Loose Equality Operator (==)

• Strict equality Operator (===)

• Inequality Operator (!=)

• Greater than Operator (>)

• Less than Operator (<)

1 . Loose Equality Operator (==) :

The Loose Equality (==) Operator checks its two operands are equals or not then returns the Boolean value. it's used to convert and compare the operands different types.

Code Example:

"1" == 1;             // true
"kuku" == "muku";     // false
null == undefined;    // true
0 == false;           // true
0 == undefined;       // false
NaN == NaN;           // false

2 . Strict Equality Operator (===) :

The Strict Equality (===) Operator checks its two operands are equals or not then returns the Boolean value. The strict equality operator always considers operands of different types to be different.

Code Example:

"3" === 3;             // false
true === 1;            // false
true === true;         // false
"kuku" === "kuku";     // true
"kuku" === "muku";     // false
NaN === NaN;           // false
null === undefined;    // false

• Difference between == and === clearly

The Loose equality (==) operators compare if both the value means operands some or not, But when thirds (=) equal sign comes in means the Strict equality operators (===) it's checks whether the type of operands some or not.

Code Example:

"10" == 10;          
//true (it's only sees the value)

"10" == 10;           
//false (the type "10" is string and 10 is a number)

true == 1;            
// true (the true also consider as value 1)

true === 1;           
// false (true always be true that's why it's false)

null == undefined;    
// true (both of them have empty value)

null === undefined;   
// false (because the type is different)

3 . Inequality Operator (!=) :

The Inequality (!=) Operator checks whether its two operands are not equal, returning a Boolean result true or false. It attempts to convert and compare operands that are of different types.

Code Example:

10 != 10;               // false 
"10" != 10;             // false 
"Namste" != "Namste";   //false
0 != false;              // false
null != undefined;       // false

4 . Strict Inequality Operator (!==) :

The Strict Inequality (!==) Operator checks whether its two operands are not equal, returning a Boolean result true or false. The strict inequality operator always considers operands of different types to be different.

Code Example:

"kuku" !== "kuku";       
// false (same value and data type)

"kuku" !== "muku";       
// true (both have different value)

null !== null;           
// false (null is always equal to null)

"3" !== 3;               
// true ("3" is string and the 3 is the number)

null !== undefined;      
// true (because the type is different)

5 . Greater Than Operator (>) :

The greater than (>) operator returns the boolean value. true if the left operand is greater than the right operand, and false otherwise.

Code Example:

"5" > 3;         
// true (it's convert "5" into number 5 then compare to 3)

"3" > 3;        
// false ( 3 never be greater than 3 both are some values)

3 > 5;          
// false (3 is not greater than 5)

true > false;    
// true (true has the value 1 and false has 0 that's why)

true > 1;        
// false (value of true is 1 and 1 is not greater than 1)

"kuku" > 4;      
// false ("kuku" is string and failed to convert into the number so 
//the result is NaN and NaN is not greater than 4)

"kuku" > "kuku"; 
// false (it starts at the first character of both strings "k" and 
//"k" then is moves to second, it's continue until it reach the end 
//so every single character of these string is some and length also 
//that's why) 

6 . Greater Than or Equal (>=):

The greater than or equal (>=) operator returns true if the left operand is greater than or equal to the right operand, and false otherwise.

Code Example:

"5" >= 3;         
// true (it's convert "5" into number 5 then compare to 3)

"3" >= 3;        
// true (both the value are some, 1 equal to 1)

true >= false;    
// true (true has the value 1 and false has 0 that's why)

true >= 1;        
// true (value of true is 1)

"muku" >= 4;      
// false ("muku" is string and failed to convert into the number so 
//the result is NaN and NaN is not greater than 4)

"kuku" >= "muku"; 
// false (it starts at the first character of both strings "k" and "m",
// In alphabet rule "k" comes before "m". so, "k" has a lower value 
//than "m" and then entire string "kuku" is considered less than "muku") 

7 . Less Than Operator (<) :

The less than (<) operator returns true if the left operand is less than the right operand, and false otherwise.

Code Example:

7 < 2;
// false (7 is not less than 2)

3 < 3;
// false (both have same value)

"10" < 13;
// true (it's convert "10" into number 10 then compare to 13)

false < true; 
// true (the truth always greater than the lie)

"kuku" < "muku"; 
// true (it starts at the first character of both strings "k" and "m", 
//In alphabet rule "k" comes before "m". so, "k" has a lower value than //"m" and then entire string "kuku" is considered less than "muku") 

8 . Less Than or Equal Operator (<=) :

The less than or equal (<=) operator returns true if the left operand is less than or equal to the right operand, and false otherwise.

Code Example:

5 <= 5;
//true (both have same value)

"3" <= 5; 
// true (it's convert "3" into number 3 then compare to 5)

"muku" <= 4; 
// false ("muku" is string and failed to convert into the number so 
//the result is NaN and NaN is not greater than 4)

//Note: In JavaScript, NaN is never less than, greater than, or equal 
//to any other number. It fails every single numeric test.

---

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

logical operator is mostly used to make decisions based on conditions specified for the (if, else) statements. It can also be used to manipulate a boolean or set termination conditions for loops.

Truthy and Falsy values:

In JavaScript, every value has it's own inherent value either "truthy" or "falsy" when evaluated in a boolean context.

If a value can be converted to true, the value is so-called truthy. If a value can be converted to false, the value is so-called falsy.

• Falsy values include false, 0, empty strings (""), null, undefined, and NaN.

• Truthy values are all other values (e.g., non-zero numbers, non-empty strings, objects).

The Logical operators in JavaScript are:

• Logical AND Operator(&&)

• Logical OR Operator(||)

• Logical NOT Operator(!)

1 . Logical AND Operator (&&) :

The Logical AND (&&) Operator returns true only if both operands are true. If the first one is false, it doesn't even bother looking at the second one.

Code Example:

true && true;         //true 
true && false;        //false
5 > 3 && 10 < 20;     //true (Both the true)
null && true;         //returns null(it's falsy value)
"" && false;           //returns "" (it's falsy value)

2 . Logical OR Operator(||) :

The Logical OR || Operator returns true if at least one of the operands is true. It only returns false if both sides are false.

Code Example:

true || false;         //true
false || false;        //false
5 > 10 || 2 > 1;       //true (One side is true, So Output is true)
null || true;          //true(if one is true then it's gives true)
"" || false;           //false 

3 . Logical NOT Operator(!) :

The Logical NOT ! Operator is a "unary" operator, meaning it only works on one value. It simply flips the boolean value.

Code Example:

!true;          //false
!false;         //true
!"";            //true ("" is a falsy value and NOT operator flips)
!"muku";        //false (Any string with at least one character is truthy,
                //and the NOT operator flips the boolean value)

---

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

An assignment operator assigns a value to its left operand based on the value of its right operand.

The Assignment operators in JavaScript are:

• Basic Assignment Operators (=)

• Addition Assignment Operator (+=)

• Subtraction Assignment Operator (-=)

1 . Basic Assignment Operators (=) :

The assignment (=) operator is used to assign a value to a variable or property.

Syntax: x = y

Code Example:

let num1 = 2;
let num2 = "kuku";

console.log(num1);               //Output: 2
console.log(num2);               //Output: "kuku"

2 . Addition Assignment Operator (+=) :

The addition assignment (+=) operator performs addition (which is either numeric addition or string concatenation) on the two operands and assigns the result to the left operand.

Syntax: x += y

Code Example:

let num = 2;
let pet = "hello";

console.log((num += 8));
// Addition (num = num + 8)
//Output: 10 

console.log((pet += " My self muku")); 
// Concatenation (pet = pet + "My self muku")
//Output: "hello My self muku"

3 . Subtraction Assignment Operator (-=)

The subtraction assignment (-=) operator performs subtraction on the two operands and assigns the result to the left operand.

Syntax: x -= y

Code Example:

let num2 = 11;

console.log(a -= 1);
// Output: 10

console.log(a -= "kuku"); 
// you cannot mathematically subtract a string.
// Output: NaN

---

Assignment Idea

1 . Perform arithmetic operations on two numbers

Code Example:

let num1 = 10;
let num2 = 2;

let add = num1 + num2;
console.log(add);               //Output: 12

let sub = num1 - num2;
console.log(sub);               //Output:8  

let multi = num1 * num2;
console.log(multi);             //Output:20

let dev = num1 / num2;
console.log(dev);               //Output:5

let mod = num1 % num2;
console.log(mod);               //Output:0

let inc = num1++;
console.log(inc);               //Output:11

let dec = num2--;
comsole.log(dec);               //Output:1

2 . Compare two values using both == and ===

Code Example:

let num1 = 5;
let num2 = "5";

//Loose Equality Operator
let bothEqual = num1 == num2;
console.log(bothEqual);                    //Output: true

//Strict Equality Operator
let bothStriclyEqual = num1 === num2;
console.log(bothStriclyEqual);             //Output: false

3 . Write a small condition using logical operator

Code Example:

let num1 = 10;
let num2 = 6;

//Logical AND (&&) Operator 
if (num1 > 0 && num2 > 15) {
  console.log("Both the conditions are false!"); //Output: false
}

//Logical OR (||) Operator
if(num1 > 2 || num2 < 90) {
console.log("At least one condition is true");  //Output: true
}

//Logical NOT (!) Operator
if(typeof num1 !== "number") {
console.log("x is not a number");              //Output: false
}

---

Conclusion

Operators are the tools JavaScript uses to manipulate values and build expressions. Think of variables as ingredients and operators as the appliances that transform them.

Mastering common operators (arithmetic, assignment, comparison, logical, and ternary) lets you perform calculations, compare data, and control program flow. Practice small, real examples and you’ll quickly see how operators power everyday tasks in JavaScript.