Minimizing the use of Global Variables in Javascript.

How JavaScript manage scopes?

In the JavaScript language there are two types of scopes:

• Global Scope

• Local Scope

JavaScript uses functions to manage scope. A variable defined inside a function is in the local scope and not available outside the function. While a variable defined outside of a function is in the global scope. Each function when invoked creates a new scope.

What is the problem with global variables?

Global variables are easily overwritten by other scripts. For example, when two separate parts of an application define global variables with the same name but with different purposes.

It’s also common for web pages to include code not written by the developers of the page, for example.

• A third-party JavaScript library.

• Code from a third-party user tracking and analytics script.

• Scripts from an advertising partner.

Global scopes can be slow, because each time a function executes, it causes a temporary calling scope to be created. JavaScript searches for the first item in the scope chain, and if it doesn’t find the variable, it swells up the chain until it hits the global object.

Global variables can also lead to security flaws. Functions can be invoked through the browser when they’re defined in the global space — if the wrong person tampers with those functions, they might find a way to penetrate the site. Think back to Stripe — if the site relied on global functions for handling financial transactions, anyone using this would be taking a risk.

How to avoid global variables then?

Method - 1:

Consider the following example. The result is used without being declared. It can be a source of problems.

function multiply(a, b) {
    //anti-pattern: implied a global variable    
    result = a * b
    return result
}

The rule of thumb is to always declare variables with let.

function multiply(x, y) {
    let result = x * y
    return result
}

Method - 2:

Another example that creates implied globals is chain assignments as part of a let declaration. In the following example, a is local but b becomes global.

function Equate() {
    //anti-pattern: don't use 
    let a = b = 0
    ...
}

Rewriting like the following codes. Both a and b are local.

function Equate() {
    var a, b
    a = b = 0
    ...
}

Method - 3:

Properties can be deleted with the delete operator whereas variables cannot.

Note: Keep in mind that properties can be deleted with the delete operator whereas variables cannot.

Globals created with var cannot be deleted.

var x = 10
delete x
<< false

Implied globals created without var can be deleted regardless, if created inside functions.

x = 10
delete x
<< true

function check() {
    y= 20
}
delete y
<< true

Method - 4:

You use a variable and then you declare it further in the function. Take a look at this example.

x = "global" // global variable
function doSomething() {    console.log(x) // undefined
    var x = "local"
    console.log(x) // local
}
doSomething()
console.log(x)
<< undefined
<< local
<< global

The above code snippet is like the following. The x variable is declared at the top of the function but the value of x is still set at the current position.

x = "global" // global variable
function doSomething() {
    var x
    console.log(x) // undefined
    x = "local
    console.log(x) // local
}
doeSomething()
console.log(x)
<< undefined
<< local
<< global

Thanks for reading. Happy coding :)