Everyone who has been writing JavaScript for a while is aware of the difference between variables that have a different scope. Variables defined inside a function exist only inside the function and can have the same name as a variable outside the function without interfering with that outside variable (apart from making that variable less accessible from inside the function).
What you may not be aware of is that functions can have a scope as well. The scope of functions works a bit differently though from the way the scope of variables works.
With variables the variable exists even before it is defined (variables are defined using the keyword var) and so if you were to define a variable at the very end of a function all of the references to that variable name within the function will use that local variable rather than using a global variable with the same name.
With functions it is only those that are defined globally that can be referenced before the actual definition of the function. Here is an example of a globally defined function that can be called from anywhere in your code including prior to the definition being reached.
function myFunction(a,b) {...}
We can limit the scope of functions by assigning the function itself to a variable.
var myFunction = function(a,b) {...);
The effect that defining the function this way is that now the function scope only runs where that statement executes through to where myFunction is assigned a different value (or the end of the code execution if it is never assigned a different value). While you can call myFunction() from earlier in the code than the global version of the definition above, you cannot call the function from any earlier in the code than the assignment statement when the second version of the function is used instead.
Note that this does not mean that the variable myFunction doesn't exist prior to that statement being run because the variable does exist throughout the regular scope that any variable defined at that point would have. The variable doesn't point to that function though until that statement is run.
What this means is that we can have mutable functions in JavaScript. We can assign different functions to the same variable at different times so that exactly which function gets run depends on which function was last assigned to the variable.
Of course if you use this JavaScript feature in a careless manner you can end up with code that is a real mess and impossible to debug just because you have no idea as to which function is actually being called when a particular function call in the code is reached unless you can track the entire path that has been followed through the code to get to that point.
This feature does provide great benefits when used correctly though because it can be used to greatly increase the efficiency of your code when used in an appropriate fashion. Probably the most useful way in which mutable functions can be used is with feature sensing where you need to provide multiple ways of doing something depending on which one the browser supports. Rather than placing your test for feature sensing inside the function and running it every time the function is called to decide which path through the function to follow based on what the browser supports, we can instead move the feature testing code outside of the function and assign whichever version of the function contains the code that the current browser supports. That will mean that the feature sensing only needs to be done once at the start of the code and all of the calls to that function from within your code will run whichever version of the function that the feature sensing code assigned to be run. This removes the need to test for which features the browser supports every time you call the function and does it just the once at the start of the code instead
