DEV Community: Soubhagya Dash

Array Methods You Must Know

Soubhagya Dash — Fri, 02 Oct 2026 19:11:13 +0000

Today, we’re going to explore some of the most commonly used array methods with suitable examples and visually understand how each method works.

The methods we're going to cover are:-

push() and pop()
shift() and unshift()
map()
filter()
reduce()
foreach()

Let's get started with the first one:-

1. push() and pop()

Using these two methods makes easy to add or remove elements from the end of an array.

push() :-

Using push() method we can add an element in the end of an array.

Let's take an real life example to understand how it works:-

I am a shoe-obsessed person . So, I have a collection of shoes from different brands (Puma, Nike, and Adidas) in my shoe rack.

let myShoeCollection = ["Puma", "Nike", "Adidas"]

console.log(myShoeCollection)        // [ 'Puma', 'Nike', 'Adidas' ]

However recently 'One8' launched it's shoes with the signature of Virat Kohli. So I couldn’t ignore them for too long and finally purchased a pair 🤩. Now I have to keep them in my shoe rack. So i just have to do it like:-

let myShoeCollection = ["Puma", "Nike", "Adidas"]

myShoeCollection.push("One8")

console.log(myShoeCollection)    // [ 'Puma', 'Nike', 'Adidas', 'One8' ]

So, here, we've added 'One8' in the end of myShoeCollection using the push() method.

pop() :-

Using pop() method, we can remove an element from the end of an array. It's the exact opposite of push method.

let's continue the same story:-

After a few days, my friend asks me to borrow the 'One8' shoes for a date. So i just have to take the shoes out of the shoe rack. So i can do it like this:-

let myShoeCollection = ["Puma", "Nike", "Adidas", "One8"]
console.log(myShoeCollection)      // [ 'Puma', 'Nike', 'Adidas', 'One8' ]

myShoeCollection.pop()
console.log(myShoeCollection)      // [ 'Puma', 'Nike', 'Adidas']

Javascript will automatically remove the last element of myShoeCollection. We don't have to mention the element's name inside the parentheses. So, here, we've removed an element from the last of an array using pop() method.

2. shift() and unshift()

Using these two methods makes easy to add or remove elements from the start of an array.

shift() :-

Using shift() method, we can remove only the first element of an array.

Let's take an real life example to understand how it works:-

Imagine that you are distributing prasad in a temple. Many devotees are standing in line, waiting for their turn to receive the prasad.

let turnForPrasad = ["Ali", "Karan", "Swayam", "Ayesha"]

console.log(turnForPrasad)    // [ 'Ali', 'Karan', 'Swayam', 'Ayesha' ]

Now you witness that Ali said something disrespectfully about God. So, you decide to remove him from the line without giving him the prasad. You can do something like this:-

let turnForPrasad = ["Ali", "Karan", "Swayam", "Ayesha"]

let removedPerson = turnForPrasad.shift()

console.log(turnForPrasad)    // [ 'Karan', 'Swayam', 'Ayesha' ]
console.log(removedPerson)    // Ali

Without giving the element's name, javascript will remove the first element from turnForPrasad and the other elements will shift to their previous positions.

In the above example, we've stored the removed element in a variable named removedPerson so that we can see what was actually removed.

So, here, we've removed an element from the beginning of an array using the shift() method.

unshift() :-

Using unshift() method, we can add elements in the beginning of an array. It's the exact opposite of shift method.

Let's continue to the story again:-

Now, you see that two people with disabilities are standing in line for prasad. You are a warm-hearted person, so you don't want to see them struggle for so long. That's why you decide to let them move to the front of the line. So, you can do it like:-

let turnForPrasad = ["Karan", "Swayam", "Ayesha"]

turnForPrasad.unshift("PWD-1", "PWD-2")   // PWD means person with disability

console.log(turnForPrasad)    // [ 'PWD-1', 'PWD-2', 'Karan', 'Swayam', 'Ayesha' ]

So, here, we've added 'PWD-1' & 'PWD-2' in the beginning of turnForPrasad using the unshift() method. You can push as many elements as you want.

3. map():-

Using the map() method, we can perform an operation on each element of an array. The main thing to remember is that after performing the given operation, the map() method stores the changed elements in a new array, while the original array remains unchanged.

Let's see how it works though:-

let myArray = [20, 6, 18, 9, 13]
console.log("Before map:", myArray)         // Before map: [ 20, 6, 18, 9, 13 ]

let doubledValue = myArray.map(function(num){
    return num * 2;
})

console.log("After map:", myArray);        // After map: [ 20, 6, 18, 9, 13 ]
console.log("New doubled array", doubledValue);       // New doubled value [ 40, 12, 36, 18, 26 ]

Let's understand the map() method with a real-life example:

Imagine you have an array containing some amounts in US Dollars ($). For some business purpose, you want to convert each amount from US Dollars ($) to Indian Rupees (INR).

This is where the map() method can help you:

let inDollar = [20, 6, 18, 9, 13]
console.log("Cash In Dollar:", inDollar)         // Cash In Dollar: [ 20, 6, 18, 9, 13 ]

let inINR = inDollar.map(function(num){
    return num * 96;                         // 1 dollar = 96.25 INR
})

console.log("Cash In INR", inINR);         // Cash In INR [ 1920, 576, 1728, 864, 1248 ]

4. filter():-

Using the filter() method, we can select specific elements from an array based on a given condition. The elements that satisfy the condition are stored in a new array, while the original array remains unchanged.

let's see how it works:-

let randomNumbers = [5, 10, 15, 20, 25]
console.log("Before filter:", randomNumbers)       // Before filter: [ 5, 10, 15, 20, 25 ]

let aboveTen = randomNumbers.filter(function(num){
    return num > 10;                         
})

console.log("After filter:", randomNumbers)        // After filter: [ 5, 10, 15, 20, 25 ]
console.log("Numbers above 10 are:", aboveTen);     // Numbers above 10 are: [ 15, 20, 25 ]

Let's move on to a real-life example:

Imagine you are an English teacher, and you have the results of all your students in an array. Now, you want to find out which students scored 75 or more than 75.

You can do it like this:

let marks = [62, 80, 75, 28, 95]
console.log("Marks In English", marks)       // Marks In English [ 62, 80, 75, 28, 95 ]

