Implementation and Evolution of Default Parameter Values in JavaScript Functions

Basic Concepts of Default Parameter Values in JavaScript

In JavaScript programming, handling default values for function parameters is a common requirement. Unlike languages like PHP that allow direct specification of default parameters in function declarations, JavaScript required logical checks within the function body before ES6 standards.

Traditional Implementation: typeof Checks

Prior to ES6, the most reliable method involved using the typeof operator to check if parameters were undefined:

function func(a, b) {
    if (typeof a === 'undefined') a = 10;
    if (typeof b === 'undefined') b = 20;
    
    console.log("A: " + a + "\nB: " + b);
}

// Test cases
func();        // Output: A: 10 B: 20
func(80);      // Output: A: 80 B: 20
func(100, 200); // Output: A: 100 B: 200

The key advantage of this approach is its ability to accurately distinguish undefined values from other falsy values (such as null, 0, "", etc.), ensuring default values are only used when parameters are genuinely not provided.

Limitations of the Logical OR Operator

Another common but problematic approach uses the logical OR operator:

function problematicFunc(a) {
    a = a || function() {};
    // Additional code
}

The issue with this method is that the logical OR operator applies to all falsy values, including empty strings, 0, null, NaN, etc. If you want these values to be passed normally to the function, using the logical OR operator can lead to unexpected behavior.

ES6 Standard Syntax

Starting from ES6/ES2015, JavaScript natively supports default parameter syntax:

function modernFunc(a = 10, b = 20) {
    console.log("A: " + a + "\nB: " + b);
}

// Test cases
modernFunc();        // Output: A: 10 B: 20
modernFunc(80);      // Output: A: 80 B: 20
modernFunc(100, 200); // Output: A: 100 B: 200

Advanced Features of Default Parameters

ES6 default parameters support more complex expressions and references:

function advancedFunc(a, b = a * 2, c = b + 10) {
    return [a, b, c];
}

console.log(advancedFunc(5)); // Output: [5, 10, 20]

// Combined with destructuring assignment
function destructuredFunc({x = 1, y = 2} = {}) {
    return x + y;
}

console.log(destructuredFunc()); // Output: 3
console.log(destructuredFunc({x: 5})); // Output: 7

Evaluation Timing of Default Parameters

Default parameters are evaluated at function call time, meaning default values are recalculated with each call:

function createArray(value, array = []) {
    array.push(value);
    return array;
}

console.log(createArray(1)); // Output: [1]
console.log(createArray(2)); // Output: [2], not [1, 2]

Scope and Reference Limitations

Default parameters have their own scope, and variable reference restrictions must be considered:

function scopeExample(a, b = () => console.log(a)) {
    var a = 1;
    b();
}

scopeExample();    // Output: undefined
scopeExample(5);   // Output: 5

Practical Application Recommendations

When choosing default parameter implementation methods, consider:

• Prioritize ES6 default parameter syntax in modern projects
• Use typeof checks in scenarios requiring older browser support
• Avoid using logical OR operators for parameters that may contain falsy values
• Be aware of default parameter evaluation timing and scope characteristics

Compatibility Considerations

Although ES6 default parameter syntax has become standard, traditional typeof checks or code transpilation tools like Babel are still necessary when supporting older browser versions.