Default Parameters in JavaScript: A Guide

Today, we're going to talk about one of the newer features of JavaScript that was introduced in ES6: default parameters. Default parameters are a way to specify default values for function parameters when they are otherwise not passed into the function or are passed in with the value of undefined.

Before ES6, developers had to use a variety of workarounds to mimic default parameters, such as checking if the parameter was undefined and then setting it to a default value if it was. However, with the introduction of default parameters, this process has become much simpler and more streamlined.

Let's take a look at some examples to see how default parameters work.

const greet = (name = 'world') => {  console.log(`Hello, ${name}!`);};greet();  //=> "Hello, world!"greet('Maddie');  //=> "Hello, Maddie!"

In the above example, we define a function called greet which accepts one parameter: name. We set the default value of name to be "world". This now means that if we call greet without passing in a value for name, the function will use the default value of "world". If we call greet and pass in a value for name, then the function will use that value instead.

Here's another example:

const multiply = (a, b = 2) => {  return a * b;};multiply(3);  //=> 6multiply(3, 4);  //=> 12

Here we've defined a function called multiply which takes two parameters: a and b. We set the default value of b to be 2. If we call multiply and only pass in a value for a, the function will use the default value of 2 for b. However, if we call multiply and pass in values for both a and b, the function will use those values instead.

It's worth reiterating here that default parameters are only applied to parameters where they haven't otherwise been passed into the function or are passed in with the value of undefined. If a parameter is passed in with any other value, that value will be used instead of the default value.

To illustrate this, let's revisit the simple greet example from above:

const greet = (name = 'world') => {  console.log(`Hello, ${name}!`);};greet(null);  //=> "Hello, null!"greet(undefined);  //=> "Hello, world!"greet('Sophie');  //=> "Hello, Sophie!"

Here we call the greet function with the value of null. Since null does not have the same value as undefined (I've written about this in more detail here), it will use the value null, outputting "Hello, null!". However, if we call greet with the value of undefined, the function will revert to using the default value of "world".

Default parameters are a simple but powerful addition to the JavaScript language. They make our code cleaner and more readable, and they save us from having to write unnecessary code to handle default values. So, next time you're writing a function that could benefit from default parameters, give them a try! Your code (and your fellow developers) will thank you.

It should be said that I've really only scratched the surface of how default parameters can be used here. I go into even more detail (and with more complex examples) in my follow‑up article: Default Parameters in JavaScript in More Depth.