let above75 = marks.filter(function(num){
    return num >= 75;                         
})

console.log("marks above 75 are:", above75);     // marks above 75 are: [ 80, 75, 95 ]

5. reduce():-

Using the reduce() method, you can combine all the elements of an array and turn them into a single value. The original array remains unchanged like map() & filter(), and the final result will be returned by reduce().

Let's take an example and understand it line by line.

let randomNumber = [10, 20, 30, 40]
console.log("Before reduce:", randomNumber)         // Before reduce: [ 10, 20, 30, 40 ]

let totalNumber = randomNumber.reduce(function(accumulator, currentValue){
    return accumulator + currentValue;                         
}, 0)

console.log("After reduce:", randomNumber)         // After reduce: [ 10, 20, 30, 40 ]
console.log("Addition of each number is:", totalNumber);         // Addition of each number is: 100

Steps how a reduce() works:-

When we use the reduce() method on randomNumber, which is an array, reduce() will start with [10, 20, 30, 40].
We have to give an initial value from where we want to start the calculation. Here, 0 becomes the initial value of the accumulator.
reduce() will go to the first value (10) of the given array and store it in currentValue. Then, it adds it to the accumulator value (0 + 10 = 10).
Now, the accumulator will be updated to 10.
Then, reduce() will go to the 2nd element (20) of the array, and currentValue will be updated to 20. Then, it adds it to the accumulator (10 + 20 = 30), and so on...
After the last element (40) of the array performs the operation, reduce() returns the final result, which is stored in the accumulator.

Let's dry-run the code to better understand what's happening with reduce():-

Accumulator	Current Value	Operation	Accumulator = New Total
`0`	`10`	`0 + 10`	`10`
`10`	`20`	`10 + 20`	`30`
`30`	`30`	`30 + 30`	`60`
`60`	`40`	`60 + 40`	`100`

Now move on to a real-life example:-

let, you are now shopping in Zudio and you've decided to take a linen shirt, a straight fit jeans, a pair of chelsea shoe and a perfume. You can calculate it like:-

const cart = [599, 799, 1049, 299];

const totalPrice = cart.reduce(function(acc, curr) {
    return acc + curr
} , 0);

console.log("Total price:",totalPrice);          // Total price: 2746

6. forEach():-

Using the forEach() method, we can loop through every element of an array. You don't have to declare an initial value, use an increment operator, or set a condition. forEach() automatically loops through every element of the given array.

Let's see the workflow of forEach():-

forEach() doesn't return a new array or the result of the function, that's why if you try to store it's result in a variable, you'll get undefined. So don't use forEach() like this:-

let myArray = [10, 20, 30, 40];

let printedArray = myArray.forEach(function (val) {
    console.log("Adding 5 to every element:", val + 5);
});

console.log(printedArray);     // undefined

The correct way to write forEach() is:-

let myArray = [10, 20, 30, 40];

myArray.forEach(function (val) {
    console.log("Adding 5 to every element:", val + 5);
});

console.log("After operation:", myArray)       // After operation: [ 10, 20, 30, 40 ]

Let's move on to a real-life example:-

Today, you decide to buy some fruits (apples, oranges, mangoes, and litchis). So, you go to a fruit store in your local market and tell the shopkeeper:

let fruits = ["Apple", "Oranges", "Mango", "Lichi"]

fruits.forEach(function(fruit) {
    console.log("Give me 1kg of:", fruit)
})

/*
Give me 1kg of: Apple
Give me 1kg of: Oranges
Give me 1kg of: Mango
Give me 1kg of: Lichi
*/

for loop vs map/filter :-

The methods we discussed above can also be used to achieve the same things with loops.

So, you might think:

Why do we have to use methods instead?

Let's see how these methods reduce verbosity and make JavaScript a lot easier to write and understand.

Case 1

You have given an assignment that "double each number of a given array".
Using for loop you'll do like this:-

let givenArray = [10, 15, 20, 30]
let doubledArray = []

for (let i = 0; i < givenArray.length; i++) {
    doubledArray.push(givenArray[i] * 2)
}

console.log(doubledArray);

Instead of writing this much code, you can simply use map() method:-

let givenArray = [10, 15, 20, 30]

let doubledArray = givenArray.map(num => num * 2)     // Here this is written as an arrow function.

console.log(doubledArray);     // [ 20, 30, 40, 60 ]

Case 2

Now the assignment is "filter out numbers greater than 10".
Let's see using for loop:-

let numbers = [10, 404, 18, 5, 101];
let filteredNumbers = [];

for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] > 10) {
    filteredNumbers.push(numbers[i]);
  }
}

console.log(filteredNumbers);       // [ 404, 18, 101 ]

Now using filter() method:-

let numbers = [10, 404, 18, 5, 101];

let filteredNumber = numbers.filter(num => num > 10);   // using arrow function

console.log(filteredNumber);      // [ 404, 18, 101 ]

See how much cleaner and more readable the code becomes with array methods. Hopefully, by now, you have a better understanding of the importance of these methods.

Important Tips for Beginners

Try everything in the console - Open your browser's developer tools (F12) and test these methods yourself. See what happens!
Don't chain methods initially - Write them step by step. Once you're comfortable, you can do things like:

let result = numbers
     .filter(num => num > 10)
     .map(num => num * 2);

Remember what each method returns:

push/pop/shift/unshift → change original array
forEach → nothing (undefined), just performs action
map → new array of same length
filter → new array (may be shorter)
reduce → single value

Original array remains unchanged for map, filter, and reduce - they create new arrays/values.

Overview:-

Method	What it does	Returns	Changes original?
`push()`	Adds to end	New length	Yes
`pop()`	Removes from end	Removed element	Yes
`shift()`	Removes from start	Removed element	Yes
`unshift()`	Adds to start	New length	Yes
`forEach()`	Does something for each	`undefined`	No
`map()`	Transforms each item	New array	No
`filter()`	Keeps items that pass test	New array	No
`reduce()`	Combines all items	Single value	No

Conclusion

Array methods are like special tools in your JavaScript toolbox. Instead of building everything from scratch with loops, you can use these methods to write cleaner, more readable code.

Remember:

push/pop and shift/unshift are for adding/removing items
forEach is for doing something with each item
map is for transforming each item into something new
filter is for picking only certain items
reduce is for combining everything into one value

