The Scope of Variables in JavaScript

Use strict mode
The “use strict” directive changes code into the mode that adheres to the up-to-date standard. It looks like the line “use strict” or ‘use strict’ and is placed at the beginning of the script:

"use strict";
// code JavaScript

1 2	"use strict"; // code JavaScript

Besides, the directive is used in functions. In such cases, a strict mode can be executed in function scope. The action “use strict” can’t be possibly canceled. It’s not supported by versions IE9 and older.

Variable visibility
Declaration of variables is processed before script running. Whenever declaration is, it implies that a variable was declared at the beginning of the code, so a variable gets accessible before being declared. So it is called “variable visibility”.

For example:

var i = 1;
function Test(){
console.log(i); // undefined , You could think the first one would be visible, but it is not true!
var i;
i = 2;
}
Test();

// in fact, it should be like this: 

var i = 1;
function Test(){
var i;
console.log(i);  // undefined
i = 2;
}
Test();

var i = 1;

function Test(){

console.log(i); // undefined , You could think the first one would be visible, but it is not true!

var i;

i = 2;

}

Test();

// in fact, it should be like this:

var i = 1;

function Test(){

var i;

console.log(i); // undefined

i = 2;

}

Test();

– global
Magento 1.9

var param = false; /*a global variable is declared */
console.log(window.param); // false
var dropdown = function() {
   var ele = document.getElementById("nav").getElementsByTagName("LI");
}

var param = false; /*a global variable is declared */

console.log(window.param); // false

var dropdown = function() {

var ele = document.getElementById("nav").getElementsByTagName("LI");

}

Magento 2.1.5

var param = true; /*a global variable is declared*/
var bindElements =function (){
       var elements = Form.getElements(this.form);
            /*a local variable is declared*/
   }

var param = true; /*a global variable is declared*/

var bindElements =function (){

var elements = Form.getElements(this.form);

/*a local variable is declared*/

}

– local
Magento 1.9

Partner With Us Let's discuss how to grow your business. Get a Free Quote.

Talk to Vlad

var dropdown = function() {
   var elem = document.getElementById("nav").getElementsByTagName("LI");
            /*a local variable is declared*/
}
console.log(elem) // undefined ; a variable declared inside the function is inaccessible outside.

var dropdown = function() {

var elem = document.getElementById("nav").getElementsByTagName("LI");

/*a local variable is declared*/

}

console.log(elem) // undefined ; a variable declared inside the function is inaccessible outside.

Magento 2.1.5

var bindElements = function (){
       var elements = Form.getElements(this.form);
            /*a local variable is declared*/
   }

var bindElements = function (){

var elements = Form.getElements(this.form);

/*a local variable is declared*/

}

If a variable is declared outside a function, it has a global scope and is accessible for any function.
If a variable is assigned a value, but not declared, it has a global scope.
If a variable is declared in a function body, it has a local scope and is accessible only inside a function body.

Memory Leaks
A memory leak is a memory that is no longer required by an application, but due to some reasons, it is not returned. JavaScript has its own built-in “garbage collector”.

There are 3 common memory leaks:

Accidental global variables

For example,

function f(arg) {
   str = "Line";
}
In fact, it is like this:
function f(arg) {
   window.str = "Line";
}

function f(arg) {

str = "Line";

}

In fact, it is like this:

function f(arg) {

window.str = "Line";

}

In this case, the line is the reason for the leak. It is possible to avoid such mistakes by applying the ”use strict” directive at the beginning of JS files. The directive prevents from accidental global variables appearance, as this enables a strict mode of parsing JavaScript.

The example of increased memory consumption relating to global variables is cache. Cache stores data that is repeatedly used. It is necessary to limit them in size. If you do not do this, it can lead to increased memory consumption.

Forgotten timers and callbacks

var data = getData();
setInterval(function() {
   var node = document.getElementById('Element');
   if(node) {
       node.innerHTML = JSON.stringify(data ));
   }
}, 1000);

var data = getData();

setInterval(function() {

var node = document.getElementById('Element');

if(node) {

node.innerHTML = JSON.stringify(data ));

}

}, 1000);

Let’s consider why dangling timers are harmful. While setInterval is enabled, a handler is active as well, so it can’t be cleaned by “garbage collector”, because it is necessary to stop interval and, as a result, dependencies can’t be collected.

Out of DOM references

var elements = {
   button: document.getElementById('button'),
   image: document.getElementById('image'),
   text: document.getElementById('text')
};
function doStuff() {
   elements.image.src = 'http://some.url/image.jpg';
   elements.button.click();
}
function removeButton() {
   // Button is in body.
   document.body.removeChild(document.getElementById('button'));
}

var elements = {

button: document.getElementById('button'),

image: document.getElementById('image'),

text: document.getElementById('text')

};

function doStuff() {

elements.image.src = 'http://some.url/image.jpg';

elements.button.click();

}

function removeButton() {

// Button is in body.

document.body.removeChild(document.getElementById('button'));

}

In this case, we make reference to #button in global objects of elements. The button is still in memory and can’t be collected by “garbage collector”.

Partner With Us Looking for a partner that will help you to grow your business? We are the right company to develop your webstore. Feel free to get in touch with us. We will be happy to discuss your business opportunities and provide you with a Free Quote. Talk to Vlad

Tags: