DEV Community

loading...
Cover image for How to set default values for function parameters in JavaScript?

How to set default values for function parameters in JavaScript?

MELVIN GEORGE
Hi, I'm Melvin George, A web developer, and a blogger.
Originally published at melvingeorge.me ・2 min read

Originally posted here!

To set default values for function parameters in JavaScript, you can use the assignment (=) operator on the parameter variables and then set the default value there.

TL;DR

// Function which greets a person
// with default value as "anonymous user"
// for name parameter
function greetPerson(name = "anonymous user") {
  console.log(`Hello ${name}`);
}

// call the function but with no value
greetPerson(); // "Hello anonymous user"
Enter fullscreen mode Exit fullscreen mode

Let's say we have a function called greetPerson which will accept a person's name as an argument and upon calling the function greets the person by calling their name. Eg: "Hello John".

So the function will look like this,

// Function which greets a person
function greetPerson(name) {
  console.log(`Hello ${name}`);
}
Enter fullscreen mode Exit fullscreen mode

Now if we call the function we by passing John as an argument to the greetPerson function we would see Hello John in the console. It can be done like this,

// Function which greets a person
function greetPerson(name) {
  console.log(`Hello ${name}`);
}

// call the function
greetPerson("John"); // "Hello John"
Enter fullscreen mode Exit fullscreen mode

Till now we are fine.

But what if we didn't pass any value as an argument to the function and simply call the function like this,

// Function which greets a person
function greetPerson(name) {
  console.log(`Hello ${name}`);
}

// call the function but with no value
greetPerson(); // "Hello undefined"
Enter fullscreen mode Exit fullscreen mode

We see the output as Hello undefined, which would be a bad practice and a bad experience for the user.

One of the ways to solve this problem would be to assign a default value to the name parameter or variable in the greetPerson function. Let's set the default value as anonymous user.

  • To set the default value we can use the assignment operator (=) on the function parameter, in our case it is the name parameter.

It can be done like this,

// Function which greets a person
// with default value as "anonymous user" for name parameter
function greetPerson(name = "anonymous user") {
  console.log(`Hello ${name}`);
}
Enter fullscreen mode Exit fullscreen mode

Now if we call the function without the value, we can see the value as Hello anonymous user. It can done like this,

// Function which greets a person
// with default value as "anonymous user" for name parameter
function greetPerson(name = "anonymous user") {
  console.log(`Hello ${name}`);
}

// call the function but with no value
greetPerson(); // "Hello anonymous user"
Enter fullscreen mode Exit fullscreen mode

And we have successfully set the default value for the name parameter in the greetPerson function.

That's all! 😃

See the above code live in JSBin

Feel free to share if you found this useful 😃.


Discussion (0)