Why is it, in general, a good idea to leave the global JavaScript scope of a website as-is and never touch it?

JavaScript that is executed in the browser has access to the global scope (the window object). In general it's a good software engineering practice to not pollute the global namespace unless you are working on a feature that truly needs to be global – it is needed by the entire page. Several reasons to avoid touching the global scope:

• Naming conflicts: Sharing the global scope across scripts can cause conflicts and bugs when new global variables or changes are introduced.
• Cluttered global namespace: Keeping the global namespace minimal avoids making the codebase hard to manage and maintain.
• Scope leaks: Unintentional references to global variables in closures or event handlers can cause memory leaks and performance issues.
• Modularity and encapsulation: Good design promotes keeping variables and functions within their specific scopes, enhancing organization, reusability, and maintainability.
• Security concerns: Global variables are accessible by all scripts, including potentially malicious ones, posing security risks, especially if sensitive data is stored there.
• Compatibility and portability: Heavy reliance on global variables reduces code portability and integration ease with other libraries or frameworks.

Follow these best practices to avoid global scope pollution:

• Use local variables: Declare variables within functions or blocks using var, let, or const to limit their scope.
• Pass variables as function parameters: Maintain encapsulation by passing variables as parameters instead of accessing them globally.
• Use immediately invoked function expressions (IIFE): Create new scopes with IIFEs to prevent adding variables to the global scope.
• Use modules: Encapsulate code with module systems to maintain separate scopes and manageability.

<br>

Read the detailed answer on GreatFrontEnd which allows progress tracking, contains more code samples, and useful resources.