Codecademy Forums

FAQ: Iterators - The .map() Method

yes, its just a a shorthand.

1 Like

The return keyword isn’t used in the JavaScript file because for arrow function syntax, you can write your code block without the curly braces {}, parenthesis (), and the return keyword for concise (in essence, concise refers to ‘less terms’) function bodies, whilst in the instructions it may have been used with the {}, (), and return keyword making it less concise. Remember as a programmer, you want to do less work.

This is my second time through this course. First time was the free version. Now I am doing the Pro version. Regardless, once you get through it the first time (and try another JS related course like myself) and try it again a lot more will make sense from the Higher Order Functions lesson and onward. Likely what is stumping you is being familiar with the usage of pre and post ES6 style.

2 Likes

This solution prints the correct solution to the console for the second part:

const smallNumber= bigNumbers.map(random=>{
return random/100
})

console.log(smallNumber)

however, the exercise will not pass. What am I missing? Is there a bug in this lesson?

These are the instructions:

Use .map() to divide all the numbers in bigNumbers by 100 . Save the returned values to a variable declared with const called smallNumbers .

It’s probably as simple as you having used smallNumber instead of smallNumbers. :wink:

1 Like

doh.

Thank you very much!

3 Likes

Good morning, I had a question regarding this following example code below. Specifically, is it significant that you used the term number and not numbers in the numbers.map() method’s callback function?

const bigNumbers = numbers.map(number => {
return number * 10;
});

Thank you.

number is the parameter, map will pass each value from the numbers array to the parameter. Thus number is a very good name.

you could even name the parameter bar:

const bigNumbers = numbers.map(bar => {
   return bar * 10;
});

bar is not very descriptive, its just to demonstrate what is what.

2 Likes

I felt same way and lost as course is getting intense and little help.

the main issue is that the explanations are simply not very good. i find it interesting that the main recourse suggested is to navigate away from this interface to actually learn the material properly.

It would be nice to have a follow up lesson before Higher order functions about the syntax differences between ES5 and ES6 regarding functions. I think that would lessen some of the confusion between the formats.

Arrow functions are very much like the ES5 counterpart, function expressions. Both are anonymous function expressions, but with some differences.

array.map(function (param) {
    return param ** 2;
})

Above will return a new array with values corresponding to array, but which values are squared (in this instance).

ES6 allows us to take some shortcuts owing to the simplicity of the return…

array.map(param => param ** 2);

The ES5 example must have,

  • function keyword
  • parentheses on the parameter
  • explicit code body delimiters (curly braces)
  • explicit return keyword

As we can see above, ES6 lets us drop all those requirements when the body contains only one statement.

  • no function keyword
  • no parens on parameter
  • no code body delimiters
  • no return keyword

When there is no parameter, or more than one parameter, then parens are required. When there is more than one statement then both body delimiters and return keyword are required.

1 Like

Thanks. I think I am getting there.

2 Likes

I’m trying to follow along as well.
This is because when it can be written on one line of code, you can eliminate the curly brackets and the return is implicit…correct??

This was helpful to me. I wasn’t understanding that animal in this example was a parameter. For some reason I was thinking it was the name of the callback function being passed through. Is the reason I don’t see a name of a callback function because it is an anonymous function? From there, it’s just shorthand which makes sense when I know that animal is the parameter.

yes, MDN has a good example:

var elements = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];

// This statement returns the array: [8, 6, 7, 9]
elements.map(function(element) {
  return element.length;
});

// The regular function above can be written as the arrow function below
elements.map((element) => {
  return element.length;
}); // [8, 6, 7, 9]

where we see the “old” es5 syntax, and then an example using es6. source

As this contains only a single argument, and a single statement, it can be reduced to,

elements.map(element => element.length);

i know, i was just demonstrating for bit34 the function and then the es6 syntax, which i copied from MDN.

1 Like

Not one line. One expression.
(param1, param2, …, paramN) => expression

That’s what the word anonymous means. It’s not a cause for it to happen, that’s what it is, nothing needs to happen. An anonymous function is something you defined in-line without bothering to give it a name. Anonymous means it has no name. Maybe they should just be called “function” similar to how “number” isn’t called “anonymous number”. The main use for anonymous functions is when they’re considered values like any other.

elements.map((element) => element.length)

^ that kind of code bothers me.

Oh let me just do some unspeakable voodoo to get js to behave nicely.

const attr = new Proxy({}, {
  get: (_, name) => (obj) => obj[name]
})

cool. now:

console.log(
  ['cat', 'toddler', 'ice cream'].map(attr.length)
)
// [3, 7, 9]

js might be all kinds of wrong but at least it bends.

What bothers me is that
elements.map((element) => element.length)
The function to map over elements already exists, so why does another function have to be created to wrap it?
should be:
elements.map(length)