How Can We Avoid Global Namespace Pollution in JavaScript?

Deciphering Global Namespace Pollution

Global namespace pollution occurs when excessive global variables are declared, potentially leading to conflicts and reduced code readability.

Impact on Garbage Collection

Global variables persist until the global namespace loses scope, making them ineligible for garbage collection. This can lead to memory leaks and performance issues, especially with large data sets.

Abusing the Global Namespace

Creating multiple global variables is considered abusive behavior. It can result in naming collisions, overwriting, and confusion.

Example: Bad Practice

var x1 = 5;
var x2 = 20;
var y1 = 3;
var y2 = 16;

var rise = y2 - y1;
var run = x2 - x1;

var slope = rise / run;

var risesquared = rise * rise;
var runsquared = run * run;

var distancesquared = risesquared + runsquared;

var distance = Math.sqrt(dinstancesquared);

This creates 11 global variables that can potentially interfere with other global variables.

Resourceful Approach

The module pattern provides a better solution by encapsulating variables and methods within a single global object. This prevents other code from accessing or modifying the encapsulated variables, protecting the global namespace.

Example: Improved Approach

var Calculate = function () {
  // Local variables
  var Coordinates = [];
  var Coordinate = function (xcoord, ycoord) {
    this.x = xcoord;
    this.y = ycoord;
  };

  return {
    // Exposed methods
    AddCoordinate: function (x, y) {
      Coordinates.push(new Coordinate(x, y));
    },

    Slope: function () {
      var c1 = Coordinates[0];
      var c2 = Coordinates[1];
      return (c2.y - c1.y) / (c2.x - c1.x);
    },

    Distance: function () {
      // Local calculations
      var c1 = Coordinates[0];
      var c2 = Coordinates[1];

      var rise = c2.y - c1.y;
      var run = c2.x - c1.x;

      var risesquared = rise * rise;
      var runsquared = run * run;

      var distancesquared = risesquared + runsquared;

      var distance = Math.sqrt(distancesquared);

      return distance;
    }
  };
};

// Self-executing closure
(function () {
  var calc = Calculate();
  calc.AddCoordinate(5, 20);
  calc.AddCoordinate(3, 16);
  console.log(calc.Slope());
  console.log(calc.Distance());
})();

This approach reduces global pollution by limiting access to variables and methods within the Calculate object.

The above is the detailed content of How Can We Avoid Global Namespace Pollution in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!