Passing a variable by value in Javascript

Question

I've seen lots of similar questions, but feel like I'm still missing something. I have the following code:

_setHotKeys: function(values, buttons){
    var hotKeyMap = {
            target: document, 
            binding:[]
        }; 

        values.forEach(function(value, index){
            if(value.hotkey){
                this.button = buttons[index]; 
                hotKeyMap.binding.push({
                    key: value.hotkey,
                    fn: function(key, event){
                        this._handleFillInValueButtonToggle(this.button, true); 
                    },
                    scope: this 

                }); 
            }

        }, this)    


        var keyMap = new Ext.util.KeyMap(hotKeyMap); 
},

In this function I am trying to set up hotkeys using Ext.js. This code will set up a hotkey for each of the values in the value array, but they all set this.button to the last button in the buttons array. My conclusion is that it is pushing a reference to this.button rather than the value into the array, so as the loop progresses, this value changes. How can I set it to push the value instead of the reference?

How about this._handleFillInValueButtonToggle(buttons[index], true)? — elclanrs
– elclanrs, Commented Jul 22, 2016 at 17:54
@elclanrs that worked! for some reason I thought buttons would have been out of scope — Sara Fuerst
– Sara Fuerst, Commented Jul 22, 2016 at 17:57
@tibsar They are in the same scope, as the function referenced by fn and the buttons array are both inside the scope of your _setHotKeys function. — XCS
– XCS, Commented Jul 22, 2016 at 17:58
@elclanrs ah, that makes sense. If you post an answer, I'll mark it accepted — Sara Fuerst
– Sara Fuerst, Commented Jul 22, 2016 at 17:59

Michael Camden · Accepted Answer · 2016-07-22 18:01:12Z

4

You are on the right track with that conclusion.

For every iteration of the loop, you've assigned this.button to be equal to the button at that index of the loop. If we break this out, it looks like;

this.button = buttons[0]
this.button = buttons[1]
this.button = buttons[2]

And so on until it reaches the end of the loop. Once it reaches the end of the loop this.button is equal to the last button in your array. So naturally when the hotkey event executes, it uses the reference to this.button, which points to the last button in your array.

Instead of assigning the reference to the class property, you should pass the button[index] reference to your handler directly.

...
fn: function(key, event) {
   this._handleFillInValueButtonToggle(button[index], true);
}

answered Jul 22, 2016 at 18:01

Michael Camden

1,2189 silver badges9 bronze badges

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

Collectives™ on Stack Overflow

Passing a variable by value in Javascript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related