4

I was looking at the documentation on the map function on the Mozilla developer page and have a question about one of the examples.

Here's the link to the dev page. I'm looking at the "using map generically" example. I've also included the code below:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

var map = Array.prototype.map;
var a = map.call('Hello World', function(x) { return x.charCodeAt(0); });
// a now equals [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]

Firstly, what do they mean by using map "generically". I'm guessing this has to do with

var map = Array.prototype.map;

One of the things that is still new to me is prototype in JS. In my own words, what I understand is that it can be used to change the way a function works and that it sort of works in a way that adds the functionality of classes to JS.

Anyway, what is this storing in the map variable? How come they can now pass a string to the args of the map function? What is the point of calling the map function on map instead of doing something like:

var a = 'Hello World'.split('').map( function(x) { return x.charCodeAt(0); });
1

2 Answers 2

6

First off what do they mean by using map "generically".

"Using map generically" means using Array.prototype.map() on something that is not an array to begin with. It works for the string 'Hello World' because 'Hello World' will return a length and can be iterated through just like an array.

One of the things that is still new to me is prototype in JS

I like to think of prototypes as "things that are just built in to this class". For example, let's say you're making a videogame involving racing. All vehicles have the ability to 'Drive' and 'Stop'. Instead of making hundreds of vehicles and typing in their 'Drive' and 'Stop' methods over and over again, you could create a 'Vehicle' class, and save the 'Drive' and 'Stop' methods to its prototype. Now, when you create 'FastCar', you would make it an instance of 'Vehicle' which would then have access to those prototype 'Drive' and 'Stop' methods without having to re-write them each and every single time.

what is this storing in the map variable?

The map variable you posted above is just referencing Array.prototype.map so the longer form of it does not need to be typed every single time.

How come they can now pass a string to the args of the map function

A string isn't being passed as an argument of the map function. Rather, map is being called on the string itself.

What is the point of calling the map function on map

var map in your post does not actually call Array.prototype.map, it would need to have parentheses at the end to actually call it, like so: Array.prototype.map().

instead of doing something like

There's nothing wrong with the solution you proposed, but I would imagine the documentation is showing you how flexible it can be and how there are always different solutions to the same problem.

Sign up to request clarification or add additional context in comments.

Comments

3

It seems what they mean by using it "generically" is using it on things that are not actually arrays, but that have the interface of an array.

Many of the built-in array functions can be used on anything that is array-like (numeric indices and a .length property), and that is true here.

Storing the function in a variable has no real effect here. This would accomplish the same result:

var a = Array.prototype.map.call('Hello World', function(x) { return x.charCodeAt(0); });

How come they can now pass a string to the args of the map function?

They aren't. The .call() method that exists on every function allows you to specify the this value for a method call, so in essence, it is like doing:

'Hello World'.map(function(x) { return x.charCodeAt(0); });

except you can't do this because strings don't have a .map method.

What is the point of calling the map function on map instead of doing something like ...

I think the main point here is to demonstrate that it can be done, but another benefit is that it skips the extra .split() operation.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.