How to add to each element of an Array

Question

I'm attempting to create a new array from an existing array and add "!" to each username from the old array. What i am getting is ['[object Object]!'].

// Complete the below questions using this array:
const array = [
  {
    username: "john",
    team: "red",
    score: 5,
    items: ["ball", "book", "pen"]
  },
  {
    username: "becky",
    team: "blue",
    score: 10,
    items: ["tape", "backpack", "pen"]
  },
  {
    username: "susy",
    team: "red",
    score: 55,
    items: ["ball", "eraser", "pen"]
  },
  {
    username: "tyson",
    team: "green",
    score: 1,
    items: ["book", "pen"]
  },

];

//Create an array using forEach that has all the usernames with a "!" to each of the usernames
const player = []
const newArray = array.forEach((username) => {
  player.push(username + '!');
})
console.log(player);

Basically, [From an array of objects, extract value of a property as array](https://stackoverflow.com/questions/19590865/from-an-array-of-objects-extract-value-of-a-property-as-array) followed by [Javascript shortcut, to append string into all the values of array?](https://stackoverflow.com/q/35843040/215552) — Heretic Monkey, Nov 03 '22 at 14:33
@MikeCase Did you get a chance to look into the answer I added ? I hope it will work as per your expectation. — Debug Diva, Nov 06 '22 at 17:01

score 1 · Answer 1 · answered Nov 03 '22 at 14:12

The idiomatic way is to use Array.prototype.map to transform an array into another array.

const array=[{username:"john",team:"red",score:5,items:["ball","book","pen"]},{username:"becky",team:"blue",score:10,items:["tape","backpack","pen"]},{username:"susy",team:"red",score:55,items:["ball","eraser","pen"]},{username:"tyson",team:"green",score:1,items:["book","pen"]}];

// using each player, append "!" to the end to create a new array
const players = array.map((user) => user.username + "!");

console.log(players);

Axekan · Answer 2 · 2022-11-03T14:07:59.570

Here you go. You were trying to add a string to an object, where instead you want to add a the exclamation mark to the username property of the object

// Complete the below questions using this array:
const array = [
  {
    username: "john",
    team: "red",
    score: 5,
    items: ["ball", "book", "pen"]
  },
  {
    username: "becky",
    team: "blue",
    score: 10,
    items: ["tape", "backpack", "pen"]
  },
  {
    username: "susy",
    team: "red",
    score: 55,
    items: ["ball", "eraser", "pen"]
  },
  {
    username: "tyson",
    team: "green",
    score: 1,
    items: ["book", "pen"]
  },

];

//Create an array using forEach that has all the usernames with a "!" to each of the usernames
const player = []
const newArray = array.forEach(({ username }) => {
  player.push(`${username}!`);
})
console.log(player);

References:

Destructuring

Template strings (${})

I don't think you need template literals since `user.username` is already a string and you're just appending a character to the end. — kelsny, Nov 03 '22 at 14:07
@caTS I think it's more readable, but I also think I misunderstood the question a little. — Axekan, Nov 03 '22 at 14:09

score 0 · Answer 3 · answered Nov 03 '22 at 14:04

You needed to add username.username in the player push because now you getting the object not the username.

// Complete the below questions using this array:
const array = [
    {
      username: "john",
      team: "red",
      score: 5,
      items: ["ball", "book", "pen"]
    },
    {
      username: "becky",
      team: "blue",
      score: 10,
      items: ["tape", "backpack", "pen"]
    },
    {
      username: "susy",
      team: "red",
      score: 55,
      items: ["ball", "eraser", "pen"]
    },
    {
      username: "tyson",
      team: "green",
      score: 1,
      items: ["book", "pen"]
    },
  
  ];
  
  //Create an array using forEach that has all the usernames with a "!" to each of the usernames
  const player = []
  const newArray = array.forEach((username) => {
    player.push(username.username + '!');
  })
  console.log(player);

The array.foreach is to make a "object" from your array so every {} will be an object. After that you need to call what you want from the object. So what is more readable is this.

const player = []
  const newArray = array.forEach((person) => {
    player.push(person.username + '!');
  })
  console.log(player);

bloodyKnuckles · Answer 4 · 2022-11-03T14:30:49.120

Destructure the forEach() input object:

// {username} wrapping curly brackets around an object key 
// pulls that value into the function assigning it to a variable with the same name

const newArray = array.forEach(({username}) => {
  player.push(username + '!');
})

player outputs:

[
  "john!",
  "becky!",
  "susy!",
  "tyson!"
]

forEach() actually returns undefined, so using:

const newArray = array.forEach((username) => {

...newArray is always undefined, therefore pointless. When using forEach() simply:

array.forEach(({ username }) => {
  player.push(`${username}!`);
})

Better yet, if you are creating a new array, use map():

const newArray = array.map(({username}) => {
  return `${username}!`;
})
console.log(newArray);

Also using template literals to interpolate the username variable into the return'ed string.

// Complete the below questions using this array:
const array = [
  {
    username: "john",
    team: "red",
    score: 5,
    items: ["ball", "book", "pen"]
  },
  {
    username: "becky",
    team: "blue",
    score: 10,
    items: ["tape", "backpack", "pen"]
  },
  {
    username: "susy",
    team: "red",
    score: 55,
    items: ["ball", "eraser", "pen"]
  },
  {
    username: "tyson",
    team: "green",
    score: 1,
    items: ["book", "pen"]
  },

];

//Create an array using forEach that has all the usernames with a "!" to each of the usernames
const newArray = array.map(({username}) => {
  return `${username}!`;
})
console.log(newArray);

But why aren't we using `map` here? `newArray` isn't even an array since `forEach` returns nothing, and inside `forEach` we're pushing to another array. — kelsny, Nov 03 '22 at 14:10

score 0 · Answer 5 · answered Nov 04 '22 at 07:29

You can simply achieve this requirement with a single line of code by just using Array.map() method.

Live Demo :

const arr = [
  {
    username: "john",
    team: "red",
    score: 5,
    items: ["ball", "book", "pen"]
  },
  {
    username: "becky",
    team: "blue",
    score: 10,
    items: ["tape", "backpack", "pen"]
  },
  {
    username: "susy",
    team: "red",
    score: 55,
    items: ["ball", "eraser", "pen"]
  },
  {
    username: "tyson",
    team: "green",
    score: 1,
    items: ["book", "pen"]
  }
];

const newArr = arr.map(({ username}) => username + '!');

console.log(newArr);

How to add to each element of an Array

5 Answers5