Strategies for Sharing Variables Between Functions in JavaScript Without Global Variables

Introduction

In JavaScript development, global variables are widely considered poor practice due to their potential for naming conflicts, difficulty in tracking state changes, and reduced code maintainability. However, in non-object-oriented programming scenarios, developers often face the challenge of sharing data between multiple functions. Based on actual Q&A data and reference articles, this article systematically analyzes three effective strategies for variable sharing, aiming to provide clear and practical solutions.

Parameter Passing Method

Parameter passing is the most direct and recommended method, involving the transfer of variables as parameters from one function to another to achieve data sharing. This approach adheres to functional programming principles, ensuring function independence and testability.

For example, suppose function A generates a random number, and function B needs to use this number. It can be implemented as follows:

function A() {
    var rand_num = calculate_random_number();
    B(rand_num);
}

function B(r) {
    use_rand_num(r);
}

In this code, rand_num is computed as a local variable in A and then passed to B via the parameter r. This method avoids polluting the global scope, making each function dependent only on its input parameters and enhancing code modularity.

Advantages of parameter passing include reduced side effects and easier understanding and debugging of code; it is suitable for simple data sharing scenarios, such as callback functions or event handling. However, if data needs to be shared among multiple functions that do not directly call each other, parameter passing may lead to long parameter chains, reducing code readability.

Object Property Encapsulation

When multiple functions need to share several variables or states, using object property encapsulation is an effective alternative. By defining a global object (e.g., a namespace) and storing shared variables as its properties, the number of global variables is limited.

Referencing the example from the Q&A data:

var MyApp = {}; // Globally scoped object

function foo() {
    MyApp.color = 'green';
}

function bar() {
    alert(MyApp.color); // Alerts 'green'
}

Here, MyApp serves as a global object, and its property color can be shared between the foo and bar functions. This method is safer than using multiple global variables because it organizes variables under a namespace, reducing the risk of naming conflicts.

Object property encapsulation is applicable in scenarios such as small applications or prototype development, where quick state sharing is a priority, or when integrating with third-party libraries to avoid polluting the global scope. However, overuse may still complicate global state management.

Module Patterns and Message Passing

For more complex applications, module patterns and message passing offer advanced mechanisms for variable sharing. The Lua examples in the reference article demonstrate how to export functions and variables via modules to achieve encapsulation and sharing.

In JavaScript, similar implementation can be achieved using the module pattern:

var myModule = (function() {
    var privateVar = 0; // Private variable
    
    return {
        getPrivateVar: function() {
            return privateVar;
        },
        setPrivateVar: function(value) {
            privateVar = value;
        }
    };
})();

// Using the module
console.log(myModule.getPrivateVar()); // Outputs 0
myModule.setPrivateVar(5);
console.log(myModule.getPrivateVar()); // Outputs 5

This code defines an immediately invoked function that returns an object providing methods to access and modify the private variable. The private variable privateVar cannot be accessed directly from outside, ensuring encapsulation.

Message passing is another method, inspired by the msg.post example in the reference article. In event-driven architectures, functions share data by sending messages, such as using custom events or Promises:

// Simulating message passing
function A() {
    var data = generateData();
    // Trigger a custom event
    var event = new CustomEvent('dataReady', { detail: data });
    document.dispatchEvent(event);
}

document.addEventListener('dataReady', function(event) {
    B(event.detail);
});

function B(data) {
    processData(data);
}

This approach is suitable for asynchronous programming, such as callbacks or event handling, allowing decoupling between functions. Advantages include improved flexibility and scalability of code; disadvantages may involve increased complexity due to additional event handling logic.

Comparative Analysis and Best Practices

Summarizing the above methods, parameter passing is most suitable for simple, direct function calls; object property encapsulation applies to scenarios requiring sharing of multiple variables; module patterns and message passing are ideal for large, modular applications. In practice, the choice of strategy should depend on the application scale, complexity of data flow, and team conventions.

Best practices recommend prioritizing parameter passing to maintain function purity; using object encapsulation when necessary, but limiting the number of global objects; and considering module or event-driven architectures for complex state management. Avoid overusing global variables to enhance code quality and maintainability.

Conclusion

Through parameter passing, object property encapsulation, and module patterns, developers can effectively share variables between functions in non-object-oriented JavaScript without relying on global variables. These strategies not only address data access issues but also promote code modularity and testability. By selecting methods based on specific needs, developers can build more robust applications.