What strategies can be implemented to steer clear of utilizing global variables?

Question

What strategies can be implemented to steer clear of utilizing global variables?

I have been advised against using global variables.

One of them is used to toggle client-side validation on and off.

The other two are used to control my drop-down menu.

If these shouldn't be global variables, where should I store them?

/* Global */

var enableValidation = 1,  // used to toggle client-side validation
    menuTimer = 0,
    menuElement = 0;
window.onload = initialize;

/*menu*/

function topMouseOver(id)
{
  resetMenu();
  if (menuElement) menuElement.style.visibility = 'hidden';
  menuElement = document.getElementById(id);
  menuElement.style.visibility = 'visible';
}
function internalTime()
{
  if (menuElement) menuElement.style.visibility = 'hidden';
}
function mouseOut()
{
  menuTimer = window.setTimeout(internalTime, 500);
}
function resetMenu()
{
  if (menuTimer)
  {
    window.clearTimeout(menuTimer);
    menuTimer = 0;
  }
}


Header 1  // This makes more sense
Content

Header 1  // Than this
Content

javascript

Answer 1

Answer №1

It seems like those variables could be suitable candidates for globals. Globals are typically reserved for tasks that impact the broader functionality of an application, such as controlling fundamental behaviors across multiple components.

If you'd like to create a "namespace" for them, you can do so easily:

var globalControls = {
    client_validation:1,
    menu_timer:0,
    menu_elment:0,
    window_onload:i0
};

Javascript currently doesn't have true namespaces. Objects serve as a workaround until a future version of ECMAScript potentially introduces this feature.

Answer 2

It seems like those variables could be suitable candidates for globals. Globals are typically reserved for tasks that impact the broader functionality of an application, such as controlling fundamental behaviors across multiple components.

If you'd like to create a "namespace" for them, you can do so easily:

var globalControls = {
    client_validation:1,
    menu_timer:0,
    menu_elment:0,
    window_onload:i0
};

Javascript currently doesn't have true namespaces. Objects serve as a workaround until a future version of ECMAScript potentially introduces this feature.

Answer 3

Answer №2

Check out this informative piece on the concept of javascript namespaces.

Answer 4

Check out this informative piece on the concept of javascript namespaces.

Answer 5

Answer №3

The topic at hand pertains to steering clear of global variables, although the title given is not quite accurate.

A way to accomplish this is by creating an object and setting properties within it. By doing so, the variables will be confined within the object's scope and won't clutter up the global scope.

For instance:

var settings = {
    enableNotifications: true,
    todoList: [],
    currentTask: '',
    someMethod: function () {
        // console.log(this.enableNotifications); //"this" refers to the object context
    }
};
// You can then access these properties like so:
console.log(settings.enableNotifications); // true

Answer 6

The topic at hand pertains to steering clear of global variables, although the title given is not quite accurate.

A way to accomplish this is by creating an object and setting properties within it. By doing so, the variables will be confined within the object's scope and won't clutter up the global scope.

For instance:

var settings = {
    enableNotifications: true,
    todoList: [],
    currentTask: '',
    someMethod: function () {
        // console.log(this.enableNotifications); //"this" refers to the object context
    }
};
// You can then access these properties like so:
console.log(settings.enableNotifications); // true

Answer 7

Answer №4

Utilizing namespacing effectively separates class definitions to avoid collisions, though it doesn't completely resolve the issue of global variables. It serves as a temporary solution.

To address global variables more comprehensively, one can employ a class instance that encapsulates properties which would otherwise be global. Encapsulation stands as a foundational concept in object-oriented programming.

For an illustration of a class with a namespace containing encapsulated properties, refer to the provided link. Moreover, a custom jQuery plugin utilizing this class is demonstrated.

In situations where persistent data traditionally necessitates a global variable, I opt for using http://api.jquery.com/jQuery.data/ to associate the data in object form to the DOM element and efficiently access it.

Answer 8

Utilizing namespacing effectively separates class definitions to avoid collisions, though it doesn't completely resolve the issue of global variables. It serves as a temporary solution.

To address global variables more comprehensively, one can employ a class instance that encapsulates properties which would otherwise be global. Encapsulation stands as a foundational concept in object-oriented programming.

For an illustration of a class with a namespace containing encapsulated properties, refer to the provided link. Moreover, a custom jQuery plugin utilizing this class is demonstrated.

In situations where persistent data traditionally necessitates a global variable, I opt for using http://api.jquery.com/jQuery.data/ to associate the data in object form to the DOM element and efficiently access it.

What strategies can be implemented to steer clear of utilizing global variables?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Is there a way to easily open the RSS link XML Element in a separate browser tab or window?

The component fails to display on the page when using Vue-router

Guide on including a JavaScript file in HTML during execution on Node.js

Tips for transferring information from a controller to a directive in AngularJS using AJAX requests

Ways to retrieve information from a specific key

Vertical alignment of buttons in Cordova App Rate

Parsing JSON data using a regular expression

Error in test runner: Cannot convert type 'Cucumber' to type '? extends Runner' in Java cucumber

Angular 6 is experiencing an issue with the functionality of the file toggle JS

Encode JavaScript field without affecting the appearance

What is the best way to identify a particular subtype of HTMLElement based on its tag name and then save that element within another one?

Requesting data download via AJAX for a CSV file

What exactly are AngularJS module dependencies and how do they work together?

Transition property in CSS not functioning properly

Is there a way to restore a previous version of package-lock.json?

Searching for a specific value in a dropdown list during an iteration

Is it possible to retrieve the content that has been copied to a user's clipboard and then paste it into the console using javascript?

Handle clicking on a mesh

Utilizing Angular and Cordova within a Virtual Directory

Implementing long polling for private messaging in PHP's chat functionality