The more you practice these, the more natural they'll become. Soon you'll find yourself reaching for these methods automatically instead of writing loops!

Pro tip: Keep your browser console open while coding and test each method as you learn. See what happens when you use them with different arrays.

_______________________________ X _______________________________

Hope you liked this blog. If there's any mistake or something I can improve, do tell me. You can find me on LinkedIn and X, I post more stuff there.

That’s it for Today! It was a good learning session. Now, time to move on to the next concept.✌️

Understanding Arrays in JavaScript for Beginners

Soubhagya Dash — Sat, 26 Sep 2026 12:22:41 +0000

Today, we’re going to learn why arrays are needed, what arrays are, and how to loop through them.

So, let’s get started with why arrays came into JavaScript in the first place.

Imagine you have to store marks of some students in your batch. Imagine arrays didn’t exist, how would you store multiple marks?
Probably like this:-

let mark1 = 87
let mark2 = 69
let mark3 = 92
.
.
.
let markn = 56

These codes already seem full of verbosity. Now, imagine that you have 100 or more students. What would you do then?

You probably wouldn’t want to repeat the above process 100 or more times. To solve this problem, JavaScript introduced arrays.

What is an array?

An array is a data structure that allows us to store multiple values together under a single variable. Or you can say it is a collection of values stored in order.

Instead of writing those verbose codes, we can create an array like this:-

let marks = [87, 69, 92, 78, 56]

Each value stored inside an array is called an element. So, each element can be any data type (string, number, boolean...).

let random = [51, "hyyy", true, null, undefined]

We can access each element inside the array using its index.

So, here a question arises: what is an index?

Inside an array, each element has an individual position where we can access an element. These positions are called indexes of an array.
So, in JavaScript, indexing of an array starts from 0.

Let's look for an example how can we access an element using it's index.

let marks = [87, 69, 92, 78, 56]
console.log(marks[1])                     // 69

We can see how many elements there are in an array using the length property. To use the length property, simply write it like this:

let marks = [87, 69, 92, 78, 56]
let elementCount = marks.length ;
console.log(elementCount)                     // 5

Even if we store an array in a variable, we can still add and make changes to it.

we can update an element right after we stored it.

let marks = [87, 69, 92, 78, 56]
marks[2] = 46;
console.log(marks)                     // [87, 69, 46, 78, 56]

Imagine, you have an assignment to print all the elements in an array. You may do something like this :-

let marks = [87, 69, 92, 78, 56]
console.log(marks[0])
console.log(marks[1])
console.log(marks[2])
console.log(marks[3])
console.log(marks[4])

Isn’t it a problem to print all the elements one by one? Imagine there are 100 elements in an array. Are we going to print all 100 elements one by one?

We run into the same problem again. To solve this problem, we use loops.
So, let’s talk about some loops that help us go through the elements of an array.

for loop
while loop
do...while loop
for...of loop

for loop

A for loop is used when you want to repeat a block of code multiple times. This is the most usable loop in javascript.

The basic syntax of for loop is :-

for (initialization; condition; update) {
    // code to repeat
}

Let's take an example of for loop:-

let marks = [87, 69, 92, 78, 56]

for (let i = 0; i < 5; i++) {
    console.log(marks[i])
}

// 87
// 69
// 92
// 78
// 56

Let’s understand how it works with a quick dry run:-

i	Condition (i < 5)	console.log(marks[i])	i++ / Update
0	0 < 5 (true)	87	1
1	1 < 5 (true)	69	2
2	2 < 5 (true)	92	3
3	3 < 5 (true)	78	4
4	4 < 5 (true)	56	5
5	5 < 5 (false)	---	---

Here the code will process 6 times but the code will print 5 times.

Basically,

Use this loop when you exactly know how many times you want the code to run.

How a for loop works:-

i = 0
Here, i represents the index of the array. We start the loop from index 0, because array indexing starts from 0.
i < 5
Here, we give a condition that tells the loop when to continue. The loop will continue as long as the value of i is less than 5.
i++
Here, we use the increment operator to increase the value of i by 1 after each iteration. If we don't update i, its value would always remain the same, and the loop could continue forever.

Execution of the loop:-

First, the loop starts with i = 0. Then, it checks whether the condition is true or false. If the condition is true, the code inside the block scope is executed. After that, i gets updated using i++, and the loop starts again. This process continues until the condition becomes false.

`While` loop

A while loop is also used when you want to repeat a block of code as long as a condition is true.

The basic syntax of while loop is :-

while (condition) {
    // code to execute
}

Let's take an example of while loop:-

let marks = [87, 69, 92, 78, 56]

let i = 0
while (i < marks.length) {
    console.log(marks[i])
    i++;
}

// 87
// 69
// 92
// 78
// 56

Basically,

Keep running the code untill the task in complete

You can think it as:-

I only know the condition but don't know how may iterations.

Execution of the loop:-

Mainly, we have to declare a variable with the starting index number outside the loop. First, the loop starts by checking the condition. If the condition is true, the code inside the block scope is executed. After that, the value of i is updated using i++, and the loop checks the condition again. This process continues as long as the condition is true. When the condition becomes false, the loop stops.

`do...while` loop

The do...while loop is used when you want the code to run at least once, and then check the condition.

The basic syntax of do...while loop is :-

do {
  // code to execute
} while (condition);

Let's take an example of do...while loop:-

let marks = [87, 69, 92, 78, 56];

let i = 0;         // index
do {
    console.log("this is a number: " + marks[i]);
    i++;
} while (i < marks.length);


// this is a number :87
// this is a number :69
// this is a number :92
// this is a number :78
// this is a number :56
// this is a number :undefined

i	console.log(marks[i])	i++ / Update	Condition (i <= 5)
0	87	1	1 <= 5 (true)
1	69	2	2 <= 5 (true)
2	92	3	3 <= 5 (true)
3	78	4	4 <= 5 (true)
4	56	5	5 <= 5 (true)
5	undefined	6	6 <= 5 (false)

Basically,

It'll run at least one time, even if the condition is false.

Execution of the loop:-

