Default Parameters in Javascript

2 min readMar 10, 2021

Default function parameters is one of the useful ways in order to initialise the parameters with a default value when no value is passed i.e., when undefined is passed.

This is most useful when we are implementing any utility functions where the function calling is not in our hands.

Let’s see some example how this default parameters will be handy

const greetings = (name) => {
   console.log(`Hello, ${name}`);
}greetings();  //Output: Hello, undefined

In the above example if we see, we are not passing any arguments even though the function is expecting one argument. So, in the we see Hello, undefined in the console.

So, in order to print a meaningful output in the console we used to check if the typeof the parameter and assign a default value or using logical OR (||) like below.

const greetings = (name) => {
   const nameVal = (typeof name !== "undefined") ? name: "World";
   console.log(`Hello, ${nameVal}`);
}
greetings();    //Output: Hello, World//Or like using logical OR operator
const greetings = (name) => {
   console.log(`Hello, ${name || "World"}`);
}
greetings();    //Output: Hello, World//Or like this if the parameter is being used in multiple places in the function body
const greetings = (name) => {
   const nameVal = name || "World";
   console.log(`Hello, ${nameVal}`);
}
greetings();    //Output: Hello, World

Consider, you’ve more than one parameter and those parameters are being used multiple places in the function, then it’ll be not clean. So, in order to use default values only when no value is passed or undefined is passed default parameters will be very much handy.

//This is how default values can be given to the function parameters
const greetings = (name = "World") => {
    console.log(`Hello, ${name}`);
}
greetings();     //Output: Hello, World

If we see in the above example, in the function head itself we are giving a value to the parameters. This way the function body will be much cleaner and will be easy to understand. Also, it’ll be easy if there are more than one parameter.

const greetings = (greet = "Hello", name = "World") => {
    console.log(`${greet}, ${name}`);
}
greetings();                   //Output: Hello, World
greetings("Hey", "John");      //Output: Hey, John
greetings(undefined, "John");  //Output: Hello, John

Passing falsy values

The default value in the function will be assigned only if the passed value is undefined and not for any falsy values. Let’s see the examples for the same

const print = (val = "Tada") => {
   console.log(`Argument Value: ${val}`);
}
print('');     //Output: Argument Value: ''
print(null);   //Output: Argument Value: null
print();       //Output: Argument Value: Tada

Destructured parameter with default value

Not only primitive values, but we can also for objects and arrays we can give default values

const greet = ({name} = {name: "John"}) => {
   console.log(`Hello, ${name}`);
}
greet({name: "JavaScript"});   //Output: Hello, JavaScript
greet();                       //Output: Hello, John