JavaScript Default Function Parameters.

In JavaScript when we call a function which expects some data to be passed in if you call that without passing in that data JavaScript will use undefined.

Let's understand this practically ⚙️

What the following function does is that it takes a name as an input and console logs it.

function printName(name) {
  console.log(name);
}

Now if we call the printName function by passing in a name as shown below:

printName("frontendenthusiast");  

We'll get the following output.

frontendenthusiast

Now lets call the same function without passing anything in

printName();  

We will get undefined as the output in the console.

undefined

undefined isn't that useful in most situations what if we can use a fallback if no name is passed into the function. Well for that we can use the || operator in JavaScript as shown below:

function printName(name) {
  name = name || `Anonymous`;
  console.log(name);
}

The Logical OR (||) operator returns the very first truthy value and undefined is a falsy value so in the printName function it will return Anonymous which is a truthy value.

Now with the above addition of || operator if we call the function by passing in no value as shown:

printName();

We will get Anonymous as the output.

Anonymous

In ES6 we have a more compact way of doing the above which is to set up default parameters directly using the assignment operator = as shown:

function printName(name = `Anonymous`) {
  console.log(name);
}

this returns default value we set using = operator in case no value was passed in.

function printName(name = `frontendenthusiast`) {
  console.log(name);
}

printName(undefined);

The output of the above function will be frontendenthusiast

Happy coding! 🥰

Comments

[emptyother]

Note that when passing the value null, it is not replaced with a default value. I've stopped using null entirely but some libraries return it instead of undefined.