But if javascript is really single-threaded, then how does it achieve asynchronous programming?

Just for context, asynchronous tasks enable JavaScript to execute multiple tasks simultaneously. This capability is achieved in languages such as C++ and Java using a concept known as multi-threading.

Well, javascript is really single-threaded, however, it achieves it’s asynchronous behavior by using some set of tools that form a system, and the event loop, while being the core is only a single part of these set of tools.

”What are these tools?” You might ask? Here they are

1. The call stack

2. The web apis / nodejs runtime

3. The task queue and the micro task queue

4. The event loop

Now let’s look at each piece and understand how they work.

1. The Call Stack: The call stack is a data structure that enables javascript to keep track of function calls. When a function is called, it’s execution context is pushed onto the callstack and when the function is done running, it’s execution context is popped off the stack. An execution context is just an environment a piece of code would run in and it holds all the necessary information for that code to work.

Consider this piece of code

const third = () => {
console.log("third");
}

const second = () => {
third();
console.log("second");
}

const first = () => {
second();
console.log("first");
}

first();

When this code runs, the execution context for first() is pushed onto the stack, which starts running.

Now it hits second() which is inside first() and pushes it’s execution context onto the stack as well, the same thing happens and pushes the execution context for third() onto the stack.

Now when third() starts running, the console.log is pushed to the stack which gets executed immediately (i.e logs “first” to the console) and then popped off the stack, since there is no other code in third(), it’s execution context is popped off the stack as well and the control returns back to second().

Now in second(), the next line of code is pushed onto the stack and executed which logs “second” to the console and then popped off the stack then the control returns to first(), which executes the console.log(“first”), pops it off the stack and then pops the function first() off the stack as well.

This is just an overview of how the stack works.

2. The Web APIs / NodeJs Runtime: When callback based functions or async functions like setTimeOut or http requests are pushed onto the call stack, they are handed off to the web apis (in case the javascript code is run on the brower) or nodejs runtime (in case the javascript code is run outside the browser) instead of blocking the callstack.

When the asynchronous operation is completed, the callback is pushed to the task queue or in case of async functions, the code after the await line is pushed to the microtask queue.

3. The Task Queue and The Microtask Queue: The task queue and the microtask queue holds the functions that are scheduled to be pushed onto the callstack by the web apis / nodejs runtime when the callstack is empty.

Just as a side note, the event loop prioritizes the microtask queue over the task queue as when the callstack is empty, it starts by pushing every scheduled function in the microtask queue before it moves onto the task queue.

4. The Event Loop: The event loop is the crucial part that coordinates how execution contexts are pushed onto the stack. Whenever the stack is empty, the event loop first checks the microtask queue and if there are any scheduled functions there, it pushes it’s execution context to the stack and continues doing so until it empties the microtask queue before moving onto the task queue.

Using this approach, javascript is able to achieve an asynchronous behavior using just a single thread.

I hope this article was of some help to you in understanding the event loop and how javascript achieves it’s asynchronous behavior.

So next time you’re writing code for your server or web, you’ll now be able to make informed decisions on the approach to take inorder to make your code faster by not blocking the event loop with heavy code.

My Socials:

• YouTube
• LinkedIn
• Twitter

Introduction:
JavaScript, the versatile language that powers the web, offers developers an array of tools to manipulate data and iterate through arrays. Two of the most commonly used methods, `.forEach` and `.map`, might seem similar at first glance, but beneath the surface, they have distinct purposes and behaviors.

When I was starting as a NodeJs backend developer, I watched tutorials online where the tutor used these two methods a lot when working with arrays, so much so that I started asking myself the difference between them and when to use each one. This is what I’ll explain in detail in this article so that even beginners would understand.

So now let’s go on a journey through the JavaScript jungle as we explore the exciting differences between these two powerful array methods :).

Here are the points we’ll be focusing on:
1. The purpose with examples
2. Return values with examples
3. Use cases with examples
4. Immutability
5. Method chaining with examples

1. The Purpose:
• `.forEach`: This method is like the trusty tour guide of JavaScript. It takes you through each item in an array and allows you to perform actions on each element without changing the original array. It’s like a friendly stroll through a shop’s catalog where you can admire the things listed on them without altering them.

As an example, let’s write code to admire a shop’s drinks catalog:

