FAQ: Iterators - The .map() Method

This community-built FAQ covers the “The .map() Method” exercise from the lesson “Iterators”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

Introduction To JavaScript

FAQs on the exercise The .map() Method

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

24 posts were merged into an existing topic: Clarifying Arrow Function Notation

7 posts were split to a new topic: Lesson Feedback

3 posts were split to a new topic: Matching Variable name

5 posts were split to a new topic: Number vs Numbers as variable?

9 posts were split to a new topic: Trying to solve with match or shift?

Why can’t we use .forEach( ) rather than using .map( ) ?

const smallNumbers = bigNumbers.forEach(bigNumber => {
  return bigNumber/100
})

console.log(smallNumbers)
const smallNumbers = bigNumbers.map(bigNumber => {
  return bigNumber/100
})

console.log(smallNumbers)

.forEach( ) returns undefined
but .map( ) return a new array

Why is that?

1 Like

because that is how this methods are implemented, forEach is useful if you need to do something with each element (for example logging)

while .map() creates a new array

wouldn’t be very useful to have two methods which do the same thing

6 Likes

Can we define a function beforehand to be used as the callback function for .map()?
Similar with .forEach()

A simple way to find out would be to try, no?

also looking at the documentation which contains the syntax:

var new_array = arr.map(function callback(currentValue[, index[, array]]) {
    // Return element for new_array
}[, thisArg])

we can see map takes a callback function, just like .forEach

“Notice that the elements in numbers were not altered and bigNumbers is a new array.”

Does anyone know why the first array doesn’t change here but in lesson about arrays if there was a function on the right-hand it not only saved the value in new var but also changed the array?

const newItemTracker = [‘item 0’, ‘item 1’, ‘item 2’];
const removed = newItemTracker.pop();

The map() method does not alter the array it is mapping. The alteration is done to each value appended to the output array.

 > a = "abcdefghijklmnopqrstuvwxyz".split("")
<- (26) ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"]
 > b = a.map(x => x.toUpperCase())
<- (26) ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]
 > 
1 Like

Hi,

I’m a little confused as to why return animal[0] in the map function would return just the first letter of each array element. I thought that would return the first element in the array not the letter?

4 Likes

animals is the name given to the array. animal is the name given to the iteration variable as the iterator goes through the array, one element at a time. Given the elements contains strings, animal[0] will be the first character.

5 Likes

I can’t believe I didn’t see that at first. That makes so much sense now. Thank you!

3 Likes

let aString = 'animal';

The String type of data has a .length property (just like Arrays) with the first index starting at 0, so aString[0] will refer to the first letter a and aString[3] – to m and so forth.

The similar effect may be obtained using a string method called .charAt():

aString.charAt(3) // 'm'

2 Likes

I’m struggling to understand why my code is returning the first element of the array and not the first letter as requested.

My code is:

const secretMessage = animals.map(animal => {

return animals[0]

})

I know i’m missing something but can’t figure out what

because here:

 animals[0]

animals is the array. .map() calls your callback function, passing the value of the array to your parameter (animal)

1 Like

I think I understand the theory of .map() but I am struggling to see what I need to change to return the first element of the array. What am I missing from the code if you don’t mind me asking?

map returns an array that directly corresponds with the array we call it on. That means that for every element in the object array, there is one in the result that corresponds.

 words = ['one', 'two', 'three', 'four', 'five']
 upcaseWords = words.map(word => word.toUpperCase())

result

["ONE", "TWO", "THREE", "FOUR", "FIVE"]