ShoutGreetings() Intermediate Javascript Practice Question

Get Help JavaScript
#1

Hello all,

I was able to finish this exercise using forEach, but I wanted to try .map too.

However, when I use the curly brackets in a certain spot, the code doesn’t work. Here’s the working code:

function shoutGreetings(arr) {
  const newWords = arr.map(word =>
    word.toUpperCase() + "!");
    return newWords;
}

I wanted to put the curly bracket just after the fat arrow and after the quotation for the exclamation point. Like this:

function shoutGreetings(arr) {
  const newWords = arr.map(word => {
    word.toUpperCase() + "!"});
    return newWords;
}

But when I do that, the function returns six “undefined” in an array.

The problem is, I’ve seen other .map functions that work just fine with these curly brackets. Why doesn’t it work here? And is there a rule for when to use/not use the curly brackets in .map like this?

For example, the .map introduction page includes two different examples:

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

and also

const secretMessage = animals.map(animal => animal[0]);

The first one uses curly brackets, the second one doesn’t.

#2

If we look at your .map() callback function for shoutGreetings:

map(word => { word.toUpperCase() + "!" });

and compare that with the callback function for bigNumbers:

map(number => { return number * 10;});

notice anything? any differences stand out?

the return keyword is missing your map callback function for shoutGreetings.

so what can we deduce from that? omitting the curly brackets will use an implicit return. Its a short-hand for single line functions.

2 Likes
#3

So, do you mean,

if I include the curly brackets, I must use the return keyword inside the brackets.

And if I don’t include the curly brackets, the return keyword can go after the callback function?

Which one is shorthand again? Sorry, I feel like I missed this shorthand lesson.

#4

omitting the curly brackets and return keyword is the short-hand. What you do after .map() or .forEach or any order higher order function you should view as a separate thing

#5

Okay, I probably did learn that before and just forget. But in that case, where the curly brackets and return keyword can be omitted, why is the return keyword still necessary after the .map function in this case?

function shoutGreetings(arr) {
const newWords = arr.map(word =>
word.toUpperCase() + “!”);
return newWords;
}

It seems redundant to allow a shorthand that lets you omit the return keyword, only for you to ultimately require the return keyword afterwards.

#6

you are seeing two things as one. Your callback function uses the shorthand, but shoutGreetings still need to returned the new array.

although, I suppose the body of your shoutGreetings is also a single line, so we can apply the same shorthand:

const shoutGreetings = arr => arr.map(word => word.toUpperCase() + "!")

console.log(shoutGreetings(['a', 'b', 'c']))
1 Like
#7

This is exactly as I accomplished this task:

const shoutGreetings = greetings => greetings.map(greeting => greeting.toUpperCase() + '!');