How to add text to end of each array element using map?

Question

I am trying to write a function that maps over an array and add a string of text to the end of each element in the array. When I do a console.log I just get undefined. Any help would be greatly appreciated.

Here is the array:

let arr = ["England","Scotland","Westeros"];

Here is what I am trying:

dragonMapper = (arr) => {
  let newArr = arr.map(function(e) {
    e += '...here be dragons'
  });
  return newArr;
}

console.log(dragonMapper(newArr));

This is what I want the array to be after the function is executed:

["England...here be dragons","Scotland...here be dragons","Westeros...here be dragons"];

Possible duplicate of Javascript add text to beginning of each array element. Voting to close. — Ivan
– Ivan, Commented Jun 5, 2018 at 17:12
This will solve the problem And moreover you have not declared newArr in your code.. — Dheeraj Chelaramani
– Dheeraj Chelaramani, Commented Jun 5, 2018 at 17:13

Ivan · Accepted Answer · 2018-06-05 17:10:51Z

4

.map's callback function expects a return value

let arr = ["England", "Scotland", "Westeros"];

dragonMapper = arr => {
  let newArr = arr.map(function(e) {
    return e + '...here be dragons'; //Return the concatenated value of 2 strings
  });
  return newArr;
}

console.log(dragonMapper(arr));

Shorter version, with the arrow function syntax:

let arr = ["England", "Scotland", "Westeros"];

dragonMapper = arr => {
  return arr.map(e => e + '...here be dragons');
}

console.log(dragonMapper(arr));

edited Jun 5, 2018 at 17:10

Ivan

41.3k9 gold badges78 silver badges120 bronze badges

answered Jun 5, 2018 at 17:06

Eddie

26.8k6 gold badges39 silver badges59 bronze badges

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

Comments

Scott Sauyet · Accepted Answer · 2018-06-05 17:24:09Z

As others have said, you can fix this with code like this:

let arr = ["England","Scotland","Westeros"];
let dragonLands = arr.map(country => country + '...here be dragons');
console.log(dragonLands);

But also important is to understand why your code fails. The issue is that Strings are immutable. So this:

   e += '...here be dragons'

does not change the value of e in your original array but instead returns a new String, which is immediately thrown away, since you don't assign it to something or return it.

It can be confusing because this looks fairly similar:

let arr = [
    {name: "England", id: 1}, 
    {name: "Scotland", id: 2}, 
    {name: "Westeros", id: 3}
];
arr.forEach(country => country.name += '...here be dragons');
console.log(arr);

But there are important differences. First, map returns the result of applying the function to the elements. forEach, in contrast, is only important for side effects, in this case mutating the elements supplied to it.

Second, country => country.name += '...here there be dragons' does two things. It creates a new String as did your version, but then it assigns it back to country.name. Objects are not immutable.

map is an extremely useful construct, but when using it, it's essential to understand that it's the result of the function it invokes that's important.

Ivan · Accepted Answer · 2018-06-05 17:07:46Z

2

You can do it using the .map() method and template literals:

let arr = ["England","Scotland","Westeros"];
let result = arr.map(country => `${country}...here be dragons`);
console.log(result);

edited Jun 5, 2018 at 17:07

Ivan

41.3k9 gold badges78 silver badges120 bronze badges

answered Jun 5, 2018 at 17:05

mickl

50.1k9 gold badges71 silver badges99 bronze badges

Comments

Ivan · Accepted Answer · 2018-06-05 17:10:01Z

2

Instead of e += '...here be dragons' you can simply do e + '...here be dragons' and return the new value.

Also, you are calling dragonMapper with newArr but it needs to be called with arr

let arr = ["England", "Scotland", "Westeros"];

dragonMapper = (arr) => {
  return arr.map(function(e) {
    return e + '...here be dragons'
  });

}

console.log(dragonMapper(arr));

edited Jun 5, 2018 at 17:10

Ivan

41.3k9 gold badges78 silver badges120 bronze badges

answered Jun 5, 2018 at 17:06

brk

50.3k10 gold badges59 silver badges85 bronze badges

Collectives™ on Stack Overflow

How to add text to end of each array element using map?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related