CODEWITHSUNDEEP
javascriptjqueryscope
BadAtMaths
BadAtMaths

Reputation: 225

Controlling variable scope

I've been able to find a few similar questions but I feel that the answers provided within do not fully expel my confusion.

I have come across this question whilst playing with jQuery, but I guess that this is more of a JS question than jQuery specific.

I feel like in the below example these variables that I wish to define would be good candidates to be global, they have a wide-ranging use outside of a few functions, but I feel that I want to limit the exposure.

$(function() {
    $containers = $('.container');
    $childContainer = $('#childContainer');
    //Removed extra code
    var $aButton = $('#childButton');
    //Removed extra code

    $containers.hide();

    $childContainer.show(400);

    $aButton.on('click', clickChildButton);
    //Removed extra code
};

function clickChildButton() {
    $containers.hide(400);
    $childContainer.show(400);
}

I will have a number of buttons showing/hiding various containers. In all cases the $containers variable will need to be visible to the other functions to allow it to be hidden.

Should I be using global variables (or perhaps a namespacing global object hack) or is there another way that I can limit the scope of the $containers variable?

I'm not too keen on using anonymous functions to handle the click events as they are going to start getting a bit more complex (and contain more than just the two lines shown in the clickChildButton function.

Note: In this particular example it might be better to refactor the code and create a hideContainers function, but I am more interested in how to control the scope of variables in general rather than this particular example.

Thanks

Upvotes: 0

Views: 60

Answers (1)

Amadan
Amadan

Reputation: 198324

In JavaScript (prior to ES6), all variables are function-scoped. Consequently, the only way to scope a variable is to make it local to a function.

You have two basic choices here. One is to make clickChildButton local to $(function(...) {...}), as it is the only place where it is relevant:

$(function() {
  var $containers, $childContainer;

  function clickChildButton() {
    $containers.hide(400);
    $childContainer.show(400);
  }
  ...
});

If you need the scope to actually be wider but not too wide, the other choice is to wrap everything into an IIFE:

(function() {
  $(function() {
    ...
  });
  function clickChildButton() {
    ....
  });
)();

Upvotes: 1

Related Questions