What is the purpose of wrapping whole JavaScript files in anonymous functions?

The purpose of wrapping JavaScript files in anonymous functions is to create a namespace and control the visibility of member functions. It wraps the code inside a function scope and decreases clashing with other libraries. This is what we call Immediately Invoked Function Expression (IIFE) or Self Executing Anonymous Function.

Syntax

Here's the basic IIFE syntax:

(function() {
   // code
})();

As you can see above, the first pair of parentheses converts the code inside into an expression. The second pair of parentheses immediately calls the function that resulted from the expression.

How It Works

Without parentheses, a function declaration cannot be immediately invoked. The parentheses force JavaScript to treat it as an expression:

// This would cause a syntax error:
// function() { console.log("Hello"); }();

// IIFE syntax works:
(function() {
    console.log("IIFE executed!");
})();

IIFE executed!

Benefits of Using IIFE

Avoiding Global Pollution

// Without IIFE - variables become global
var userName = "John";
var userAge = 25;

console.log("Global variables created");

// With IIFE - variables stay private
(function() {
    var userName = "Jane";
    var userAge = 30;
    console.log("Private variables:", userName, userAge);
})();

// userName and userAge from IIFE are not accessible here
console.log("Global userName still:", userName);

Global variables created
Private variables: Jane 30
Global userName still: John

Preventing Library Conflicts

// Library 1
(function() {
    var helper = function() {
        return "Helper from Library 1";
    };
    console.log(helper());
})();

// Library 2 - same function name, no conflict
(function() {
    var helper = function() {
        return "Helper from Library 2";
    };
    console.log(helper());
})();

Helper from Library 1
Helper from Library 2

IIFE with Parameters

You can pass parameters to an IIFE for external dependencies:

var globalVar = "I'm global";

(function(external) {
    var internal = "I'm private";
    console.log("External:", external);
    console.log("Internal:", internal);
})(globalVar);

External: I'm global
Internal: I'm private

Common Use Cases

Conclusion

IIFE is essential for creating isolated scopes in JavaScript, preventing global namespace pollution and library conflicts. It's a fundamental pattern for writing clean, modular JavaScript code.