One post tagged with "array-loops"

Introduction:​

As JavaScript developers, we often works with arrays. The map function in JavaScript is a sugar syntax and a powerful tool that allows us to iterate over array elements and perform transformations easily. In this 1 minute guide, we will explore the map function, understand why it is preferred over traditional array loops, and provide a code example to illustrate its usage.

How to use the Map Function in Javascript​

The Map Function​

The map function is a higher-order function available on JavaScript arrays. It takes a callback function as an argument and applies that function to each element of the array, creating a new array with the transformed values.

Syntax:

array.map(callback[, thisArg])

Parameters:

• callback: A function that will be called for each element in the array. It can take three arguments:
  • currentValue: The current element being processed in the array.
  • index (optional): The index of the current element being processed.
  • array (optional): The original array that the map() function was called upon.

Return Value:

The map() function returns a new array with the results of calling the provided callback function on each element of the original array.

Exceptions:

The map() function does not throw any exceptions. However, it is important to note that the callback function provided to map() might throw an exception if there is an error within the callback logic. It's recommended to handle any potential exceptions within the callback function or in the surrounding code if necessary.

Example using map() in your code​

Given we're having an array:

const numbers = [1, 2, 3, 4, 5];

To use map function, we just need to call the map() function on the numbers array:

const squaredNumbers = numbers.map((num) => {
  return num ** 2;
});

In that case, the output of squaredNumbers:

console.log(squaredNumbers);

will be:

[1, 4, 9, 16, 25]

Why use map function over array loops​

Let's compare the traditional approach of looping through an array with the usage of the map() function. Consider a scenario where we have an array of numbers and want to create a new array with each number squared.

Using a loop:

// Original array
const numbers = [1, 2, 3, 4, 5];

// Loop through the array and square each number
const squaredNumbers = [];
for (let i = 0; i < numbers.length; i++) {
  squaredNumbers.push(numbers[i] ** 2);
}

// Output the squared numbers
console.log(squaredNumbers);

Using the map() function:

// Original array
const numbers = [1, 2, 3, 4, 5];

// Map function to square each number
const squaredNumbers = numbers.map((num) => num ** 2);

// Output the squared numbers
console.log(squaredNumbers);

Output (for both approaches):

[1, 4, 9, 16, 25]

In the above code examples, we have an array numbers containing five elements. In the first approach, we use a for loop to iterate through the array, square each number, and push it to a new array squaredNumbers. In the second approach, we utilize the map() function, passing a callback function (num) => num ** 2 to square each number. The resulting arrays, squaredNumbers, contain the squared values. Both approaches produce the same output.