Javascript array.push() do not add but replace it

Question

I have some checkboxes styled with bootstrapSwitch. I wrote a script that have to add value of checkbox to an array when bootstrapSwitch state is true.

This is my code :

$('input[name^=skill]').on('switchChange.bootstrapSwitch', function (event, state) {

    //alert(state);
    //var s = [];

    var s = new Array();

    if( state === true )
    {
        //var value = $(this).val();
        s.push( $(this).val() );

        console.log(s);//(value)

    }

        console.log(s);//(value)
});

But surprisingly push method replace the value and my s array always have one index.

Would you please let me know why is that?

Thanks in Advance

Define array out of the handler..Or it will be initialized to `[](empty-array)` every time handler is invoked... — Rayon, Apr 18 '16 at 10:06
That's because you're re-creating `s` upon each click. Try to move the declaration of `s` outside of the event callback — haim770, Apr 18 '16 at 10:06

score 6 · Accepted Answer · answered Apr 18 '16 at 10:06

6

var s = new Array();

Define this out of the handler function.

It's always 1 because you're recreating it everytime.

answered Apr 18 '16 at 10:06

Alok Patel

7,842
5
31
47

1

Shame on me... :-)... I'll accept your answer as soon as site let me to do that – Kiyarash Apr 18 '16 at 10:08
It happen sometimes :) Thanks! – Alok Patel Apr 18 '16 at 10:12

score 2 · Answer 2 · answered Apr 18 '16 at 10:08

var s = new Array();// this line should be out side of function. so it will not be new object everytime

so try this

var s = new Array();// this line should be here. so it will not be new object everytime

$('input[name^=skill]').on('switchChange.bootstrapSwitch', function (event, state) {

    //alert(state);
    //var s = [];

    var s = new Array();

    if( state === true )
    {
        //var value = $(this).val();
        s.push( $(this).val() );

        console.log(s);//(value)

    }

        console.log(s);//(value)
});

score 1 · Answer 3 · answered Apr 18 '16 at 10:09

var s = [];

$('input[name^=skill]').on('switchChange.bootstrapSwitch', function (event, state) {

        //alert(state);
        //var s = [];



        if( state === true )
        {
            //var value = $(this).val();
            s.push( $(this).val() );

            console.log(s);//(value)

        }

            console.log(s);//(value)
    });

Just declare the array outside. User [] instead on new Array() as it is faster.

Javascript array.push() do not add but replace it

3 Answers3