Using array.push inside of another array yields undefined

Question

I ran into a problem when trying to define an array inside of Fire array (seen in code).

I used console.log() to output array length which is inside of my Fire[] array (as a debug) but got an error saying that said array was undefined. Here's my code:

var Fire = [];

var fire = function FireGen()
{
    this.particle = [];
    var part = function Particle()
    {
    };
    this.particle.push(part);
};
Fire.push(fire);

console.log(Fire.particle.length); //Outputs undefined

I'm quite new when it comes to object and array usage in JavaScript. I would appreciate if someone could explain why my array is undefined.

p.s.w.g · Accepted Answer · 2019-01-24 21:24:05Z

As others have pointed out, Fire is an array, so to access properties of the first element from that array, you need to use Fire[0].... However, there are a few other problems with your code that also need to be fixed.

Your FireGen and Particle functions appear to be defined as constructor functions (you use this in the function body). So you should call these functions with the new operator, e.g. new FireGen(). Once you make this change, you should probably rearrange your code so that x and y are passed in as arguments and you only define each function once.

For example:

var Fire = [];
function FireGen(x, y)
{
    this.x = x;
    this.y = y;
    this.particle = [];
    this.particle.push(new Particle(x, y));
};
function Particle(x, y)
{
   this.x = x;
   this.y = y;
};

function spawnFire(event)
{
    var x = event.clientX;
    var y = event.clientY;
    Fire.push(new FireGen(x, y));

    console.log(Fire[0].particle.length); //Outputs undefined
}

document.addEventListener('click', spawnFire);

user229044 · Accepted Answer · 2019-01-24 21:22:23Z

1

You're defining functions, which are never executed, and pushing those functions into an array. The array contains a function, which doesn't have a particle property.

Odds are you're trying to do something like this:

var Fire = [];

var fire = {
  particle: [
    {
      part: { /* ... */ }
    }
  ]
}

Fire.push(fire);

console.log(Fire[0].particle.length); //Outputs 1

answered Jan 24, 2019 at 21:22

user229044♦

241k41 gold badges346 silver badges350 bronze badges

Comments

Tyler Roper · Accepted Answer · 2019-01-24 21:27:23Z

1

By doing push(part) and push(fire), you're pushing function definitions.

For these to behave as classes, use the new operator. (ie push(new part) and push(new fire).

Additionally, Fire is an array so you'll need to specify an index (eg Fire[0] for the first item in the array).

var Fire = [];

var fire = function FireGen()
{
    this.particle = [];
    var part = function Particle()
    {
    };
    this.particle.push(new part);
};
Fire.push(new fire);

console.log(Fire[0].particle.length);

edited Jan 24, 2019 at 21:27

answered Jan 24, 2019 at 21:22

Tyler Roper

21.7k6 gold badges35 silver badges58 bronze badges

1 Comment

Tyler Roper Over a year ago

@GytisDokšas Glad to have helped. That said, take a gander at p.s.w.g's solution. His implementation is extensible and - in my personal opinion - the proper way to accomplish this.

Collectives™ on Stack Overflow

Using array.push inside of another array yields undefined

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related