Javascript: Different behavior with single-argument Array.map() depending on whether I use curly braces or not (aren't both forms allowed?)

Question

I'm experimenting with Array.map() and got this little snippet, which does perform as intended:

let cities = ["Buenos Aires", "Santa Fe", "Mar del Plata", "Mar de las Pampas"];

function urlify(string) {
  return string.split(" ").join("-").toLowerCase();
}

function functionalUrl(elements)  {
  return elements.map( element => urlify(element) );
}

console.log(functionalUrl(cities));

// ['buenos-aires', 'santa-fe', 'mar-del-plata', 'mar-de-las-pampas' ]

However, if I replace

return elements.map( (element) => urlify(element) );

with

return elements.map( (element) => { urlify(element); } );

(i.e., add parentheses and curly braces) it returns

[undefined, undefined, undefined, undefined]

I don't understand such behavior, as the curly braces/parentheses form is supposed to be "correct", and taking them away (I thought?) is just allowed in the specific case of a single-argument function... What am I missing here?

Thanks!

Beware: if you are using curly braces, you need to put return inside, otherwise, it will return void, which is undefined as you can see — ZorgoZ
– ZorgoZ, Commented Dec 26, 2019 at 18:44

Tinu Jos K · Accepted Answer · 2019-12-26 19:08:25Z

4

elements.map( (element) => { urlify(element); } );

When you do the above code, you are creating the function body (assuming there are more lines of code to be included) and it expects the 'return' keyword, but if you are returning a single value (the result of one single computation), in your case

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

then you don't have to specify the return keyword.

So the correct code for the second scenario using braces will be

elements.map( (element) => {return urlify(element)} );

The first one is a shorthand syntax not using the return keyword, also if you just have only one parameter you don't have to wrap the parameter inside the parenthesis. So the more concise way should be

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

edited Dec 26, 2019 at 19:08

answered Dec 26, 2019 at 18:43

Tinu Jos K

9601 gold badge9 silver badges23 bronze badges

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

Collectives™ on Stack Overflow

Javascript: Different behavior with single-argument Array.map() depending on whether I use curly braces or not (aren't both forms allowed?)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related