const drinksCatalog = [
  { drink: ‘Coffee’, price: 3.50 },
  { drink: ‘Tea’, price: 2.99 },
  { drink: ‘Soda’, price: 3.75 },
  { drink: ‘Lemonade’, price: 5.99 },
  { drink: ‘Smoothie’, price: 2.85 }
];

drinksCatalog.forEach(el => {
    if (el.price < 3) {
        console.log(`So cheap?! Are you sure this is a ${el.drink}?\n`)
    }
    else if (el.price < 4) {
        console.log(`Hmm… This one’s o…k? But I don’t take cheap ${el.drink}s…sigh\n`)
    }
    else {
        console.log(`How can a ${el.drink} be soo expensive??\n`)
         }
})

Expected output:

Hmm… This one’s o…k? But I don’t take cheap Coffees…sigh

So cheap?! Are you sure this is a Tea?

Hmm… This one’s o…k? But I don’t take cheap Sodas…sigh

How can a Lemonade be soo expensive??

So cheap?! Are you sure this is a Smoothie?

• `.map`: Think of `.map` as the shop’s catalog from which you can create a brand new catalog by applying a function to each element of the original one. It’s like wanting to purchase atleast one of everything in a shop, so you get the shop’s catalog and then create a new one where you’ve specified the quantity of each item you want to purchase.

Let’s actually write the code for that:

// This is a function that generates a random integer between 0 and 10.
// I’ll use it to generate random values for the quantity field.
const randInt = () => {
    return Math.floor(Math.random() * 10)
}

const drinksCatalog = [
  { drink: ‘Coffee’, price: 3.50 },
  { drink: ‘Tea’, price: 2.99 },
  { drink: ‘Soda’, price: 3.75 },
  { drink: ‘Lemonade’, price: 5.99 },
  { drink: ‘Smoothie’, price: 2.85 }
];

const orderCatalog = drinksCatalog.map(el => {
    const item = el;
    item.quantity = randInt()
    return item
})
console.log(orderCatalog);

Expected output:

[
  { drink: ‘Coffee’, price: 3.50, quantity: 3 },
  { drink: ‘Tea’, price: 2.99, quantity: 5 },
  { drink: ‘Soda’, price: 3.75, quantity: 2 },
  { drink: ‘Lemonade’, price: 5.99, quantity: 4 },
  { drink: ‘Smoothie’, price: 2.85, quantity: 1 }
]

2. Return Values:
• `.forEach`: It returns `undefined`. That’s right, it’s all about side effects – performing actions rather than producing results directly. That’s why we did not store it in a variable. Let’s actually do it and then see the output.

const drinksCatalog = [
  { drink: ‘Coffee’, price: 3.50, quantity: 3 },
  { drink: ‘Tea’, price: 2.99, quantity: 5 },
  { drink: ‘Soda’, price: 3.75, quantity: 2 },
  { drink: ‘Lemonade’, price: 5.99, quantity: 4 },
  { drink: ‘Smoothie’, price: 2.85, quantity: 1 }
]

const admireCatalog = drinksCatalog.forEach(el => {
    if (el.price < 3) {
        console.log(`So cheap?! Are you sure this is a ${el.drink}\n`)
    }
    else if (el.price < 4) {
        console.log(`Hmm… This one’s o…k? But I don’t take cheap ${el.drink}s…sigh\n`)
    }
    else {
        console.log(`How can a ${el.drink} be soo expensive??\n`)
         }
})
console.log(admireCatalog)

Expected output:

undefined

• `.map`: This method is the producer. It returns a new array filled with the results of applying the provided function to each element of the original array. Take the code for `.map` in section 1 for example, we were able to store the result of the `.map` operation in a variable (orderCatalog) and then log that variable to the console which outputs the new array. This is possible because the variable holds the return value of the `.map` operation which as we can see, is an array.

[
  { drink: ‘Coffee’, price: 3.50, quantity: 3 },
  { drink: ‘Tea’, price: 2.99, quantity: 5 },
  { drink: ‘Soda’, price: 3.75, quantity: 2 },
  { drink: ‘Lemonade’, price: 5.99, quantity: 4 },
  { drink: ‘Smoothie’, price: 2.85, quantity: 1 }
]

3. Use Cases:
• `.forEach`: Perfect for scenarios where you need to loop through an array and perform an action on each element, like logging data to the console for example or updating the DOM.

Infact, apart from logging stuff to the console, we can also use `.forEach` to create a new array (*would explain in a second) that may or may not be of the same length as the original one. For example, imagine we want to extract all the even numbers from one array into a new array, the code can look like this