First, we initialize i with the starting index number (0). JavaScript enters the do block and accesses marks[i]. Since i is 0, it prints the first element (87). After each iteration, i is increased by 1, so JavaScript moves to the next index and prints the next element. This continues until i becomes 5. At this point, marks[5] is undefined because the array only has indexes from 0 to 4. After that, i becomes 6, and JavaScript checks i < marks.length --> 6 < 5, which is false, so the loop stops.

`for...of` loop

for...of lets you directly get each value one by one without worrying about the index.

The basic syntax of while loop is :-

for (let variable of iterable) {
    // code
}

Let's take an example of while loop:-

let marks = [87, 69, 92, 78, 56]

for (const mark of marks) {
    console.log(mark)
}

// 87
// 69
// 92
// 78
// 56

How a for...of loop works:-

Here you don't have to worry for initialization, condition or an update. for...of loop goes direct through each elements in an array.
Here mark is the variable we declared directly that stores the current value of the array.
we've to put the array name that we want to iterate in place of iterable.
of tells javascript to take the value from marks.

Execution of the loop:-

First, the for...of loop takes the first value from the array and stores it in the declared variable (mark). Then, the code inside the block scope is executed. After that, the loop automatically takes the next value from the array and executes the code again. This process continues until there are no more values left in the array, and then the loop stops.

_______________________________ X _______________________________

And that's a wrap!
Today, we explored arrays in JavaScript, learned how to work with them, and saw how loops can help us easily go through the elements.

This is just the beginning—there's a lot more to explore with arrays!

That’s it for Today! It was a good learning session. Now, time to move on to the next concept.✌️

Control Flow in JavaScript: If, Else, and Switch Explained

Soubhagya Dash — Fri, 25 Sep 2026 10:18:16 +0000

So far, we’ve learned how JavaScript stores and works with data. Now let’s see how it makes decisions.

In real life we always end up making some decisions like:-

You’ve finally found the perfect pair of shoes. 👟
You check the price… ₹2,000.
Then you check your wallet… ₹2,500.
If your budget is enough -> Congratulations, those shoes are coming home with you! 🛍️
Else -> Time to close the tab and save some money. 😭💸

In JavaScript, code doesn’t always execute blindly from top to bottom. It can make decisions about what to execute, what to skip, and what to repeat. That’s where Control Flow comes into the picture - it determines the path your code follows while executing.

const isBudgetFriendly = true

if(isBudgetFriendly) {
console.log("Home coming new shoes")
} else {
console.log("Save money! Try next time")
}

Now, let’s explore each control flow statement one by one.

Conditional Statement:-

We've previously read some conditional operators. So we know that using them, we can make some conditions. As a result, it comes with a boolean value. So, using these conditions, we can write conditional statements.

Basically, Conditional statements are a type of control flow statement that allow JavaScript to make decisions based on whether a given condition is true or false.

These are some conditional statements in javascript we're going to cover:-

if statement
if...else statement
else if ladder
switch statement

let's move to the first one...

1. `if` statement

This statement contains only one condition and executes only when that condition is true. It is the simplest form of a conditional statement in JavaScript.

this is the syntax of an if statement.

if (condition) {
 // what to do
}

In real life, we often do something only when a particular condition is satisfied. An if statement works in exactly the same way; if the condition is true, the code inside it gets executed.

Let's take a look for a real example:-

Let's assume the results are finally out… 😰 If your marks are 40 or above -> You’re officially a survivor. 🎉

let marks = 72;

if (marks >= 40) {
    console.log("You passed! 🎉");          // You passed! 🎉
}

how code runs in step by step:-

Firstly javascript will check if the condition is true or not.
If the condition is true then it'll execute the code inside it's block scope.
If the condition is false javaScript simply skips that block and moves to the next line of code.

2. `if else` statement

This statement works on the basis of two possible conditions. If the condition is true, it does one thing; otherwise, it does something else. We can handle two possible outcomes at a time using the if...else statement.

this is the syntax of an if else statement.

if (condition) {
 // Do something
} else {
 // Do another thing
}

In real life, we often make decisions based on whether a particular condition is true or false. An if...else statement works in the same way; if the condition is true, the code inside the if block gets executed, otherwise, the code inside the else block gets executed.

Let's take a look for a real example:-

The moment of truth has finally arrived… 😰
You open your result, your heart starts racing, and then you look at the marks.
If your marks are 40 or above → Congratulations! You made it! 🎉
Else → Looks like it’s time for another battle. 📚😭

let marks = 65;

if (marks >= 40) {
    console.log("You passed! 🎉");
} else {
    console.log("Better luck next time! 📚");
}

how code runs in step by step:-

First, JavaScript checks whether the condition is true or not.
If the condition is true, it executes the code inside the if block and ignores the else block.
If the condition is false, JavaScript moves to the else block and executes the code inside it.

3. `else if` statement

The else if condition comes into play when you have multiple conditions. If the very first condition is true, JavaScript executes its code. Otherwise, JavaScript moves to the second condition. If the second condition is also false, it moves to the third condition, and this continues until it finds a true condition or reaches the last condition.

this is the syntax of an else if statement.

if (condition) {
 // Do something
} else if (condition2) {
 // Do another thing
} else {
 // Do something else
}

In real life, we often face situations where there can be multiple possible outcomes. An else if statement helps us handle these situations by checking different conditions one by one.

Let's take a real-life example:

The results are finally out… 😰 You open your marks and now your fate is decided!
If 90+ --> You’re a topper! 🏆
Else if 75+ --> Solid B! 😎
Else if 60+ --> You made it! 🫡
Else --> Time for the comeback! 📚😭

let marks = 82;

if (marks >= 90) {
    console.log("Grade A 🏆");
} else if (marks >= 75) {
    console.log("Grade B 🔥");            // Grade B 🔥
} else if (marks >= 60) {
    console.log("Grade C 👍");
} else {
    console.log("Time to hit the books again! 📚😭");
}

How the code runs step by step:

If the first condition is true, the code inside the if block executes, and the remaining conditions are ignored. Otherwise, JavaScript moves to the next condition.
If the second condition (else if) is true, it executes the code inside its block and ignores the remaining conditions.
This process continues until a condition is satisfied.
If none of the else if conditions is true, JavaScript moves to the final else statement and executes the code inside the else block.

4. `switch` statement

A switch statement is used when you want to check one value against multiple possible values.

the syntax of the switch statement is:-

switch(expression) {

  case value1:
    // code
    break;

  case value2:
    // code
    break;

  default:
    // code if none of the cases match

}

