CODEWITHSUNDEEP
javascriptscrollscope
Aleksandar Ivanov
Aleksandar Ivanov

Reputation: 317

Avoid declaring variables on scroll?

var variableOne;
var variableTwo;
var variableThree;

function veryInterestingFunction() {

  var variableFour;

  if(a){
    variableFour = 'Good';
  }
  else {
    variableFour = 'Decent';
  }

  console.log(variableFour);

}

$(window).on('scroll', function(){

  veryInterestingFunction();

});

Here I have some variables in the global scope, a function declaring a variable and assigning a value to it, and calling this function on scroll. This way on every scroll you are going to declare the "variableFour" which is not a good practice, right? However I don't want to crowd the global scope with unnecessary variables and also can't use an IIFE. Is there a "best practice" way to declare the variable outside the function and still only possible to use it inside the scope of that function ?

http://jsfiddle.net/2jyddwwx/1/

Upvotes: 2

Views: 233

Answers (3)

Filipe Merker
Filipe Merker

Reputation: 2446

There is no problem in declaring an empty variable into your scope. If it is not global, it belongs to the scope.

And there is no need to fear for performance. If you declare variables within your scope, the Javascript garbage collector will empty that for you. Take a read at this article

Upvotes: 2

Lenar Fattahov
Lenar Fattahov

Reputation: 141

to declare the variable outside the function and still only possible to use it inside the scope of that function ?

I guess, that's impossible

When I don't want to crowd the global scope, I will declare one global object, for example App = {}, and instead of global variables, I use it's properties.

App.variableOne;
App.variableTwo;
App.variableThree;

Or you can use classes in ES6

Upvotes: 2

Vladimir Rovensky
Vladimir Rovensky

Reputation: 4704

I don't think there's anything wrong with your code sample, I seriously doubt variable declaration is ever going to slow down your code. I'd definitely only start to worry about this kind of thing when you're absolutely certain it's causing issues (it won't), otherwise it might be wasted effort.

If you really want to optimize this, one thing you might be able to do is debouncing the veryInterestingFunction calls - that is if you don't necessarily need to respond to every single scroll event (depends on your logic).

As per your question, IIFE/function closure is essentially the only way to limit scope in JavaScript that I know of, so if you can't use that, I don't see any other option.

Upvotes: 2

Related Questions