JavaScript has different scopes by which a variable can be accessed. In ECMAScript 5, there are two scopes. Globally scoped variables can be read and mutated from any script in the browser, not just the current function. Locally scoped variables can only be accessed from the function in which they were defined.
Global variables should be avoided in most cases. Globally scoped variables make programs more difficult to test, more difficult for other developers to understand, and cause unintended side effects. When a functions uses a global variable instead of a parameter, it is more difficult to create reproducible results. A program with lots of global variables is more difficult for other programmers to reason about because it's not obvious what functions are using a given variable. This increases the difficulty in maintaining the software and adding new features. One function may modify a global variable and have an unintended side effect on another function.
JavaScript’s strict mode prevents global variables from being created in function bodies. This feature prevents the accidental creation of global variables when local variable assignment is intended. Adding ‘use strict’ (with the single quotes and following with a semicolon) to the top of all JavaScript source files is recommended in the majority of cases. The cases where it’s desirable to not use strict mode is when using third party libraries like JQuery. JQuery makes use of a global variable named “$”.
Side effects can happen from the unintended interactions of global variables in functions. When two or more functions are using the same global variable, mutations of the variable can have undesirable and unintended behavior. If a function is created to make use of a global variable, it’s behavior can be changed by any other function which changes the value of the global. These unexpected changes can make reproducing results difficult.
In a pure function, global variables are not used. Instead, variables are passed to the function. This makes testing easier by allowing for the creation of a function that always has the same output given the same set of inputs. In this way, test cases can be written so that the expected results can be tested against the actual results using the same set of inputs. Each test run should produce the same results.
Variable hoisting is the process by which JavaScript interprets variable and function declarations. JavaScript source files are scanned for all occurrences of variable and function declarations, which are then moved to the top. Variables are given the initial value, “undefined”. This has the effect of allowing code to make use of a variable or function that is declared further down in the source code.