In real life, we often come across situations where there are many possible choices. A switch statement helps us handle these situations by checking a value and choosing the matching option.

Imagine you are driving and you reach a traffic signal.
If the signal is red, you stop.
If the signal is yellow, you wait and get ready .
If the signal is green, you go.
The action depends on the current color of the signal.

A switch statement works in a similar way. It checks the value of the signal and performs the action associated with that value.

let signal = "green" ;

switch(signal) {

  case "red":
    console.log("Stop");
    break;

  case "yellow":
    console.log("Wait and get ready");
    break;

  case "green":
    console.log("Gooooo");
    break;

  default:
    console.log("Not a valid signal");

break works when the case matches to the value and it tells javascript to stop right now.

default executes only when none of the test cases matches.

How the code runs step by step:-

First, it evaluates the expression written inside the switch.
It then checks the value against each case one by one.
When it finds a case that matches the value, the code inside that case is executed.
If the case contains a break statement, JavaScript stops the execution of the switch and moves to the code after it.
If none of the cases match, JavaScript executes the default block, if it is present.

Difference between `if...else if` and `switch`

Both if...else if and switch statements are conditional control statements used to make decisions in a program based on different possibilities.

But the main difference is how they check those possibilities.

if...else if is used when we need to check different conditions that contain comparisons such as greater than, less than, equal to, or logical operations.

switch is used when we have one value and want to compare it with multiple specific values, called cases.

Basically Use switch when you have one value and want to compare it with many possible values.

_______________________________ X _______________________________

That's it for today! We covered all the major control flow statements in JavaScript and understood how they work with different conditions.
See you in the next one! ✌️

JavaScript Operators: The Basics You Need to Know

Soubhagya Dash — Tue, 22 Sep 2026 18:33:48 +0000

Heyy there !! In this article, we’ll cover all the operators in JavaScript. Some things you might already know, and some things you’ll get to learn today. So, what are we waiting for? Let’s gooooo!

operators are basically very powerful tools in programming. They are useful to:-

Manipulate data
perform calculation
logic building
Without operators, a programming language would only be able to store values.

What is an operator ?

An operator is a symbol or keyword that tells the computer what operation it should perform on values or variables, while on which we apply operators are called as operands.

Basically operators are classified as 2 types:-

By functionality
By number of operands

1. By functionality

By functionality, we mean those operators that perform a specific task and don't depend on the operands.

Let's talk about some operators that are classified by functionality:-

Assignment operators
Arithmetic operators
Comparison operators
Logical operators

Assignment operators (=, +=, -=, =, *=, /=, %=)

In simple terms, an assignment operator is one or two symbols that are used to assign a value to a variable.

The most common assignment operators are:

= (Assign)

When we want to assign some value in variables, we have to store the values using assignment(=) operator.

let spiderMan = "Peter Parker";
let lifeSpan = 69;

Here we stored Peter Parker and 69 in the variable using the = operator.

there are some more assignments operators in Javascript. Let’s take x = 4 and y = 2for all the assign operators:

Operator	Name & Example	Same As	Result
`=`	Assign (`x = y`)	`x = y`	`x = 2`
`+=`	Add and assign (`x += y`)	`x = x + y`	`x = 6`
`-=`	Subtract and assign (`x -= y`)	`x = x - y`	`x = 2`
`*=`	Multiply and assign (`x *= y`)	`x = x * y`	`x = 8`
`**=`	Exponentiate and assign (`x **= y`)	`x = x ** y`	`x = 16`
`/=`	Divide and assign (`x /= y`)	`x = x / y`	`x = 2`
`%=`	Modulus and assign (`x %= y`)	`x = x % y`	`x = 0`

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

An arithmetic operator is one or more symbols that tells the computer what mathematical operation it should perform on values or variables.

The most common arithmetic operators are:

+ (Addition)

This operator is used to add two values. If the two operands are numbers, the result is the same as the mathematical addition of those numbers.

let num1 = 5
let num2 = 4
console.log(num1 + num2)           // 9

In addition, if either operand is a string, JavaScript will treat the other operand as a string as well.

let num1 = 5
let num2 = "4"
let num3 = 3
console.log(num1 + num2)           // 54

console.log(num1 + num3 + num2)           // 84

The addition operator can also be used to concatenate string values. When the + operator is used with strings, it joins the values together instead of performing mathematical addition.

let fName = "Zyan"
let lName = "Malik"
console.log(fName + lName)           // ZyanMalik

let age = 22
console.log(fName + age)             //Zyan22

- (Subtraction)

This operator is used to subtract two values. If the two operands are numbers, the result is the same as the mathematical subtraction of those numbers.

let num1 = 5
let num2 = 4
console.log(num1 - num2)           // 1

Now think,

If either operand is a string, what would be the result of the subtraction?

let num1 = 5
let num2 = "4"
console.log(num1 - num2)           // 1

When we use an arithmetic operator with a string, JavaScript tries to convert the string into a number and then performs the calculation.
For example, 5 - "4" becomes 5 - 4, so the result is 1.

Most arithmetic operators work this way. However, the + operator is different because it can also join strings together, which is called concatenation.

but when you try to subtract non-number values as a string, then the output will show it's not a number (NaN).

let fName = "Zyan"
let lName = "Malik"
console.log(fName - lName)                 // NaN

* (Multiplication)

This operator is used to multiply two values. If the two operands are numbers, the result is the same as the mathematical multiplication of those numbers.

let num1 = 5
let num2 = 4
console.log(num1 * num2)           // 20

If either operand is a string, JavaScript first converts the string into a number and then performs the multiplication. So, the result will be the same as we would expect from normal multiplication.

let num1 = 5
let num2 = "4"
console.log(num1 * num2)           // 20

when you try to multiply non-number values as a string, then the output will show it's not a number (NaN) just like subtraction.

let fName = "Zyan"
let lName = "Malik"
console.log(fName * lName)                 // NaN

/ (Division)

This operator is used to divide two values. If the two operands are numbers, the result is the same as the mathematical division of those numbers.

let num1 = 50
let num2 = 5
console.log(num1 / num2)           // 10

let num3 = "10"
console.log(num1 / num3)           // 5

let fName = "Zyan"
let lName = "Malik"
console.log(fName / lName)         // NaN

% (Modulus)

This operator is used to find the remainder when one value is divided by another. If the two operands are numbers, the result is the same as the mathematical remainder of those numbers.

let num1 = 50
let num2 = 5
console.log(num1 % num2)           // 0

let num3 = "10"
console.log(num1 % num3)           // 0

let fName = "Zyan"
let lName = "Malik"
console.log(fName % lName)         // NaN

** (Exponentiation)

This operator is used to raise a number to a certain power. If both operands are numbers, it gives the same result as normal mathematical exponentiation.

let num1 = 5
let num2 = 2
console.log(num1 ** num2)           // 25

let num3 = "2"
console.log(num1 ** num3)           // 25

let fName = "Zyan"
let lName = "Malik" 
console.log(fName ** lName)         // NaN

Here, we have used num1 ** num2, which is mathematically equivalent to 5². That's why the value is 25.

++ (Increment)

The increment operator (++) is a shorthand for increasing a value by 1. Basically, the increment operator means increase the value by 1.

If the increment operator is placed after the variable (num1++), it is called postfix increment. It means return the value first, then increase it by 1.

let num1 = 5
console.log(num1++)             // 5
console.log(num1)               // 6

If the increment operator is placed before the variable (++num1), it is called prefix increment. It means increase the value first, then return the updated value.

let num1 = 5
console.log(++num1)             // 6

-- (Decrement)

The decrement operator (--) is a shorthand for decreasing a value by 1. Basically, the decrement operator means decrease the value by 1.

If the decrement operator is placed after the variable (num1--), it is called postfix decrement. It means return the value first, then decrease it by 1.

let num1 = 5
console.log(num1--)             // 5
console.log(num1)               // 4

If the decrement operator is placed before the variable (--num1), it is called prefix decrement. It means decrease the value first, then return the updated value.

let num1 = 5
console.log(--num1)             // 4

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

Comparison operators are used to compare two values. These operators always return true or false.

Let’s take x = 5 for all the comparison operators:-

Operator	Description	Example (`x = 5`)	Result
`==`	Equal to	`x == 8`	`false`
		`x == 5`	`true`
		`x == "5"`	`true`
`===`	Equal value and type	`x === 5`	`true`
		`x === "5"`	`false`
`!=`	Not equal	`x != 8`	`true`
`!==`	Not equal value or type	`x !== 5`	`false`
		`x !== "5"`	`true`
		`x !== 8`	`true`
`>`	Greater than	`x > 8`	`false`
`<`	Less than	`x < 8`	`true`
`>=`	Greater than or equal to	`x >= 8`	`false`
`<=`	Less than or equal to	`x <= 8`	`true`

You might have a question in your mind:-

What is the differenece between == and === ?

Let me clarify this question:-

The == operator is called the loose equality operator because it compares two values even if their data types are different. JavaScript converts the values when needed and then compares them. For example, it can convert a string into a number before comparing.

let a = 5
let b = 4
let c = 5
let d = "5"

console.log(a == b)         // false
console.log(a == c)         // true
console.log(a == d)         // true (Even if the data type of d is a string, it converts the string into a number before comparing it.)

The === operator is called the strict equality operator because it compares both the value and the data type of two operands. First, JavaScript checks if their data types are the same. If they are, it then compares their values.

let a = 5
let b = 4
let c = 5
let d = "5"

console.log(a === b)         // false
console.log(a === c)         // true
console.log(a === d)         // false

Here, the result is simply false. Why? Because the === operator first checks the data types of both operands. In this example, one operand is a number (5) and the other is a string ("5"). Since their data types are different, the operator returns false.

Logical operator (&&, ||, !)

Logical operators are used to combine boolean expressions.
You will use a comparison operator to check a condition, and a logical operator to combine conditions with logics.

Operator	Name	Description / Example	Result
`&&`	Logical AND	`(5 < 10 && 2 > 1)`	`true`
`∣ ∣`	Logical OR	`(5 === 5 ∣ ∣ 2 === 5)`	`true`
`!`	Logical NOT	`!(5 === 2)`	`true`

Logical AND (&&)

The && operator returns true if both expressions are true, otherwise false:

let's see the truth table of the logical AND operator:-

Input A (`A`)	Input B (`B`)	Result (`A && B`)
`true`	`true`	`true`
`true`	`false`	`false`
`false`	`true`	`false`
`false`	`false`	`false`

let x = 6;
let y = 3;
let z = (x < 10 && y > 1)
console.log(z);                     // true

Real world example:-
Imagine you are a club manager and you want to give entry only to adults (age above 18 and below 26).

Here we have two conditions:-
age above 18
age below 26

For condition 1 and 2, we have to use the comparison operators we read above:-
age above 18 (age > 18)
age below 26 (age < 26)

Now we have to combine those two conditional operators using logical AND:-

let age = 18
console.log(age > 18 && age < 26)           // false (the condition is above 18)

let age = 24
console.log(age > 18 && age < 26)           // true

Logical OR (||)

The || operator returns true if either one condition is true, otherwise false:

let's see the truth table of the logical OR operator:-

Input A (`A`)	Input B (`B`)	Result (`A ∣ ∣ B`)
`true`	`true`	`true`
`true`	`false`	`true`
`false`	`true`	`true`
`false`	`false`	`false`

let x = 6;
let y = 3;
let z = (x < 10 || y < 1)
console.log(z);                     // true

Real world example:-
Imagine you are building a website. You want to allow login if the user enters the correct email or phone number.
Here we have two conditions:-

email
phoneNumber

Now we have to implement logical OR for these two conditions:-

let email = "ranveerkapoor@gmail.com"
let phoneNumber = 9876543210

console.log(email === "ranveerkapoor@gmail.com" || phone === 9876543210)   // true

If the user logs in either using his email or phone number, then he will land on the login interface.

2. By number of operands

This division depends upon the number of operands you're using in the condition.

Let's talk about some operators that are classified by number of operands:-

Unary operator
Binary operator
Ternary operator

1. Unary operator

If there is a single operand then it is called as unary operator.

let a = 4
console.log(-a)               // -4

Here we're using only one operand(-4), so it is an unary operator.

1. Binary operator

If we are implementing an operation using two operands then this is called as binary operator.

let a = 5
let b = 4
console.log(a - b)               // 1

In the above, there are two operands(a and b). So it's an example of binary operator.

1. Ternary operator

If we are implementing an operation using three parts, then this is called a ternary operator (?). It is also a shorthand for an if-else statement. In a ternary operator, we use the ? symbol to implement the operation.

The syntax of performing it is:-

condition ? valueIfTrue : valueIfFalse

let age = 20
console.log(age >= 18 ? "Adult" : "Minor")            // Adult

In the above example, we first have to provide a condition. If the condition is true, then "Adult" is returned; otherwise, "Minor" is returned.
_______________________________ X _______________________________

That's it for today! We covered all the major operators in JavaScript and understood how they work with different types of operands.
See you in the next one! ✌️

Understanding Variables and Data Types in JavaScript

Soubhagya Dash — Wed, 16 Sep 2026 09:47:17 +0000

In your surrounding, all things takes some space like you keep notebooks, pens and laptops in your bag , you keep your shoes in some type of storage case, you keep your clothes in closets or wardrobes. so in JavaScript variables does the exact thing like the bags, storage case or wardrobes are doing.

variables are a container that stores something for good like you can store something in variables and use them as many times as you want.

Basically these are used to store information in the memory.

Anyhow you'll build your own website one day for sure. So you want to store a user's details (like name, password, state...etc) , firstly you have to store them in the memory in an optimized way that's why we use variables.

In Javascript, variables are basically 3 types.
1.var
2.let
3.const

The steps of using variables are:
create ===> store ===> use ===> modify
we've to write variables names in camel case (like myFavLanguage, myPortfolio, userId....etc)

so lets start these 3 keywords one by one:-

1.const keyword

Const keyword is used when you'll never wants to reassign the variable, if you declared it once you can't change the value in future.

const accountName = "Nobita"
console.log(accountName);    // Nobita

accountName is the name of the storage where we stored "Nobita". If you ever want to replace Nobita with something else it'll throw a type error.

const accountName = "Nobita"
console.log(accountName);    // Nobita

accountName = "Doraemon"
console.log(accountName);    // TypeError: assignment to constant variable

2.let keyword

unlike const, let keyword is reassignable. you can reassign as many time as you want.

let userNumber = 1234567890
console.log(userNumber);    // 1234567890

just like above userNumber is the name of the container where you stored the user number. you can reassign it & this will work.

let userNumber = 1234567890
console.log(userNumber);    // 1234567890

userNumber = 9887654321
console.log(userNumber);    // 9887654321

3.var

var keyword is exactly like let keyword. it is also reassignable.

var accountPassword = "555555"
console.log(accountPassword);     // 555555
accountPassword = "666666"
console.log(accountPassword);     // 666666

We can access a variable inside it's scope like below we can use the globalNumber inside the function scope because we've declared this on the global scope. Basically we can't use a variable outside it's scope, so if we try to access the variable outside the function scope; it'll throw a reference error. The same goes for const and let.

var globalNumber = 111111

function () {
  var funcNumber = "555555"
  console.log(globalNumber);     //111111
}

console.log(funcNumber);     //ReferenceError: funcNumber is not defined

but we'll never use this in future. the reason behind this is called scope {}. if someone storing a value using var inside a scope then another developer came and he defines the same variable in a different scope then the first variable will also change.

if() {
  var userName = "Dekesugi"
  console.log(username);     // Dekesugi
}

console.log(username);     // Dekesugi

if() {
  console.log(username);     // Dekesugi
}

It doesn't work on the basis of scope that's why it doesn't have any control in block scope. But both const and let are blocked scope. They both will throw error if you want to access them outside of any block. That's why we use let keyword in stead of var.

Keyword	Reassignable?	Scope
`const`	No	Block Scope
`let`	Yes	Block Scope
`var`	Yes	Function / Global Scope

Datatypes

Now that we know how to create a variable so let's store in it.

Datatypes are just the type of data we stored in a variable. In JavaScript there are 8 basic datatypes among which 7 are primitive datatypes and one is non-primitive datatype.

Primitive datatypes

Primitive datatypes represents a single value and they are immutable. So at first let's observe the 7 primitive datatypes.

1.Number

Integers, float values are goes under number datatypes. infinity, -infinity, NaN (Not a Number) these are practically not numbers but they also goes under number datatypes.

const age = 21;
console.log(typeof age);

const fillInPetrol = 10.5;
console.log(typeof fillInPetrol);

console.log(typeof NaN);

console.log(typeof infinity);

console.log(typeof -infinity);

1.BigInt

Number datatype has maximum number of integer storing capacity is till 9,007,199,254,740,991 . Above 9,007,199,254,740,991 they came under bigInt datatypes.

we just have to use a 'n' after completing the number.

let bigBalance = 996348485263765943654n;
console.log(typeof bigBalance);

3.string

the set of characters that are written under single quotes('') or double quotes ("") are goes under string datatypes.

basically the recommanded syntax is using double quotes.

let single = 'I an single !!' ; 
console.log(typeof single);

let mingle = 'I an mingle !!' ; 
console.log(typeof mingle);

let pinCode = "759121"
console.log(typeof pinCode);

everything inside the double quotes javaScript treats them as string. Even though you write a number inside double quotes.

4.Boolean

Boolean datatypes only represents two possible values: true and false

const isDoable = true;
console.log(typeof isDoable);

const isImpossible = false;
console.log(typeof isDoable);

5.Null

null is a standalone value. It means this is intentionally empty.

let bankBalance = null
console.log(bankBalance);       // null

here this means i have a variable named bankBalance but currently it has no value. we can re-assign the value later.

bankBalance = "7- crore"
console.log(bankBalance);       // 7- crore

so think what will it's datatype be ?
Here we got something unexpected, the datatype of null is Object. This is the behavior of javascript however null is not an object. this is a value that we declare intentionally empty.

let bankBalance = null
console.log(typeof bankBalance);       // Object

Another confusing question is null equals to 0 ?

Nope null is utterly different than 0. 0 is a number and it's datatype is also a number but null has no value it's completely empty.

console.log(null == 0);       // false
console.log(null === 0);       // false

6.undefined

When we only declared the variable but yet not assigned with some value then that's undefined. the datatype of undefined is undefined.

let collegeName;
console.log(collegeName);       // undefined
console.log(typeof undefined);  // undefined

7.symbols

The Symbol datatype was created in JavaScript mainly to solve one big problem:

How do we create a truly unique property key that won't accidentally conflict with someone else's property?
So we use symbols to create unique identifiers for objects.

let trafficLight = symbol("Red")
let trafficLight2 = symbol("Red")
console.log(trafficLight === trafficLight2);    // false
console.log(typeof trafficLight);               // symbol

Non-primitive datatype

Non-primitive datatype is also called as reference type. We can directly store their reference in memory.

They are basically 3 types:-

Arrays
Objects
functions

Arrays

Let assume you have different brand of shoe collection, you have to store them inside variables. So you'll do like this:-

let shoe1 = "One8" ;
let shoe1 = "Puma" ;
let shoe1 = "Nike" ;
let shoe1 = "Adidas" ;

Imagine you have different brands more than these then we have to make more and more variables, it's basically more memory consuming and full of verbose; that's why in stead of storing them like this, you can store them in one variable. This is where the array data type plays an important role.

let shoes = ["One8", "Puma", "Nike", "Adidas"] ;
console.log(shoes);        // [ 'One8', 'Puma', 'Nike', 'Adidas' ]

You can think it as a big container with multiple compartment. Each value stores in a compartment and all the compartment have an index number. You can take a glance at the diagram below.

In javascript, the arrays indexing starts from 0. So you can access each value using it's index:-

shoes[0]      // One8
shoes[1]      // Puma
shoes[2]      // Nike
shoes[3]      // Adidas

Object

object is the complex of all primitive datatypes we have read before.

let personalInfo = {
  name: "Luffy",
  age: 21,
  aura: 9999999999999999999999999n,
  isInRelationship: true
}
console.log(personalInfo);         // {
                                         name: "Luffy",
                                         age: 21,
                                         aura: 9999999999999999999999999n,
                                         isInRelationship: true
                                       }

