map over properties in array and concat a string in JavaScript es6

Question

I have the following array of objects for example some authors and I want to map through them and return a string which has been concatenated with some formatting. I am for some reason having an issue with this fairly easy thing.

const authors = [ { id: 1, name: 'Steven'}, {id: 2, name: 'Nick'}]
let names = authors.map( (a, i) => {
  return `${a.name} is cool`
})
console.log(names)
// ["Steven is cool","Nick is cool"]
// but I really want the string "Steven is cool Nick is cool"

How can I instead get this to map through and format it to a string?

e.g. "Steven is cool Nick is cool"

Your brwoser , and its version ?

Abdennour TOUMI
– Abdennour TOUMI

2016-07-21 06:15:37 +00:00
Commented Jul 21, 2016 at 6:15 — Abdennour TOUMI
– Abdennour TOUMI, Commented Jul 21, 2016 at 6:15
Just names.join(" ")?

Bergi
– Bergi

2016-07-21 06:45:09 +00:00
Commented Jul 21, 2016 at 6:45 — Bergi
– Bergi, Commented Jul 21, 2016 at 6:45

Abdennour TOUMI · Accepted Answer · 2016-07-21 06:21:38Z

30

Use Array#Join :

authors.map((a) => `${a.name} is cool`).join(' ');

DEMO

NOTE : join is not related to ES6 , it is old .

edited Jul 21, 2016 at 6:21

answered Jul 21, 2016 at 6:16

Abdennour TOUMI

94.6k42 gold badges271 silver badges274 bronze badges

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

4 Comments

Abdennour TOUMI Over a year ago

@steveniseki : i update answer, i make code more elegant (brief)

a better oliver Over a year ago

"i make code more elegant (brief)" (a) => can be a => for that matter

Abdennour TOUMI Over a year ago

Yep @abetteroliver, it matters because it does not comply with eslint rules; Check out aribnb JS coding conventions.

a better oliver Over a year ago

I am confused. If you want your code to comply then why don't you change it?

Mohammad · Accepted Answer · 2018-11-20 14:32:44Z

5

i for one prefer the use of reduce

ES5 version

autors.reduce(function (str, person) { 
  return (str+' '+person.name+ ' is cool');
}, '');

ES6 version

autors.reduce((str, person) => `${str} ${person.name} is cool`, '');

edited Nov 20, 2018 at 14:32

Mohammad

21.5k16 gold badges58 silver badges86 bronze badges

answered Jul 21, 2016 at 6:23

Dayan Moreno Leon

5,4552 gold badges25 silver badges24 bronze badges

3 Comments

demux Over a year ago

Why would you use reduce rather than join for this?

svnm Over a year ago

thanks another good option, more of a functional approach and works well

Hawkeye Parker Over a year ago

@demux it's not so much reduce() rather than join(), but reduce() rather than map().join(). map().join() has to loop through all of the elements in the array twice, whereas reduce() only does a single loop. So, reduce() performs better (2x). This gain is, practically speaking, meaningless unless your array is VERY big, OR if you are doing it VERY (VERY) often. But, I think it's worth thinking about these things even on a small scale so that, when it matters, you notice it.

james emanon · Accepted Answer · 2016-07-21 06:23:48Z

1

Here is another version so you don't have to map --> join.. you can just reduce.

const authors = [ { id: 1, name: 'Steven'}, {id: 2, name: 'Nick'}]

console.log(authors.reduce( (p,c) => `${p} ${c.name} is cool `, ""))

answered Jul 21, 2016 at 6:23

james emanon

11.9k12 gold badges70 silver badges107 bronze badges

4 Comments

Abdennour TOUMI Over a year ago

map->join is the most performance . Check : jsfiddle.net/abdennour/2btx0c28/4

james emanon Over a year ago

I believe reduce will always more performant because it doesn't have to create a intermediary array. Also, in your fiddle, in chrome - reduce is more performant. But I tend to fluctuate between a reduce and a map/join solution. Depends on how I am feeling.

thefourtheye Over a year ago

This will leave a space at the beginning.

a better oliver Over a year ago

@AbdennourTOUMI If you want to test performance, then use a dedicated framework. Simple time measuring is pointless.

Collectives™ on Stack Overflow

map over properties in array and concat a string in JavaScript es6

3 Answers 3

4 Comments

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related