How can I create a function that push objects in an existing array?

Question

I have been trying to create a function with 4 parameters that allows me to push an object in an existing array. However, I am not getting the result I want. For example, this is the existing array:

const firstGen = [
    {name: 'Mewtwo', hp: 110, type: 'physic'},
    {name: 'Charizard', hp: 135, type: 'flying'},
    {name: 'Pikachu', hp: 85, type: 'electric'},
    {name: 'Totodile', hp: 55, type: 'water'},
    {name: 'Bayleef', hp: 80, type: 'grass'},
    {name: 'Typlosion', hp: 125, type: 'fire'}
]

And this is the function I have created:

const addPokemon = (pokedex, pokemonName, pokemonHp, pokemonType) => {
    pokedex.push({pokemonName,pokemonHp, pokemonType})
}

Example input:

addPokemon(secondGen, 'Lucario', 85, 'fighting')

But the output is:

  { name: 'Mew', hp: 110, type: 'physic' },
  { name: 'Arcanine', hp: 135, type: 'Fire' },
  { name: 'Raikou', hp: 140, type: 'electric' },
  { name: 'Blastoise', hp: 120, type: 'water' },
  { name: 'Gardevoir', hp: 100, type: 'grass' },
  { name: 'Scorbunny', hp: 45, type: 'fire' },
  { pokemonName: 'Lucario', pokemonHp: 85, pokemonType: 'fighting' }

As you can see, the parameters that I have in my function also appear in the output and not the property names of my array. Thank you in advance.

Use the key names you want in your object: {name: pokemonName, hp: pokemonHp, type: pokemonType}. — ggorlen
– ggorlen, Commented Jan 3, 2020 at 23:48
{pokemonName,pokemonHp, pokemonType} is shorthand for {pokemonName: pokemonName, pokemonHp: pokemonHp, pokemonType: pokemonType} - there is no way for JS to guess you want different names for these properties, so you just have to do it manually: {name: pokemonName, hp: pokemonHp, type: pokemonType} — VLAZ
– VLAZ, Commented Jan 3, 2020 at 23:51

Armando K. · Accepted Answer · 2020-01-03 23:51:15Z

2

So, this part of the code

pokedex.push({pokemonName,pokemonHp, pokemonType})

is actually a shorthand for

pokedex.push({pokemonName: pokemonName,pokemonHp: pokemonHp, pokemonType: pokemonType})

This notation is used when the variable name and the attribute have the same name. In your case you need to specify the attribute manually by doing:

pokedex.push({name: pokemonName, hp: pokemonHp, type: pokemonType})

Or changing the parameters to be:

const addPokemon = (pokedex, name, hp, type) => {
    pokedex.push({name, hp, type})
}

answered Jan 3, 2020 at 23:51

Armando K.

5041 gold badge5 silver badges14 bronze badges

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

Comments

Barmar · Accepted Answer · 2020-01-03 23:52:15Z

You're using the ES6 object shorthand, where { foo } is short for { foo: foo }. So the object literal

{pokemonName,pokemonHp, pokemonType}

is equivalent to

{pokemonName: pokemonName, pokemonHp: pokemonHp, pokemonType: pokemonType}

You need to use the property names that you really want.

pokedex.push({name: pokemonName, hp:pokemonHp, type: pokemonType})

Or you could change the names of the function parameters to match the properties.

const addPokemon = (pokedex, name, hp, type) => {
    pokedex.push({name, hp, type})
}

Josh Mathews · Accepted Answer · 2020-01-03 23:56:15Z

This is because you are creating new properties in the objects that you are pushing instead of assigning the inputs to existing properties.

You have two options:

Explicitly set the property:

const addPokemon = (pokedex, pokemonName, pokemonHp, pokemonType) => {
    pokedex.push({ name: pokemonName,
                   hp: pokemonHp, 
                   type: pokemonType});

}

Change the parameter names to match the properties (less typing that way):

const addPokemon = (pokedex, name, hp, type) => {
    pokedex.push({ name, hp, type});
}

this is identical to:

const addPokemon = (pokedex, name, hp, type) => {
    pokedex.push({name: name, hp: hp, type: type})
}

Collectives™ on Stack Overflow

How can I create a function that push objects in an existing array?

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related