Breaking Down ES6: Default Parameters
Tags: javascript, beginners, codenewbie, webdev
Published: 2019-07-22 20:45:01

---
title: Breaking Down ES6: Default Parameters
published: true
description: A breakdown of JavaScript default parameters.
tags: JavaScript, Beginners, CodeNewbie, webdev
series: Breaking Down ES6
cover_image: https://thepracticaldev.s3.amazonaws.com/i/fk56tc6l2omxbtxjuk36.png
---

Another week, another installment of my Breaking Down ES6 blog series! This week we will be discussing ES6’s introduction of default parameters, which in my opinion are incredibly useful. When I learned about default parameters during my bootcamp, my first thought was “why didn’t they teach us this sooner!?!” Default parameters are such a simple, yet very powerful feature. 

I am actually pretty excited to write this blog post for y’all, so let’s go ahead and get started!

## Before ES6 

One really important thing to note about function parameters in JavaScript is that they default to `undefined`. In the example to follow, you will notice that when we do not pass a value for `num2` our function `addition()` will return `NaN`. The reason for this is because `undefined` is simply just not a number and cannot be added to the value of `num1`.  

![](https://thepracticaldev.s3.amazonaws.com/i/ejas90zpwurse81uvlk8.png)

#### Working Around Undefined Parameters

Before ES6 and default parameters were introduced, developers had ways to go about working around an undefined parameter. They did this by testing the parameters within the function. There were two popular ways to accomplish this. 

![](https://thepracticaldev.s3.amazonaws.com/i/urnuju4irt5sa4j8r1sn.png)

The example above utilizes a conditional statement to check if the `typeof` the parameter is strictly not equal to `undefined`. If this is the case, the parameter will be set to the value passed to it, which in the first case is 7. Now, if it is `undefined`, like in the second case, the value of `num2` will be set to 1.

Another way developers used to test the parameters within the function was by making use of the truthy/falsy pattern. The example below shows both cases, with and without a value being passed into `num2`.  

![](https://thepracticaldev.s3.amazonaws.com/i/8l5klebez7g2u88miy47.png)

## Introduction of Default Parameters

Fast forward to the introduction of default parameters and we have much cleaner and easier to read code! The example provided below gives you an idea of a simple use case. Default parameters are really easy to use, all you have to do is set the parameter equal to whatever value you’d like to be the default value. 

![](https://thepracticaldev.s3.amazonaws.com/i/fmx4ujwvjvshvl4smrdr.png)

The output of the second case is 5 because `num1` takes the value of 4 and `num2` has the value of 1, thanks to our handy default parameter. 

#### Omitted Values

You may be thinking at this point .. “What happens if you want to make the first parameter a default parameter? What do you do then?” Well, that is what we will be discussing in this section and it is new knowledge for me too. 

When we come across a case where we would like to create a default parameter as our first parameter, or even one of the middle parameters, we need to make use of the keyword `undefined`. When passing in arguments to our function, `undefined` should be used as a placeholder. 

![](https://thepracticaldev.s3.amazonaws.com/i/x6xswuwjrumri0z2nwf4.png)

The example above shows what it would look like to use default parameters in the first parameter slot. The example below shows what it would look like to use a default parameter as one of the middle parameters. 

![](https://thepracticaldev.s3.amazonaws.com/i/g62cqab3rc8deqbxzagq.png)

### Final Thoughts

In this post we’ve discovered the magic of default parameters. We have learned that by using default parameters our code looks cleaner and easier for other developers to understand. Before researching the topic, I thought that you could only use the default parameter as the last parameter. Now we know that as developers we can use `undefined` as a placeholder in our arguments being passed to our function to accomplish this.

I hope that this post has been informative. I know it isn’t a super complex topic, but I learned something new today so I think it was worth writing about! 

Happy coding.

*Note: This week's featured image is from my recent trip to Ireland in March. Location: Ballycotton, Ireland.* 

#### Sources
[Default parameters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters)
[Using Default Parameters in ES6](https://css-tricks.com/using-default-parameters-es6/)
[Clean Code with ES6 Default Parameters & Property Shorthands](https://www.sitepoint.com/es6-default-parameters/)