Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for Breaking Down ES6: Default Parameters
Tori Crawford
Tori Crawford

Posted on

     

Breaking Down ES6: Default Parameters

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 toundefined. In the example to follow, you will notice that when we do not pass a value fornum2 our functionaddition() will returnNaN. The reason for this is becauseundefined is simply just not a number and cannot be added to the value ofnum1.

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.

The example above utilizes a conditional statement to check if thetypeof the parameter is strictly not equal toundefined. 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 isundefined, like in the second case, the value ofnum2 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 intonum2.

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.

The output of the second case is 5 becausenum1 takes the value of 4 andnum2 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 keywordundefined. When passing in arguments to our function,undefined should be used as a placeholder.

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.

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 useundefined 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
Using Default Parameters in ES6
Clean Code with ES6 Default Parameters & Property Shorthands

Top comments(10)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
codingsam profile image
Coding Sam
I love to code and teach about it.Full time developer, part-time blogger
  • Location
    Lisbon
  • Education
    Instituto Superior Técnico
  • Work
    Full stack developer at Practio
  • Joined
• Edited on• Edited

It really is a great feature.
But be carefull because, the default values only work forundefined. If those functions receivenull as values for some arguments with default values, they will be kept asnull.
I got caught by this so many times :)

CollapseExpand
 
torianne02 profile image
Tori Crawford
A software engineer who loves learning and sharing knowledge.
  • Location
    Boise, ID
  • Education
    M.S.
  • Pronouns
    she/her
  • Work
    Full Stack Software Engineer - Looking for Next Role
  • Joined

Thank you so much for adding this little tidbit! I didn't think to make note of it. :)

CollapseExpand
 
codingsam profile image
Coding Sam
I love to code and teach about it.Full time developer, part-time blogger
  • Location
    Lisbon
  • Education
    Instituto Superior Técnico
  • Work
    Full stack developer at Practio
  • Joined

A lot of developers, specially beginners can get tricked by this small detail. :)

CollapseExpand
 
aleksikauppila profile image
Aleksi Kauppila
If it ain't broken, break it
  • Location
    Finland
  • Joined

Hi Victoria, thanks for posting!

I don’t think default arguments are a good feature. Using default arguments is at least not a good practice and will produce bad designs.

  • There will be multiple ways to call a function
  • Default values will have implicit meaning that have to be explained with documentation or comments
  • it will become tempting to add more arguments with a default value to a function, which will require more conditional logic leading to a lot of complexity

Any thoughts? Thanks!

CollapseExpand
 
torianne02 profile image
Tori Crawford
A software engineer who loves learning and sharing knowledge.
  • Location
    Boise, ID
  • Education
    M.S.
  • Pronouns
    she/her
  • Work
    Full Stack Software Engineer - Looking for Next Role
  • Joined

I definitely understand all of the points you are bringing up. Before jumping into each point, I just want to mention that I am a junior dev learning as I write. I began this series specifically to become more acquainted to the tools introduced by ES6 as that seems to be the popular version on most job descriptions.

Now, as to my thoughts about default parameters...I do think that implementing them in live code could definitely make things messy when trying to make sure arguments are being passed into the function properly. Having to keep in mind the specific order is not entirely easy, and yes, could require more comments and documentation.

As for your last point, I think that really falls on the developer. Being tempted to add more arguments to a function is all preference and self control.

With all that being said, I just learned about using the object spreader (introduced in ES8) for this purpose and it seems like a great tool to use!! Take a look at this article as it may interest you!

Thank you so much for adding to the discussion. :)

CollapseExpand
 
aleksikauppila profile image
Aleksi Kauppila
If it ain't broken, break it
  • Location
    Finland
  • Joined

That’s cool, we’re all learning every day :) thanks for the link, i’ll check it out. 👍

CollapseExpand
 
rammyblog profile image
Onasanya Tunde
Addicted to learning
  • Location
    Lagos Nigeria
  • Work
    Backend Developer.. Aspiring Full Stack Developer at Freelancer
  • Joined

Great Post.

CollapseExpand
 
alexpaper profile image
alexpaper
passionate webdev
  • Location
    Milan IT
  • Work
    full webdev at Free
  • Joined

I really needed this lesson, I found it very useful and well explained, thanks.

CollapseExpand
 
torianne02 profile image
Tori Crawford
A software engineer who loves learning and sharing knowledge.
  • Location
    Boise, ID
  • Education
    M.S.
  • Pronouns
    she/her
  • Work
    Full Stack Software Engineer - Looking for Next Role
  • Joined

Not a problem! :)

CollapseExpand
 
longchhun profile image
Longchhun
  • Joined

Great Post. Thank you for sharing

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

A software engineer who loves learning and sharing knowledge.
  • Location
    Boise, ID
  • Education
    M.S.
  • Pronouns
    she/her
  • Work
    Full Stack Software Engineer - Looking for Next Role
  • Joined

More fromTori Crawford

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp