ES6 - A beginners guide - Default Parameters

stefanwrightcodes

Stefan Wright

Posted on September 3, 2021

ES6 - A beginners guide - Default Parameters

Welcome, in this article we are going to talk about Default Parameters, a feature that has long existed in other languages but landed in JavaScript in ES6. Simply put, Default Parameters will help us to not only write less code, but to ensure that functions are less likely to throw an exception if someone forget to send a parameter in.
Let's jump straight to an example, as usual we'll show an ES5 snippet first. We'll go with a sample function to create an AJAX request

The ES5 way

With ES5 we would need to check for the lack of a parameter value, if this was found we would give it a default value. This typicaly resulted in a quite unnecessary if statement.

function makeAJAXRequest(url, method) {
    if(!method){
        method = "GET";
    };
    //Rest of the request
}
makeAJAXRequest("https://www.google.com"); // This will generate a GET request because our function will set it as a GET
makeAJAXRequest("https://www.google.com", "POST"); // This will generate a POST request
Enter fullscreen mode Exit fullscreen mode

So, above, if we do not send the method parameter then line 3 of the function will step in and say "Hey! the method needs to be set to GET. If we do send a value then that will be used

ES6 way

The ES5 way works, of course it does it's been around for a while, but its outdated, and its long, and we've come to like making things smaller (just look at what happened to mobile phones!). So ES6 came along and those who came upon the specification decided..."you know what, let's just give the option to set a default value", and that's what they did. Have a look at the example below:

function makeAJAXRequest(url, method = "GET") {
    //Rest of the request
}
makeAJAXRequest("https://www.google.com"); // This will generate a GET request because our function will use the default parameter
makeAJAXRequest("https://www.google.com", "POST"); // This will generate a POST request
Enter fullscreen mode Exit fullscreen mode

Isn't that much tidier? There is one thing to remember here, and that is that Default Parameters must be on the right-hand side of the parameter list. There is no way to skip over them when calling a function so the following would not work:

function makeAJAXRequest(url = "https://www.google.com", method) {
    //Rest of the request
}
makeAJAXRequest("GET"); // This would call the function and url would be "GET" and there would be no method set and so we would likely hit an error
Enter fullscreen mode Exit fullscreen mode

Extra

Default Parameters can have a value generated from other parameters (supplied or defaulted) that have already been set, for example:

function sumOfThree(a, b, c = a + b) {
    return a + b + c;
}
console.log(sumOfThree(1,2)) // Returns 6 in a console.log
console.log(sumOfThree(1,2,4)) // Returns 7 in a console.log
Enter fullscreen mode Exit fullscreen mode
💖 💪 🙅 🚩
stefanwrightcodes
Stefan Wright

Posted on September 3, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Function Hoisting In JavaScript
javascript Function Hoisting In JavaScript

September 10, 2022

JavaScript getters and setters
javascript JavaScript getters and setters

May 9, 2022

JavaScript Basics in its Simplest Form
javascript JavaScript Basics in its Simplest Form

January 18, 2022

How to practice Javascript?
javascript How to practice Javascript?

October 12, 2021

The keyword "new" in JavaScript
javascript The keyword "new" in JavaScript

September 19, 2021