Java Script Array Map Method

Java scripts have very useful and powerful methods. We can map each in array to something else. A Map object iterates its elements in insertion order — a for or Of loop returns an array of [key, value] for each iteration. From the classic loop like for() or forEach method, There are many techniques and methods for using or iterating datasets in JavaScript. But map method is a popular method. Because the map method creates an array with a callback function on each item from the original array. Map() method is not mutating original arrays. Instead of mutating the original array, the Map method is creating a new array and keeping the original one as it is.

There are many various uses when you are working with arrays. Calling a function of array elements or converting strings to arrays , rendering lists in javascript and re-arranging objects.

Calling a Function on Each Item in an Array

As I mentioned before .map() method has a call back function as an argument. It’s important parameter for that function is the current value of the item process by the function. This function needs a parameter. You can change each item in the array with this item and create a new function. The callback function will then be executed on each of the array’s elements.

Here’s an example

Let’s see if you want to multiply each of the elements by 4. You probably think about it using a for loop as follows

let arr = [5, 6, 7, 20];

for (let i = 0; i < arr.length; i++){
  arr[i] = arr[i] * 4;
}

console.log(arr); // [20, 24, 28, 80]

But You can actually get the same result using with map() method.

let arr = [5, 6, 7, 20];
// pass a function to map
const map1 = arr.map(x => x * 4);
console.log(map1);
// expected output: Array [20, 24, 28, 80]

The map() method makes some changes to elements. Whether multiply numbers as the example or you can also do other operations based on your function.

Step 2 — Converting a String to an Array

map() method also belongs to array prototype. You can convert the string with map() method. It’s not implemented as a method to work with strings, you can just use a call() method to achieve this target.

As you know everything in JavaScripts is an object. You can manipulate objects with functions and methods. call() method also allows you to use the context of one object on another. You can copy the context of .map in array over to a string.

call() method can be passed arguments of the context to be used and parameters for the arguments of the original function.

Here’s an example:

const myName = "Soner"
const map = Array.prototype.map

const newName = map.call(myName, eachLetter => {
    return `${eachLetter}a`
})

console.log(newName)[

Here, you used the context of .map() on a string and passed an argument of the function that .map() expects.

This functions like the .split() method of a string, only that each individual string character can be modified before being returned in an array.

The complete map() method syntax

The syntax for the map() method is as follows:

arr.map(function(element, index, array){  }, this);

The callback function is called on each array element, and the map() method passes the element, the index of the current element, and the whole array object into it.

This argument is used inside the function. By default value is undefined. You can change the this value with the number 80:

let arr = [2, 3, 5, 7] arr.map(function(element, index, array){ console.log(this) // 80 }, 80);

Using map and filter

The filter() method is unlike the Map Method in array for some ways. The only common things are immutable methods. They both keep the original but they return elements in the new array depending on the purpose of the function.

Filter makes the original array shorter when its filtered some items from the array and returns a new array with a filtered portion of the element.

But the map() method works differently. Map does not change the length of the array. It returns the value of the element differently from the original array.

If you need to remove or delete any item from an array, you can use a filter method to achieve this target better. But you can also use the filter() method with map() method to implement a function to reach a desirable result.

For example, we can use filter to narrow our array’s values before we use map to convert them:

const originalArray = [1, 2, undefined, 3];

const newArray = originalArray
.filter(value => {
return Number.isInteger(value);
}).map(value => {
return value * 5;
});
console.log(newArray); // [5, 10, 15]

We can think about this example without a filter method for a second. Without filter() method we will NaN for the third element of the array before map() method. We will have trouble getting results for our new array. Purpose of the using filter() method to narrow our array in the first iteration to convert our values of the element for our new array with second iteration.