Javascript variable scope problem

Question

I have a mutedUser variable that I would like to store in another function. I am having problems with a variable persisting outside of the click event. What would be the best way to get it so that "return mutedUser" preserves the "muted" append of the string based on the execution conditions of the if statement? Thanks!

* In console.log, I checked where perseverance stops

this.isUserMuted = function isUserMuted(payload) { var mutedUser = ''; // If mute button is clicked place them into muted users list // check for duplicates in list $("#messages-wrapper").off('click', '.message button.muteButton'); $("#messages-wrapper").on('click', '.message button.muteButton', function(e) { $('#unMute').show(); //create userId reference variable var chatUserID = parseInt($(this).parent().parent().attr("data-type")); //store userId in muted user object mutedUsers[chatUserID] = {}; mutedUsers[chatUserID].id = chatUserID; mutedUsers[chatUserID].muted = true; if (mutedUsers[chatUserID] !== null && mutedUsers[chatUserID].id === payload.a) { console.log("user is now muted"); mutedUser += ' muted'; console.log(mutedUser + 1); } console.log(mutedUser + 2); }); return mutedUser; }; 

Answer 1

If I understand what you are trying to do (by looking at the code), this would be a better approach:

 // If mute button is clicked place them into muted users list // check for duplicates in list $("#messages-wrapper").off('click', '.message button.muteButton'); $("#messages-wrapper").on('click', '.message button.muteButton', function(e) { $('#unMute').show(); //create userId reference variable var chatUserID = parseInt($(this).parent().parent().attr("data-type")); //store userId in muted user object mutedUsers[chatUserID] = {}; mutedUsers[chatUserID].id = chatUserID; mutedUsers[chatUserID].muted = true; }); this.isUserMuted = function isUserMuted(payload) { var mutedUser = ''; if (mutedUsers[payload.a] !== null) { mutedUser += ' muted'; } return mutedUser; }; 

The code saves the mutedUsers array, and the isUserMuted function checks to see if the user is provided in this array. In the code you provided, you attach a new event handler each time the isUserMuted function is isUserMuted ..

The isUserMuted function can even be shortened to:

 this.isUserMuted = function isUserMuted(payload) { return mutedUsers[payload.a] !== null ? ' muted' : ''; }; 

Answer 2

Edit

Sorry, my mistake. Another way is to pass this variable, i.e.

 this.isUserMuted = function isUserMuted(payload, isMuted) { isMuted = ''; // If mute button is clicked place them into muted users list // check for duplicates in list $("#messages-wrapper").off('click', '.message button.muteButton'); $("#messages-wrapper").on('click', '.message button.muteButton', function(e) { $('#unMute').show(); //create userId reference variable var chatUserID = parseInt($(this).parent().parent().attr("data-type")); //store userId in muted user object mutedUsers[chatUserID] = {}; mutedUsers[chatUserID].id = chatUserID; mutedUsers[chatUserID].muted = true; if (mutedUsers[chatUserID] !== null && mutedUsers[chatUserID].id === payload.a) { console.log("user is now muted"); isMuted += ' muted'; console.log(mutedUser + 1); } console.log(mutedUser + 2); }); return isMuted; }; 

Answer 3

You can not. If you return a string from a function, it will always be passed by value, i.e. Copied; and this value will not change anymore. You will need to return a function that can access the current value of the local variable or an object with a changing property.

It seems to you that you already have an object, option No. 2 will be fine here:

 function User() { // or whatever you have … var user = this; // If mute button is clicked place them into muted users list // check for duplicates in list $("#messages-wrapper").on('click', '.message button.muteButton', function(e) { $('#unMute').show(); //store userId in muted user object mutedUsers[user.id] = user; user.muted = true; }); this.muted = false; this.isUserMuted = function() { return this.muted ? ' muted' : ''; } }