Advanced JavaScript: A Deep Dive into the Core Concepts

JavaScript array map() method

Board Infinity
Board Infinity
JavaScript array map() method

    Javascript vs Typescript: What is the Difference?

    Understanding Array Slice() in JavaScript

    JavaScript: Array Filter() Method

    JavaScript array map() method

    Encoding and Decoding URL in JavaScript: How?

    JavaScript Fetch API Explanation

    A quick guide to Debounce in JavaScript

    Promise in JavaScript

    What is Promise.all in JavaScript?

    Javascript Async and Await Function

    A quick guide to async/await in Javascript

    10 Best JavaScript Frameworks to Use in 2023

    Trends and Tools of JavaScript in 2022

    JavaScript Interview Questions and Answers (2023)

Introduction

The array map() method transforms an array into a new array with each element  mapped to the value of its corresponding key. The result is usually not an  entirely new array, but only a flattened version of the original one.The  Array.map() method allows you to iterate over the items of an array,  transforming each item in turn. The array map() method aggregates elements of  an array and applies a function to those values. The map method returns a new  array with an updated collection of the result.

It accepts two parameters:

Function: It is required parameter and it runs on each element of array.

thisValue: It is optional parameter and used to hold the value of passed to the  function.

The map() method can be used to execute a function once for each item in the  array. The function is executed with three arguments: the value of the current  item, the index of that item in the array, and the whole array itself.

currentValue: (required)it holds the value of current element. index: (optional) It holds the index of current element.

Arr: (optional) parameter and it holds the array.

Map() return value:

Return a new array with elements as the return value .

Syntax

array.map(function(currentValue, index, arr), thisValue) 

Here's how it works:

First, we pass our function as a string. That string will be run once for each  element in our original array. The result of this mapping is then passed back  into our function and returned as a new array with all the results of where we  mapped them.

Examples

Example 1:

let numbers = [2, 4, 6, 8, 10];
function multiply(number) {
return number * 2;
}
let numbers = numbers.map(multiply); console.log(numbers); 

Output:

[ 4, 8, 12, 16, 20 ]

write your code here: Coding Playground

Example 2:

const number = [1000, 2000, 3000, 5000, 4123,  5470];
let newnumber = number.map(Math.sqrt);
console.log(newnumber); 

Output:

[
  31.622776601683793,
  44.721359549995796,
  54.772255750516614,
  70.71067811865476,
  64.21059102671458,
  73.95944834840239
]

write your code here: Coding Playground

Example 3:

const BIemployees = [
{ name: "Prakash", salary: 5000, bonus: 500, tax: 1000 },
{ name: "Jay", salary: 8000, bonus: 1500,  tax: 2500 },
{ name: "Pratibha", salary: 1500, bonus: 500, tax: 200 },
{ name: "Satish", salary: 4500, bonus: 1000, tax: 900 },
];
const calcAmt = (obj) => {
newObj = {};
newObj.name = obj.name;
newObj.Earning = obj.salary + obj.bonus - obj.tax;
return newObj;
};
let newArr = BIemployees.map(calcAmt); console.log(newArr); 

Output:

[
  { name: 'Prakash', Earning: 4500 },
  { name: 'Jay', Earning: 7000 },
  { name: 'Pratibha', Earning: 1800 },
  { name: 'Satish', Earning: 4600 }
]

write your code here: Coding Playground

The map() method is used to iterate over a JavaScript object's properties and  create new arrays. Since JavaScript does not support polymorphic behavior, the  result of this iteration is limited to being a single array value.

Conclusion

The JavaScript array map() method creates a new array with the result of  applying a function to each element of an existing array. This method is  commonly used as an iterative processing step, where many elements are  processed in parallel in a computationally efficient way.