Exploring ES6 Default Parameters

Default Parameters in ES6

ES6 introduced the ability to set default parameters in functions, allowing you to specify default values for parameters that are undefined when the function is called. This makes functions more robust and reduces the need for additional logic to handle missing arguments.

Example in ES6

Here's how you can use default parameters in ES6:

function greet(name = 'Guest', greeting = 'Hello') {
  console.log(`${greeting}, ${name}!`);
}

greet(); // Output: Hello, Guest!
greet('Alice'); // Output: Hello, Alice!
greet('Bob', 'Hi'); // Output: Hi, Bob!

Achieving the Same in ES5

In ES5, you need to use additional logic inside the function to provide default values for parameters:

function greet(name, greeting) {
  name = (typeof name !== 'undefined') ? name : 'Guest';
  greeting = (typeof greeting !== 'undefined') ? greeting : 'Hello';
  console.log(greeting + ', ' + name + '!');
}

greet(); // Output: Hello, Guest!
greet('Alice'); // Output: Hello, Alice!
greet('Bob', 'Hi'); // Output: Hi, Bob!

Using Previous Parameters in Default Parameters

In ES6, you can use previous parameters as defaults for subsequent parameters:

function introduce(name = 'Guest', age = 30, introduction = `${name} is ${age} years old`) {
  console.log(introduction);
}

introduce(); // Output: Guest is 30 years old
introduce('Alice', 25); // Output: Alice is 25 years old
introduce('Bob', 40, 'Bob is 40 and awesome'); // Output: Bob is 40 and awesome

Lazy Evaluation of Default Parameters

Default parameters in ES6 are evaluated lazily, meaning they are only evaluated if they are actually needed. This allows for default parameters to be based on complex expressions or function calls that will not execute unless the parameter is undefined.

let counter = 0;

function increment(value = counter++) {
  console.log(value);
}

increment(); // Output: 0
increment(); // Output: 1
increment(5); // Output: 5
increment(); // Output: 2

Default Parameters and the arguments Object

The arguments object in a function with default parameters reflects the arguments passed to the function, not the default values. However, the parameters themselves will hold the default values if no argument is provided.

function logArgs(a = 1, b = 2) {
  console.log(a, b); // Output the parameters
  console.log(arguments); // Output the arguments object
}

logArgs(); // Output: 1 2, [Arguments] {}
logArgs(3); // Output: 3 2, [Arguments] { '0': 3 }
logArgs(3, 4); // Output: 3 4, [Arguments] { '0': 3, '1': 4 }

In the example above, you can see that the arguments object only contains the values that were actually passed to the function, not the default values.

Summary

• Default Parameters in ES6: Simplify function definitions by allowing default values for parameters.

• ES5 Equivalent: Requires manual checks and assignments within the function body.

• Using Previous Parameters: ES6 allows the use of previous parameters as defaults for subsequent ones.

• Lazy Evaluation: Default parameters are evaluated only if needed.

• arguments Object: Reflects only the passed arguments, not the default values.

These features make functions more flexible and reduce boilerplate code, allowing for cleaner and more maintainable code.