Before you start learning about default parameters in JavaScript, you must understand the difference between arguments and parameters. Parameters refer to the variables that are declared in function definition or declaration. On the other hand, arguments are the values that are passed to the function during a function call.
function add(a, b){
console.log(`Sum of ${a} and ${b} is ${a+b}`);
}
add(5, 10);
In the code, 5 and 10 are arguments. Variables a and b are parameters.
When you call a function with fewer arguments than declared parameters, in that case, additional parameters are set to undefined.
function greet(msg){
console.log(msg);
}
greet(); //undefined
The greet() function has one parameter msg, but we didn't pass a message while invoking it because of which the msg parameter is assigned an undefined value. Instead of an undefined value, you can assign a default value to the parameter in two different ways:
The first way is to use a conditional statement such as if to check whether a parameter is undefined or not. If undefined, then assign a default value to it. The following code shows how to do this:
function greet(msg){
if(msg === undefined){
msg = 'Hello, World!';
}
console.log(msg);
}
greet(); // Hello, World!
In this example, we didn't pass a message to the greet() function. So, undefined is assigned to the msg parameter. Inside the function, we set the 'Hello, World!' string to the msg parameter.
Note: If you want to learn about undefined data type, then visit What is undefined in JavaScript?
You can also use the logical || operator to assign a default value.
function greet(msg){
msg = msg || 'Hello, World!';
console.log(msg);
}
greet(); // Hello, World!
Note: If you are not familiar with the logical OR operator, then How to use Logical OR (||) operator in JavaScript?
Another way to assign a default value is to use ES6 default parameters. In JavaScript, the default parameters look like this:
function functionName(param1=defaultValue1, param2=defaultValue2, ...){
//function body
}
const functionName = function(param1=defaultValue1, param2=defaultValue2, ...){
//function body
}
You use the equals sign to specify the default value. You mention the default value on the righthand side of the assignment operator (=), and on the lefthand side, you write the parameter name.
The default value assigned to the parameter is used in two situations:
function greet(msg='Hello, World!'){
console.log(msg);
}
greet(); // Hello, World!
function greet(msg='Hello, World!'){
console.log(msg);
}
greet(undefined); // Hello, World!
Let's see some examples that will help you in improving your understanding of default parameters.
1) When a function has parameters other than default parameters, in that case, you must specify default parameters at the end of parameter lists.
function greet(msg, name='World'){
console.log(`${msg} ${name}!`);
}
greet('Hello'); //Hello World!
In this code, the name parameter is the default parameter and it is defined in the end. When the greet() function is called, we did not pass any argument to the name parameter; therefore, it took the default value of 'World'. But if we have defined the default parameter as the first parameter like this:
function greet(name='World', msg){
console.log(`${msg} ${name}!`);
}
greet('Hello'); //undefined Hello!
On calling the greet() function, the msg parameter is assigned an undefined value.
2) Suppose you don't want to pass any value to default parameters. In that case, you can pass undefined to the default parameters.
In the previous example, the msg parameter took undefined value because no argument is passed to it. You can pass a value to the msg parameter in two ways:
function greet(name='World', msg){
console.log(`${msg} ${name}!`);
}
greet(, 'Hello'); //SyntaxError
In this code, while calling the greet() function the first argument is omitted. By doing this, you will get a SyntaxError. To prevent such error, pass undefined as the first argument to the greet() function.
function greet(name='World', msg){
console.log(`${msg} ${name}!`);
}
greet(undefined, 'Hello'); //Hello World!
