A Complete Guide - JavaScript ES6 Default Parameters and Rest Operator

JavaScript ES6 Default Parameters

What Are Default Parameters?

Default parameters allow you to set a default value for function parameters in case the caller does not provide a value.

Step-by-Step Example

1. Basic Function with Default Parameters

   function greetUser(name = 'Guest') {
     return `Hello, ${name}!`;
   }
   
   console.log(greetUser());        // Output: Hello, Guest!
   console.log(greetUser('Alice'));  // Output: Hello, Alice!
   

   • Explanation:
     • The function greetUser has a parameter name with a default value of 'Guest'.
     • If no argument is passed (greetUser()), name defaults to 'Guest'.
     • If an argument is passed (greetUser('Alice')), name uses the provided value.

2. Multiple Default Parameters

   function calculateArea(width = 10, height = 20) {
     return `The area is ${width * height} square units.`;
   }
   
   console.log(calculateArea());            // Output: The area is 200 square units.
   console.log(calculateArea(15));           // Output: The area is 300 square units.
   console.log(calculateArea(15, 5));        // Output: The area is 75 square units.
   

   • Explanation:
     • The function calculateArea has two parameters with default values.
     • If no arguments are provided, both width and height use their default values.
     • If one argument is provided, width uses the provided value, and height defaults to 20.
     • If both arguments are provided, both width and height use the provided values.

3. Default Parameters with Complex Expressions

   function createUser(user = { name: 'Guest', age: 25 }) {
     return `User: ${user.name}, Age: ${user.age}`;
   }
   
   console.log(createUser());                        // Output: User: Guest, Age: 25
   console.log(createUser({ name: 'Bob', age: 30 }));   // Output: User: Bob, Age: 30
   console.log(createUser({ age: 28 }));               // Output: User: undefined, Age: 28
   

   • Explanation:
     • The function createUser has a default parameter user set to an object.
     • If no argument is provided, the default object { name: 'Guest', age: 25 } is used.
     • If an object is provided, the function uses the properties of the provided object.
     • If a partial object is provided (e.g., { age: 28 }), only the provided properties are used, and the default properties are not merged.

JavaScript ES6 Rest Operator

What Is the Rest Operator?

The rest operator (...) allows you to represent an indefinite number of arguments as an array. It is useful when you have a variable number of arguments.

Step-by-Step Example

1. Basic Function Using the Rest Operator

   function sum(...numbers) {
     return numbers.reduce((total, num) => total + num, 0);
   }
   
   console.log(sum(2, 3));           // Output: 5
   console.log(sum(4, 5, 6));        // Output: 15
   console.log(sum(1, 2, 3, 4, 5));  // Output: 15
   

   • Explanation:
     • The function sum uses the rest operator (...numbers) to collect all passed arguments into an array.
     • The reduce method is then used to calculate the sum of the numbers in the array.

2. Combining Required and Rest Parameters

   function concatenateStrings(separator, ...strings) {
     return strings.join(separator);
   }
   
   console.log(concatenateStrings(', ', 'one', 'two', 'three'));  // Output: "one, two, three"
   console.log(concatenateStrings(' - ', 'red', 'green', 'blue')); // Output: "red - green - blue"
   

   • Explanation:
     • The function concatenateStrings has a required parameter separator and a rest parameter strings.
     • The join method is used to concatenate the strings in the strings array, with the specified separator.

3. Using the Rest Operator in Object Destructuring

   const user = { name: 'Charlie', age: 35, country: 'USA', occupation: 'Engineer' };
   
   const { name, age, ...rest } = user;
   
   console.log(name);       // Output: Charlie
   console.log(age);        // Output: 35
   console.log(rest);       // Output: { country: 'USA', occupation: 'Engineer' }
   

   • Explanation:
     • Object destructuring is used to extract name and age from the user object.
     • The rest of the properties (not explicitly listed) are collected into the rest object.

4. Using the Rest Operator in Array Destructuring

   const numbers = [1, 2, 3, 4, 5];
   
   const [first, second, ...others] = numbers;
   
   console.log(first);   // Output: 1
   console.log(second);  // Output: 2
   console.log(others);  // Output: [3, 4, 5]
   

   • Explanation:
     • Array destructuring is used to extract the first two elements (first and second) from the numbers array.
     • The rest of the elements are collected into the others array.

Combining Default Parameters and the Rest Operator

Example

Let's create a function that displays the name of a user and a list of their favorite books, with a default message and default books list.

function displayUserDetails(name = 'Guest', ...books) {
  if (books.length === 0) {
    books = ['No books listed'];
  }
  return `User: ${name}, Favorite Books: ${books.join(', ')}`;
}

console.log(displayUserDetails());                                      // Output: User: Guest, Favorite Books: No books listed
console.log(displayUserDetails('Eve'));                                 // Output: User: Eve, Favorite Books: No books listed
console.log(displayUserDetails('Eve', '1984', 'To Kill a Mockingbird')); // Output: User: Eve, Favorite Books: 1984, To Kill a Mockingbird

• Explanation:
  • The function displayUserDetails has a default parameter name and a rest parameter books.
  • If no books are provided, a default message 'No books listed' is used.
  • The user's name and favorite books are displayed as a concatenated string.

Summary

• Default Parameters:

  • Allow setting default values for function parameters.
  • Enhance code readability and reduce need for conditional checks.

• Rest Operator:

  • Collects multiple arguments into an array.
  • Useful for functions with a variable number of arguments.
  • Can be used in both function parameters and destructuring.