Javascript integer to string output not matching expected values

Question

During some basic tests of JS usage I have been playing around with object generation / addition to an array. I have so far used two different approaches for this problem:

A single global object which has fields varied and then added.
A factory function which generates the same object with an additional operation to show a slight difference (Addition of 1 to the value field)

While there are no errors at run time the value field on the global object property always outputs a 2 (Where the value is suppose to increment with the loop), while the function approach seemingly works without issue. Do you have any idea why this would be the case?

The final output I generated was "[{"name":"Hello","value":2},{"name":"Hello World","value":1},{"name":"Hello","value":2},{"name":"Hello World","value":2},{"name":"Hello","value":2},{"name":"Hello World","value":3}]" (from the console.log(JSON.stringify(testArray));).

I had expected an output of "[{"name":"Hello","value":0},{"name":"Hello World","value":1},{"name":"Hello","value":1},{"name":"Hello World","value":2},{"name":"Hello","value":2},{"name":"Hello World","value":3}]"

The code for the relevant functions and object can be found below.

Defining the global variable:

var globalVariable =
{
    name: undefined,
    value: undefined
}

Factory function:

function globalVariableGen(name, valueInput)
{
    return output =
    {
        name: name,
        value: valueInput + 1
    }
}

Array generation function:

function test2()
{
    var i, testArray = [];
    for (i = 0; i < 3; i++)
    {
        alert(i.toString());
        globalVariable.name = "Hello";
        globalVariable.value = i;
        testArray.push(globalVariable);

        testArray.push(globalVariableGen("Hello World", i));
    }
    console.log(JSON.stringify(testArray));
}

Kind regards, Shadow

When you push an object to an array, it's not a copy of the object that you push, it's a reference to the existing object. That means, if you modify this object later, then the "object pushed in the array" will reflect the same changes. I'm not really sure of what you are trying to achieve, but your use of global variables for the task you show is (part of) the source of the confusion. — Pac0
– Pac0, Commented Oct 8, 2018 at 23:51
Also, your function "globalVariableGen" does not seem to assign anything to your "globalVariable". — Pac0
– Pac0, Commented Oct 8, 2018 at 23:53
Perfect thank you! So without generating a new object each time it merely acts essentially like a pointer to the same initial object. — Shadow
– Shadow, Commented Oct 8, 2018 at 23:53
Yes, it's exactly that, (but I would refrain from using the word "pointer", it's more like a "reference", which are very similar) — Pac0
– Pac0, Commented Oct 8, 2018 at 23:54

Rubydesic · Accepted Answer · 2018-10-08 23:53:10Z

4

This is because javascript is pass-by-reference and you're referring to the same globalVariable which you add to the array multiple times. The array then contains multiple pointers to the globalVariable which is exactly the same.

If you add a console.log(JSON.stringify(testArray) into the loop you will see this behavior.

> "[{"name":"Hello","value":0},{"name":"Hello World","value":1}]"

> "[{"name":"Hello","value":1},{"name":"Hello World","value":1},{"name":"Hello","value":1},{"name":"Hello World","value":2}]"

> "[{"name":"Hello","value":2},{"name":"Hello World","value":1},{"name":"Hello","value":2},{"name":"Hello World","value":2},{"name":"Hello","value":2},{"name":"Hello World","value":3}]"

answered Oct 8, 2018 at 23:53

Rubydesic

3,51716 silver badges30 bronze badges

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

1 Comment

Shadow Over a year ago

Thank you very much for the quick reply. I didn't realise that was how the arrays in js were implemented :)

Collectives™ on Stack Overflow

Javascript integer to string output not matching expected values

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related