JavaScript Operators Made Easy: A Practical Guide

What are Operators ?

Operators are some mathematical symbol that can be used to perform an operation between variables.

Types of Operators

Arithmetic Operator
Assignment Operator
Comparison Operator
Logical Operator
Ternary Operator
Bitwise Operator

Arithmetic Operators

Arithmetic operations refer to basic mathematical procedures used to manipulate numbers. These operations are foundational in mathematics and are commonly used for calculations in everyday life, science, engineering, and various fields.

let a = 10
let b = 2

console.log(a + b) // addition
console.log(a - b) // subtraction
console.log(a * b) // multiplication
console.log(a / b) // division (result will be quotient)
console.log(a % b) // return the remainder 
console.log(a ** b) // exponent 10^2

//increment and decrement
console.log(a++) // means a = a + 1
/* first we use the value of a then we increase it by 1 and 
next time we use a, it will be an increased value. */

console.log(a--) // means a = a - 1
/* first we use the value of a then we decrease it by 1 and 
next time we use a, it will be an increased value */

console.log(++a)
// first the increment take place then the value will be used 

console.log(--a)
// first the decrement takes place then the value will be used

Assignment Operator

It is used to assign the value to a variable. The = we use to initialize a variable's value is called assignment operator.

// more on assignment 

let d = 20

console.log(d += 5) // d = d + 5
console.log(d -= 2) // d = d - 2
console.log(d *= 2) // d = d * 2
console.log(d /= 2) // d = d / 2
console.log(d %= 2) // d = d % 2 
console.log(d ** 2) // power of 2

Can you guess the value of d ??????????

Comparison Operator

It is used to compare the values and returns a boolean expression i.e. either true or false

let x = 20
let y = 10

console.log(x == y) // Does the value equal
console.log(x != y) // Does the value not equal
console.log(x === y) // Does the value and type of value are equal
console.log(x !== y) // Does the value and its type not equal
console.log(x > y) // Does the value of X greater than y
console.log(x < y) // Does the value of X is smaller than y
console.log(x >= y) // Does the value of X is greater or equal to y
console.log(x <= y) // Does the value of x is smaller or equal to y

Logical Operator

It is used to perform logical operations, they are often use in control flow statements like if and else and conditions to determine how code behaves based on boolean values.

It includes ANDOR and NOT

Logical AND

&& represents AND operator, meaning every condition must be satisfied to perform a statement.

Logical OR

|| represents OR operator, meaning any of the condition should satisfy the criteria.

Logical NOT

! represents the NOT operator, meaning reverse of the boolean expression. If it is true, do false and if false, do true.

let  j = 20
let g = 10
console.log(j > 100 && g < 100) 
/* both the condition should be true otherwise it will return false */

console.log(j > 100 || g < 100)
/* anyone of the conditons be true to return true.*/

console.log(!true) 
// revert the value.

Ternary Operator

Modified version of conditional statements
Easy to use

They are the substitute for if else conditions. we use ? to denote the if and : to denote the else

// using IF and else
let a = 20
if (a < 100){
    console.log("higher") // if the condition is true
}
else{
    console.log("lower") // if the condition is false
}

// using Ternary Operator
let a = 20
(a < 100) ? console.log("higher") : console.log("lower")

Bitwise Operator

They operate at binary level.
use for bit manipulation
These are useful for tasks when working with low level data structures
Manipulating individual bits within an integer.

Bitwise AND

&represent the bitwise AND operator. IF a bit is set to 1 as both operands then the result will be 1. IF any of the corresponding bit is 0 then it will set as 0

BItwise OR

|represents the bitwise OR operator. If any of the bit are set to 1 then the result will be 1 and if both bits are set to 0 then it returns 0 as well

Bitwise NOT

~ represents the bitwise NOT operator. It inverts the bits. 1 becomes 0 and 0 becomes 1

Bitwise XOR

^represents bitwise XOR. This operator returns a number where each bit is set to 1 if only one of the corresponding bits in the operands is 1. If both bits are the same, it's set to 0.

Bitwise left shift

<<represents bitwise left shift. This operator shifts the bits to the left by a specified number of places, filling in the new bits on the right with 0s.

Bitwise right shift

>>represents bitwise right shift. This operator shifts the bits to the right by a specified number of places, retaining the sign bit for signed integers.

Bitwise Zero-fill right shift

>>represents bitwise zero fill right shift. This operator shifts the bits to the right by a specified number of places, filling in the new bits on the left with 0s, regardless of the sign bit.

// Bitwise AND (&)
const a = 5; // Binary: 0101
const b = 3; // Binary: 0011
const result = a & b; // Binary: 0001, Decimal: 1

// Bitwise OR (|)
const result = a | b; // Binary: 0111, Decimal: 7

// bitwise XOR (^)
const result = a ^ b; // Binary: 0110, Decimal: 6

// bitwise NOT (~)
const result = ~a; // Binary: 1010, Decimal: -6 (due to signed integers)

// bitwise left shift (<<)
const result = a << 1; // Binary: 1010, Decimal: 10

// bitwise right shift (>>)
const x = 10; // Binary: 1010
const result = x >> 1; // Binary: 0101, Decimal: 5

// bitwise zero fill right shift (>>>)
const p = -10; // Binary: 11110110 (in a 32-bit environment)
const result = p >>> 1; // Binary: 01111011, Decimal: 2147483643

You have Learned JavaScript operators.................

If you want more such content then make sure to following me on all available platform

Instagram

LinkedIn

Hashnode

Thank you for reading 🤍

Written By Mohit Soni