Default Parameters in ES6 JavaScript

Getting Started

Have you ever written a function with multiple parameters and found yourself constantly passing in the same argument values over and over again? It's a tedious and repetitive task that can quickly become frustrating. Thankfully, ES6 JavaScript has a solution for this - default parameters.

What are Default Parameters in JavaScript?

As mentioned, default parameters allow you to specify a default value for a parameter in a function. If an argument is not passed in during a function call, the default value will be used instead. This can save you time and make your code more concise and readable.

The Syntax

The syntax for declaring default parameters in JavaScript is straightforward. Simply add an equal sign (=) followed by the default value to the parameter in the function declaration.

function greetUser(name = "User") {
  console.log(`Hello, ${name}!`);
}

In this example, the greetUser function has a default parameter of "User" for the name parameter. If a value is not passed in for name during a function call, the default value of "User" will be used.

Parameters vs. Arguments

It's essential to differentiate between parameters and arguments. Parameters are the variables defined in a function's declaration, while arguments are the actual values passed in during a function call.

In other words, parameters are placeholders for the arguments that will be passed in when the function is called. For instance:

function greetUser(name) {
  console.log(`Hello, ${name}!`);
}

greetUser("John"); // Output: Hello, John!

name is the parameter and "John" is the argument. The argument "John" is passed in when the function is called, and it takes the place of the name parameter.

Default Parameters in Functions

Default parameters in JavaScript allow us to specify a default value for function parameters, in case no value is provided when the function is called. This can be especially useful when we want to provide a fallback option for when certain arguments are missing.

Consider the following example:

function calculateRectangleArea(width = 10, height = 20) {
  return width * height;
}

console.log(calculateRectangleArea());
// Output: 200

console.log(calculateRectangleArea(5));
// Output: 100

console.log(calculateRectangleArea(5, 10));
// Output: 50

Data Types and Default Parameters

Default parameters can be different data types in JavaScript, including objects. Let's consider the following example:

function getProduct(options = { category: 'electronics', sortBy: 'price' }) {
  return `Displaying products from the ${options.category} category, sorted by ${options.sortBy}.`;
}

console.log(getProduct());
// Output: Displaying products from the electronics category, sorted by price.

console.log(getProduct({ category: 'books', sortBy: 'rating' }));
// Output: Displaying products from the books category, sorted by rating.

The function getProduct has a default options object. If no argument is passed, it uses this default object. When the function is called, it returns a string indicating the products' category and sorting method, such as "Displaying products from the electronics category, sorted by price."

Now, if a custom options object is passed, it will override the default one. For instance, calling getProduct({ category: 'books', sortBy: 'rating'}) would return "Displaying products from the books category, sorted by rating."

With some actual data and input, this could be very helpful for providing default filters and sorting options in a web application.

Passing undefined

So, what would happen if we pass an undefined value as an argument to a function with a default parameter? Let's find out.

function sum(a = 0, b = 0) {
  return a + b;
}

console.log(sum(undefined, 5)); // 5

In the example above, when we pass undefined as an argument in the function call, the function takes the value of the default parameter.

Final Thoughts

Default parameters provide us with a fallback option for parameters in a function They can be used with different data types, including objects and functions. However, note that default parameters are evaluated at call time, so be mindful of this when using expressions or function calls as default parameter values.

Extra Resources

Play around with some control flow snippets of default function parameters, and feel free to modify them to your liking.