Every object in array is overrided after instantiating and pushing new object

Question

I am trying to make an array of objects from user input.

The object is pushed in array, but on the next step input overrides every object in array.

I have tried passing category.value and it works perfectly, but i want to pass the whole category.

for example:

choose A, submit, output - "a" (as expected)
choose B, submit, output - "b","b" (expected "a","b")

Why is it happening?

let form = document.getElementById('form');

let category = form.category;

let submit = document.getElementById('formSubmit');

let arr = [];

submit.addEventListener("click",(e)=>{
    e.preventDefault();

    let c = new C(category);

    arr.push(c);

    for(let i=0;i<arr.length;i++)
    {
        console.log(arr[i].category.value);
    }
})



class C {
    constructor(category)
    {
        this.category = category;
    }

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>

<form id="form">
    <select name="category">
        <option value="-">choose category</option>
        <option value="a">A</option>
        <option value="b">B</option>
        <option value="c">C</option>
    </select>
    <button id="formSubmit" type="submit">submit</button>

</form>

<script src="test.js"></script>
</body>
</html>

so how can i pass value of category insted of reference? – gmaziashvili Oct 31 '18 at 12:58 — gmaziashvili, Oct 31 '18 at 12:58
added an answer instead of comment. – Kaddath Oct 31 '18 at 13:02 — Kaddath, Oct 31 '18 at 13:02

Kaddath · Accepted Answer · 2018-10-31T13:12:41.877

in your code let category is a direct reference to your select HTML element (and not a Javascript object). This reference is pushed into the array. each time you ask for the value, you directly get the value attribute from your select.. so it gets updated each time.

If you want a Javascript object with the value, you have to construct one and give it to your class:

let form = document.getElementById('form');

let category = form.category;

let submit = document.getElementById('formSubmit');

let arr = [];

submit.addEventListener("click",(e)=>{
    e.preventDefault();

    let c = new C({ value: category.value });

    arr.push(c);

    for(let i=0;i<arr.length;i++)
    {
        console.log(arr[i].category.value);
    }
})



class C {
    constructor(category)
    {
        this.category = category;
    }

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>

<form id="form">
    <select name="category">
        <option value="-">choose category</option>
        <option value="a">A</option>
        <option value="b">B</option>
        <option value="c">C</option>
    </select>
    <button id="formSubmit" type="submit">submit</button>

</form>

<script src="test.js"></script>
</body>
</html>

Note that it works because strings in Javascript are passed by value, and object by reference (value of the reference actually). If you had a global category object that you updated the value and pushed into the array, you would have the same problem:

let form = document.getElementById('form');

let category = form.category;

let categoryObj = { value: null };

let submit = document.getElementById('formSubmit');

let arr = [];

submit.addEventListener("click",(e)=>{
    e.preventDefault();
    
    categoryObj.value = category.value;
    let c = new C(categoryObj);

    arr.push(c);
    
    console.log('same problem you had because all items in the array are the same reference to the global object!');
    for(let i=0;i<arr.length;i++)
    {
        console.log(arr[i].category.value);
    }
})



class C {
    constructor(category)
    {
        this.category = category;
    }

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>

<form id="form">
    <select name="category">
        <option value="-">choose category</option>
        <option value="a">A</option>
        <option value="b">B</option>
        <option value="c">C</option>
    </select>
    <button id="formSubmit" type="submit">submit</button>

</form>

<script src="test.js"></script>
</body>
</html>

score 0 · Answer 2 · answered Oct 31 '18 at 13:00

The category object is the same object throughout your program, the user input is just changing it. When you populate an array with objects, they are in fact stored by reference, so what is happening in your code is your array is being populated by the same object. This is why you experience the duplication you described.

If instead, you did e.g. like this:

let arr = [];

submit.addEventListener("click",(e)=>{
    e.preventDefault();

    let c = new C(category);

    arr.push(c.category.value);

    for(let i=0;i<arr.length;i++)
    {
        console.log(arr[i]);
    }
});

then the array is populated by the actual values and you would obtain the result you expect. If you want to store the C instances specifically, you could solve this by e.g. cloning the objects before pushing into the array.

Every object in array is overrided after instantiating and pushing new object

2 Answers2