Introduction map() method in JavaScript with examples

Introduction  map() method in JavaScript with examples

In this post, I’ll go over how to use JavaScript’s array map() method. I’ll also be showing you how to create your own map() method from scratch to better understand how it works.

All JavaScript arrays have a map method attached to it. This method is used to iterate over an array and return a new array once the iteration is complete.

Example

The map() function takes in an anonymous function as an argument. This anonymous function will have three parameters. They are the currentValue, index and array. The currentValue is the current element being processed in the array. The index is the index of the current element being processed. The array parameter will be the array being iterated on. The index and array parameters are optional.

Below is a small example using map() to iterate through an array of numbers and multiplying each number by 2.

const nums = [1, 2, 3, 4, 5]
const nums2 = nums.map(num => num * 2) // returns [ 2, 4, 6, 8, 10 ]

Array Data

We will be working with an array of movie objects for our examples.

const movies = [
  {
    id: 7011,
    title: 'Avengers: End Game',
    rating: 8.3
  },
  {
    id: 6543,
    title: 'The Avengers',
    rating: 7.7
  },
  {
    id: 67699,
    title: 'Avengers: Infinity War',
    rating: 8.3
  },
  {
    id: 6754,
    title: 'Avengers: Age of Ultron',
    rating: 7.3
  }
];

Task 1: Use the map method to return an array of the movie id’s

For this task, we will create a const called ids and map through the movies array. We call map() on our movies array then inside the map function, we pass a callback function as the argument for map(). In our return statement, we will return the movie.id

const ids = movies.map((movie, i) => {
  return movie.id;
}); // returns [ 7011, 6543, 67699, 6754 ]

Task 2: Use the map method to return an array of movie objects with the { id, title} pair

This task will be very similar to Task 1. The only difference is what we actually return inside our callback function. In our return statement, we return an object with the { id, title } key value pair


const idTitlePair = movies.map(movie => {
  return { id: movie.id, title: movie.title };
});

/*
[ { id: 7011, title: 'Avengers: End Game' },
  { id: 6543, title: 'The Avengers' },
  { id: 67699, title: 'Avengers: Infinity War' },
  { id: 6754, title: 'Avengers: Age of Ultron' } 
]
*/

Task 3: Create your own map() method mapCopy()

For this task, we will create a new function on the Array.prototype object. Doing this will allow us to use our newly created map function on all arrays. We will name our function mapCopy.

First, we will create the mapCopy function on the Array.prototype and give it a parameter named callback.

Array.prototype.mapCopy = function(callback) {

};

Next, we will create a variable called results which will be the array we return after iterating over the original array.

Array.prototype.mapCopy = function(callback) {
  let results = [];

};

Now we will create a for loop to iterate over the array we are calling our mapCopy() function on. We will be using the keyword this to refer to the array we are iterating over.


Array.prototype.mapCopy = function(callback) {
  let results = [];
  for (let i = 0; i < this.length; i++) {

  }

};

Next, we will take the callback parameter and invoke it with this[i] and i as arguments. Then we will take that callback and push it into our results array.


Array.prototype.mapCopy = function(callback) {
  let results = [];
  for (let i = 0; i < this.length; i++) {
    results.push(callback(this[i], i));
  }

};

Lastly, we will return our results array.

Array.prototype.mapCopy = function(callback) {
  let results = [];
  for (let i = 0; i < this.length; i++) {
    results.push(callback(this[i], i));
  }

  return results;
};

Happy Coding !

javascript js

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

What are the differences between the various JavaScript frameworks? E.g. Vue.js, Angular.js, React.js

What are the differences? Do they each have specific use contexts?

Ember.js vs Vue.js - Which is JavaScript Framework Works Better for You

In this article we will discuss full details and comparison of both Ember.js and Vue.js

Grokking Call(), Apply() and Bind() Methods in JavaScript

In this article, we will have a look at the call(), apply() and bind() methods of JavaScript. Basically these 3 methods are used to control the invocation of the function.

Top Vue.js Developers in USA

Vue.js is an extensively popular JavaScript framework with which you can create powerful as well as interactive interfaces. Vue.js is the best framework when it comes to building a single web and mobile apps.