Here we stored the object inside a let variable but inside the curly braces that's territory of an object. We can declare any datatypes (it can be a array or a function even if an object) inside the object.

In an object each primitive datatype have a key-value pair. We can access each key-value pair by . property with the key name.

console.log(personalInfo.name)               // Luffy
console.log(personalInfo.age)                // 21
console.log(personalInfo.aura)               // 9999999999999999999999999n
console.log(personalInfo.isInRelationship)   // true

Functions

It is a block of code that design to perform a specific tasks. Basically you can say that it's a wrapper in the set of instructions that we can reuse this as many time as we want.

Below is the syntax of a function.

function functionName(parameters) {
  //here is the task you want
}

let's take an example:-

function addTwoNumbers(number1, number2){
    return number1 + number2
}
const result = addTwoNumbers(3, 5);
console.log(result);                             //8

Scope in Javascript

Above i said something like function scope or block scope. So what are these ? let me explain:

Scope is basically an area of programme where a variable can be accessed.
There are basically 3 type of scope in Javascript:-

Global scope
Function scope
Block scope

So let's move to the first one:

Global scope

A variable declared outside any function or block belongs to the global scope.

let name = "Syrex";

function greet() {
  console.log(name);          // Syrex
}
greet();

console.log(name);            // Syrex

Those variables which are declared in a function scope they are accessable anywhere even inside a function. name was declared in the global scope so it is accessible anywhere.

