CODEWITHSUNDEEP
javascript
Mr. T
Mr. T

Reputation: 366

Is declaring the same variable multiple times a good practice

Here is my javascript code:

(function(){
"use strict";
document.addEventListener("DOMContentLoaded",animations); /*on content loaded */


function animations() {


/*start of animation for the toggle navigation button in smaller view ports*/
(function () { 

    var button = document.getElementById('nav-icon');
    button.addEventListener('click', function(){
        if (this.classList.contains('active')===true) {
            this.classList.remove('active');
        }
        else {
            this.classList.add('active');
        }
    })

})();  /*End of the toggle navigation animation*/

/*Start of  scrolling side navigation for smaller view ports*/

(function(){

        var button = document.getElementById('nav-icon');
        var body = document.querySelector('body');
        button.addEventListener('click', function(){
        if (this.classList.contains('active')===true) {
            body.classList.add('active-nav');
        }
        else {
            body.classList.remove('active-nav');
        }

    });

    })(); /*End of scrolling side navigation*/


(function () {
        // body...
        var media = window.matchMedia("(min-width: 992px)");
        var body = document.querySelector('body');
        var button = document.getElementById('nav-icon');
        window.addEventListener('resize',function(){

            if (media.matches) {

                    body.classList.remove('active-nav');

                    if (button.classList.contains('active')===true) {

                        button.classList.remove('active');
                    }

                }


        });

    })();


};

})();

As you can see I have declared variables that have exactly the same value multiple times in my code, but they are in different functions. each iife is a seperate animation and has a different functionality although they might share common elements. However, I wanted to know if this was a good practice. Should I declare common variables in the main function so they might be in the execution context of all the sub functions? Also, please highlight anything that doesnot look good or is not a good practice. Thank you

Upvotes: 0

Views: 416

Answers (3)

user8086575
user8086575

Reputation:

In JavaScript, var is elevated to the function level, so it is scoped to the function. Since you are using the same variable names in different functions, you are fine, because then they exist in different scopes.

And as @theRemix and @Bergi have pointed out, beyond scoping, if you're variables are representing the same data within each anonymous function, consider refactoring to increase readability and code maintenance.

Upvotes: 0

theRemix
theRemix

Reputation: 2224

As others have said, it's fine because of function scope, however, you should know that it's better practice to move these two lines outside of their iife (to about line 4)

var button = document.getElementById('nav-icon'); 
var body = document.querySelector('body');

So that js only performs the look up once, instead of 3 times. This caches the dom lookup which will improve performance.

Upvotes: 2

Zeokav
Zeokav

Reputation: 1703

Variables last for only the scope they're defined in. So, even if you have variables that get the same value from your DOM, they will only be in memory as long as they're in scope (in this case, as long as your function is executing).
Don't worry about it.

Upvotes: 0

Related Questions