ES6 Default function parameters tutorial

One of the lesser known but still cool features of ES6 is ‘Default function parameters’, the purpose of this is one of syntactic sugar and helps the developer write less code and have to do less checks such as if statements to check if the specific parameter is undefined. Stating a default parameter helps get rid of this issue. Below I will go into a few examples of how to implement this in JavaScript as well as explain other use cases for default parameters.

Below is one of the simplest examples of a default parameter in JavaScript.

function sayHello(name = 'Alex'){
console.log('Welcome ' + name);
}

Here I am setting the parameter “name” to have a default parameter of “Alex”. If we do not have default parameters then we need to check for the parameters existence inside the function with the use of if statements like below.

function sayHello(name){
if (typeof name === undefined){
    name = 'alex'
}

As you can see, setting a default parameter has much less code than if you were to check inside of the function.

Another cool thing you can do is use another parameter as a default parameter like below.

function multiplySum(firstNumber, secondNumber = firstNumber * 2){
   console.log(firstNumber * secondNumber);

So as you can see from the above I have set the “secondNumber” parameter equal to the “firstNumber” parameter multiplied by 3 so if I were to run the function like below.

multiplySum(3); 18
multiplySum(3,2); 6

The first output is 18 because the “firstNumber” is set to 3 and the “secondNumber” parameter is the “firstNumber” parameter multiplied by 2 so the output is 6, and console.log multiplies the “firstNumber” and “secondNumber” together so 6 * 3 is 18.

When you set a second parameter it will override the initial default setting of the parameter so the output for the second example is 6.

Thirdly, another cool thing that you can do with default parameters is setting functions as default parameters!

Below is an example

function sayHello(name, helloMethod = defaultHello){
 helloMethod(name);
}
function customHello(name){
 console.log('this is a custom hello so good morning madam or sir: ' + name
}
function defaultHello(name){
  console.log(' this is the default hello so good morning madam or sir: ' + name
}
sayHello('Alex');
sayHello('Alex',customHello);

So as you can see from the above the first time i run “sayHello” with one parameter “Alex” it will run the “defaultHello” method while passing in the value “Alex” to the function “defaultHello”. Whereas, on the second run I have passed in a second parameter which is the function “customHello” so that will override the default function “defaultHello” from running and the output will be console.log set in the “customHello” function instead.

Hopefully you have learnt something from this article and about how to use default parameters within JavaScript, and apologies for the shortness and basic like tutorial but I plan on putting these tutorials into a series like “ES6 tutorials” in the future. I also plan on having another tutorial done today as well.

If you have any criticisms or constructive feedback regarding how I write my articles then feel free to tell me as I am always looking to improve :)

Thank you once again!