// This numbersArray contains ten numbers with four of them (6, 8, 12 and 10) being even.
//Our goal is to extract these four numbers.

const numbersArray = [6, 15, 8, 21, 12, 19, 10, 27, 17, 33];

let evenArray = [];

numbersArray.forEach(el => {
    if (el % 2 === 0) evenArray.push(el)
})

console.log(evenArray)

Expected output:

[6, 8, 12, 10]

As you can see, the length of the original numbersArray is 10 while that of the new evenArray is 4. This is not possible with `.map` as the new array must be of the same length with the original one. It can even go as far as returning undefined to elements that don’t have a value. For example

const numbersArray = [6, 15, 8, 21, 12, 19, 10, 27, 17, 33];

const evenArray = numbersArray.map(el => {
    If (el % 2 === 0) return el
})

console.log(evenArray)

Expected output:

[6, undefined, 8, undefined, 12, undefined, 10, undefined, undefined, undefined]

See? The length of the array remained unchanged and the `.map` operation returned undefined for numbers that are not even.

*PLEASE NOTE: While `.forEach` doesn’t return a new array, we can always declare a separate variable containing an empty array and then instead of logging to the console, we can conditionally push items into the empty array which is what we did in the example above.

• `.map`: Ideal when you want to transform an array into something new, like doubling each number in an array or converting a list of names into uppercase.

As an example, let’s write code to increment our employees salaries by $10,000

const employeeSalaries = [
  [“John”, 50000],
  [“Alice”, 60000],
  [“Bob”, 55000],
  [“Eva”, 62000],
];

const newEmployeeSalaries = employeeSalaries.map(el => {
    const employee = el
    employee[1] += 10000
    return employee
})

console.log(newEmployeeSalaries)

Expected output:

[
  [“John”, 60000],
  [“Alice”, 70000],
  [“Bob”, 65000],
  [“Eva”, 72000],
];

4. Immutability:
• `.forEach`: It doesn’t create a new array, so the original one remains unchanged. That’s also why it returns undefined

• `.map`: This method is all about immutability. It preserves the original array and creates a fresh one with the transformed data. Just like the `.map` part in section 1 above, it is that new array that we stored in the orderCatalog variable.

5. Chaining:
• `.forEach`: You can’t chain additional array methods after a `.forEach` loop, as it doesn’t return an array, so trying to attach an array method to it would result in an error.

• `.map`: Being the team player it is, `.map` returns a new array, making it chainable with other array methods, just like how a shop attendant can perform further actions on that new catalog you created in section 1, like calculating the total price of each item based on the quantity you ordered.

To do that in code, let’s attach another .map method to the order catalog and then calculate the price of each order.

const drinksCatalog = [
  { drink: ‘Coffee’, price: 3.50 },
  { drink: ‘Tea’, price: 2.99 },
  { drink: ‘Soda’, price: 3.75 },
  { drink: ‘Lemonade’, price: 5.99 },
  { drink: ‘Smoothie’, price: 2.85 }
];

const orderCatalog = drinksCatalog.map(el => {
    const item = el;
    item.quantity = randInt();
    return item;
})

const orderPriceDetail = orderCatalog.map(el => {
    const order = el;
    order.orderPrice = order.price * order.quantity;
    return order;
})

console.log(orderPriceDetail)

Expected output:

[
  { drink: ‘Coffee’, price: 3.50, quantity: 3, orderPrice: 10.50 },
  { drink: ‘Tea’, price: 2.99, quantity: 5, orderPrice: 14.95 },
  { drink: ‘Soda’, price: 3.75, quantity: 2, orderPrice: 7.50 },
  { drink: ‘Lemonade’, price: 5.99, quantity: 4, orderPrice: 23.96 },
  { drink: ‘Smoothie’, price: 2.85, quantity: 1, orderPrice: 2.85 }
]

Final thoughts…:
In the grand JavaScript arena, `.forEach` and `.map` are both valuable players, each with its own distinct role. `.forEach` is your trusted guide for touring and admiring adventures, while `.map` is the creative artist who crafts entirely new arrays. Understanding their differences empowers you to wield them effectively in your coding endeavors, making you a JavaScript maestro in your own right.

So, whether you’re touring a shop’s catalog just for the fun of it or buying out the entire shop, remember that in the world of JavaScript, `.forEach` and `.map` are your reliable companions, each with its own unique charm.

Happy coding 😊!