DEV Community

ViGnEsH
ViGnEsH

Posted on

“JavaScript Operators Explained Simply”

Arithmetic operators

“Arithmetic operators perform basic mathematical operations like addition, subtraction, multiplication, and division.”
👉 Use image showing: + - * / % **

let a = 10, b = 3;

console.log("Addition:", a + b);        // 13
console.log("Subtraction:", a - b);     // 7
console.log("Multiplication:", a * b);  // 30
console.log("Division:", a / b);        // 3.33
console.log("Remainder:", a % b);       // 1
console.log("Power:", a ** b);          // 1000
console.log("Floor:", Math.floor(a/b)); // 3
Enter fullscreen mode Exit fullscreen mode

Ok, but the number and string complain about what happened Number + String

Converts number to string and joins

let a = 10;
let b = "5";

let result = a + b;
console.log(result); // "105"

Enter fullscreen mode Exit fullscreen mode

👉 Important: - (minus) is NOT like +
It always tries to convert values to numbers.

Subtraction
let a = 10;
let b = "5";

let result = a - b;
console.log(result); // "5"
Enter fullscreen mode Exit fullscreen mode

❌ Invalid String

let a = "hello";
let b = 5;

console.log(a - b); // NaN
Enter fullscreen mode Exit fullscreen mode

Assignment operators

“Assignment operators are used to assign and update values in variables.”

👉 Show:= += -= *= /= %=

```let x = 5;

x += 3; // x = x + 3 → 8
x -= 2; // 6
x *= 2; // 12
x /= 4; // 3
x %= 2; // 1

console.log(x);

Comparison Operators

  • They are used to compare two values
  • Result is always: true or false

Equal (==) – Loose Equality

console.log(5 == 5); // true
console.log(5 == "5"); // true

`Explanation:

Checks value only

Automatically converts type.

Strict Equal (===) – Strong Equality

console.log(5 === 5); // true
console.log(5 === "5"); // false

`✅ Explanation:

Checks value + type

No conversion

👉 number ≠ string.`

⚠️ Important Difference
console.log(0 == false); // true
console.log(0 === false); // false

👉 == converts → both become 0

👉 === checks type → different

Not Equal (!=)
console.log(5 != 3); // true
console.log(5 != "5"); // false

✅ Converts type like ==

Strict Not Equal (!==)

console.log(5 !== "5"); // true
console.log(5 !== 5); // false

✅ Checks value + type

Greater Than (>)

console.log(10 > 5); // true
console.log(5 > 10); // false

Less Than (<)
`

console.log(3 < 5); // true`

Greater Than or Equal (>=)

console.log(5 >= 5); // true
console.log(6 >= 5); // true

Less Than or Equal (<=)
`console.log(4 <= 5); // true

console.log(5 <= 5); // true`

⚠️ Tricky Cases (Very Important)

1. Null & Undefined



console.log(null == undefined);  // true
console.log(null === undefined); // false


```plaintext

<u>2. Boolean Conversion</u>

Enter fullscreen mode Exit fullscreen mode

console.log(true == 1); // true
console.log(false == 0); // true


<u>3. Empty String</u>

Enter fullscreen mode Exit fullscreen mode

console.log("" == 0); // true
console.log("" === 0); // false

---------------------------------
**Logical Operator**s

👉 Used for **conditions**

Enter fullscreen mode Exit fullscreen mode

let a = true, b = false;

console.log(a && b); // false
console.log(a || b); // true
console.log(!a); // false


✅ **Explanation:**

`&& → both true

|| → any one true

! → opposite`
----------------------------------
**Increment / Decrement**

Increase or decrease value.

Enter fullscreen mode Exit fullscreen mode

let x = 5;

x++; // 6
x--; // 5

console.log(x);

**Prefix vs Postfix**

Enter fullscreen mode Exit fullscreen mode

let a = 5;

console.log(++a); // 6 (first increase)
console.log(a++); // 6 (then increase)

---------------------------------------

**I can give a question for Increment / Decrement**

Enter fullscreen mode Exit fullscreen mode

let i=4;
let j=5;
let result = i++ + --j + ++j -i++ -i++ ;
console.log(result);
console.log(i)
console.log(j)




--------------------  
“Guess what the values of result, i, and j are.”
Enter fullscreen mode Exit fullscreen mode

Top comments (0)