ES6 - A beginners guide - Default Parameters
Stefan Wright
Posted on September 3, 2021
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
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
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
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
Posted on September 3, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.