Function scope

It is also called as local scope. Anything inside the function's curly braces({}) goes under function scope. If you declare a variable inside the curly braces of a function then this will only stay inside the function scope.

function greet() {
  let message = "Hello";
  console.log(message);      //  Hello
}
greet();

console.log(message); //  ReferenceError: message is not defined

when you call the greet function the message variable is accessible inside the scope that's why the console.log is a success. If you directly try to access the message variable outside the function scope, then it'll throw a reference error.

Think the function scope like your private room:

"What's inside the room stays inside the room."

Block scope

A block scope is simply some code inside the curly braces (for, while, if). It is not accessible outside the braces.

if (true) {
  let name = "Syrex";
  console.log(name); //  Syrex
}

console.log(name);  // ReferenceError: message is not defined

Assume of all scope likes this:

_______________________________ X _______________________________

So, that’s a wrap! 🎉 We’ve covered the basic things you need to know about JavaScript data types and built a good foundation to move forward.

If I’ve missed something important, feel free to let me know on X (https://x.com/Likuuu_13). Always open to learning and improving!

Stay tuned for more JavaScript concepts.

DEV Community: Soubhagya Dash

Array Methods You Must Know

1. push() and pop()

push() :-

pop() :-

2. shift() and unshift()

shift() :-

unshift() :-

3. map():-

4. filter():-

5. reduce():-

6. forEach():-

for loop vs map/filter :-

Case 1

Case 2

Important Tips for Beginners

Overview:-

Conclusion

Understanding Arrays in JavaScript for Beginners

What is an array?

for loop

Execution of the loop:-

While loop

Execution of the loop:-

do...while loop

Execution of the loop:-

for...of loop

Execution of the loop:-

Control Flow in JavaScript: If, Else, and Switch Explained

Conditional Statement:-

1. if statement

how code runs in step by step:-

2. if else statement

how code runs in step by step:-

3. else if statement

How the code runs step by step:

4. switch statement

How the code runs step by step:-

Difference between if...else if and switch

JavaScript Operators: The Basics You Need to Know

What is an operator ?

1. By functionality

Assignment operators (=, +=, -=, =, *=, /=, %=)

= (Assign)

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

+ (Addition)

- (Subtraction)

* (Multiplication)

/ (Division)

% (Modulus)

** (Exponentiation)

++ (Increment)

-- (Decrement)

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

Logical operator (&&, ||, !)

Logical AND (&&)

Logical OR (||)

2. By number of operands

1. Unary operator

1. Binary operator

1. Ternary operator

Understanding Variables and Data Types in JavaScript

1.const keyword

2.let keyword

3.var

Datatypes

Primitive datatypes

1.Number

1.BigInt

3.string

4.Boolean

5.Null

6.undefined

7.symbols

Non-primitive datatype

Arrays

Object

Functions

Scope in Javascript

Global scope

`While` loop

`do...while` loop

`for...of` loop

1. `if` statement

2. `if else` statement

3. `else if` statement

4. `switch` statement

Difference between `if...else if` and `switch`