Javascript Can't Call Push On Array Inside Another Function

Question

I have a really simple JavaScript question...

I have a function, Pets, that contains three variables: an integer, a string, and an array defined as follows:

function Pets() {
    var index;
    var name;
    var animals = ["cat", "dog"];
}

In another function just below this one I declare a variable of type Pets and push "mouse" onto the animals array. I then do a console log to see the values.

function Test() {
    ...
    var pets = new Pets();
    pets.index = 1;
    pets.name = "My Pets";
    pets.animals.push("mouse");
    console.log(pets);
}

For whatever reason I didn't see any output from the console.

I then added some more console logging before and after calling animals.push:

    var pets = new Pets();
    pets.index = 1;
    pets.name = "My Pets";
    console.log("BEFORE PUSH");
    console.log(pets);
    pets.animals.push("mouse");
    console.log("AFTER PUSH");

And here is my output:

BEFORE PUSH
Pets {index: 1, name: "My Pets"}

Note that I only see the first console log and not the second (after the push) which I presume indicates a problem with calling push on animals.

Also note that the console output shows that Pets has a property called index and a property called name but nowhere does it indicate that there is also a property called animals which is my array.

I tried changing the array declaration to:

var animals = new Array();

but that didn't seem to help either.

Is there something special that I have to do to initialize the animals array before I can push elements on to it? More generally, why doesn't the property animals even show up as part of the Pets class?

Thank you,

Jan

I figured it was asked somewhere else. A quick search did not yield an answer, however. I suppose my search terms were not correct. Delete away! — Jan Tacci, Jul 25 '14 at 01:51
Does duplicating a question on Stack Overflow lower my reputation? :O — Jan Tacci, Jul 25 '14 at 01:53
No, it just marks your question as duplicate and a banner appears above the question redirecting users to the original question. Nothing changes with your [reputation](http://stackoverflow.com/users/1586383/jan-tacci?tab=reputation) — Patrick Evans, Jul 25 '14 at 01:58
Okay... well I accepted your answer so let's hope it sticks. :) — Jan Tacci, Jul 25 '14 at 02:02

score 3 · Accepted Answer · answered Jul 25 '14 at 01:43

3

You are declaring your variables in a way that will not make them visible outside the the Pets constructor function

This is why you do not see the second console because the line

pets.animals.push("mouse");

will throw the error TypeError: Cannot read property 'push' of undefined (or similar depending on browser). This will cause the rest of the script to stop executing.

The only reason you see index and name in the first console log is because you are creating them on the object after creating your Pets object. You need declare them using this operator or by setting them up on the prototype

function Pets() {
    this.index = null;
    this.name = null;
    this.animals = ["cat", "dog"];
}

answered Jul 25 '14 at 01:43

Patrick Evans

41,991
6
74
87

So I need to declare them first then initialize them? As follows: var this.index = null? – Jan Tacci Jul 25 '14 at 01:45
you do not use `var` when declaring object properties, but otherwise yes – Patrick Evans Jul 25 '14 at 01:46
Oh okay. So just putting this.index = null implies both initializing and "declaring" the object property? – Jan Tacci Jul 25 '14 at 01:47
`pets` also does not have the property `push` so you may need `Array.prototype.push.apply(pets,["mouse"]);` to do it – 13ruce1337 Jul 25 '14 at 01:53
@13ruce1337, no OP is calling the push method on the animals array object not on the pets object – Patrick Evans Jul 25 '14 at 01:54
ahh I c don't mind me :D, sad part it i wrote `animals` initially and didn't think – 13ruce1337 Jul 25 '14 at 01:56

score 0 · Answer 2 · answered Jul 25 '14 at 01:47

0

Have you tried assigning the variable to the window during declaration instead of using var? Set it like window.myVar = ["var1", "var2"]

answered Jul 25 '14 at 01:47

Phil Young

1,334
3
21
43

Putting variables on the global object is a bad practice, as you could accidentally overwrite an already existing property. – Patrick Evans Jul 25 '14 at 01:47
Okay. I will go with your suggestion then thanks! – Jan Tacci Jul 25 '14 at 01:48

score 0 · Answer 3 · answered Jul 25 '14 at 01:48

You can't access any of the properties of Pets this way, because they are not exposed to outer functions. You are creating the properties index and name by saying

pets.index = ...

You have to change your code like so:

function Pets() {
    this.index;
    this.name;
    this.animals = ["cat", "dog"];
}
function Test() {
    var pets = new Pets();
    pets.index = 1;
    pets.name = "My Pets";
    pets.animals.push("mouse");
    console.log(pets);
}
Test();

Javascript Can't Call Push On Array Inside Another Function

3 Answers3