---
title: "JavaScript default parameters Tutorial"
url: https://weworkworldwide.com/tutorials/javascript-default-parameters-2/
description: "JavaScript default parameters Tutorial: In the function section, we mentioned that parameters of a function are basically the local variables of that…"
date: 2026-10-24T13:00:29+00:00
source: https://weworkworldwide.com/llms.txt
---

# JavaScript default parameters Tutorial

In the function section, we mentioned that parameters of a function are basically the local variables of that function.

We also know that when declaring a variable, by default its value is set to `undefined`. This is true for parameters as well.

When creating a parameter for a function, by default its value is set to `undefined`. So until we call that function and assign arguments to be stored into those parameters, they have the value `undefined`.

Note: a function that has parameters can be called without assigning a value to its parameters (calling the function with no arguments). In situation like this, those parameters will have their `undefined` value.

But JavaScript came up with a new technique which is called default parameter and this allows developers to set a default value for parameters of a function.

This means the parameters of a function will have a default value that is not `undefined`. Now if we call a function that has default value for its parameter and also don’t set any argument for that function when calling it, the parameters will have their default values to be used in the body of that function.

Example:

``` line-numbers
<!DOCTYPE html>
<html>
<head>
<title>JS is fun :)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h3>Output:</h3>
<p id = "link"></p>
<script>
function funcOne(name = "John", lastName = "Doe"){
console.log(`Hello ${name} ${lastName}`);
}
funcOne();
funcOne("Omid");
funcOne(undefined, "Dehghan");
</script>
</body>
</html>
```

Output:

Hello John Doe

Hello Omid Doe

Hello John Dehghan

Take a look at the signature of the `funcOne` function:

``` line-numbers
function funcOne(name = "John", lastName = "Doe")
```

It has two parameters and each one of them has a default value.

Basically when we want to set a default value for a parameter, we use the assignment operator `=` and set the default value for that parameter.

Now let’s see the first call to this function:

``` line-numbers
funcOne();
```

Here we didn’t set any argument to the function. So the default values that are set for the function will be used for the parameters.

Now when the execution engine ran the body of this function, those default values are sent to the browser’s console.

For this reason the first output we’ve got was: John Doe

Now let’s see the second call to this function:

``` line-numbers
funcOne("Omid");
```

Here we set only one argument for the function. This means only the first parameter of the function will reassign its current value and so the `name` parameter will hold the value `Omid`. But the second parameter still holds its default value because we didn’t assign any new value for that second parameter when called the function.

For this reason when the execution engine ran the body of the function for the second time, we’ve got the message: `Omid Doe` on the browser’s console.

The last time we’ve called this function was like this:

``` line-numbers
funcOne(undefined, "Dehghan");
```

Here the first argument is set to `undefined`.

In JavaScript if we set the argument of a function to `undefined` just like the way we did here, the execution engine will use the default value (whatever that might be) instead of using the `undefined`. For this reason the value of the first parameter `name` is still set to `John`. The second argument in this call is set to `Dehghan`. So because this argument is a valid value, the second parameter of the function is reassigned to this new value.

Now after the body of this function ran for the third time, we got the message: `John Dehghan` on the browser’s console.

Example:

``` line-numbers
<!DOCTYPE html>
<html>
<head>
<title>JS is fun :)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h3>Output:</h3>
<p id = "link"></p>
<script>
function funcOne(name = "John", lastName = name){
console.log(`Hello ${name} ${lastName}`);
}
funcOne();
funcOne("Omid");
funcOne(undefined, "Dehghan");
</script>
</body>
</html>
```

Output:

Hello John John

Hello Omid Omid

Hello John Dehghan

Let’s take a look at the signature of the `funcOne()` function:

``` line-numbers
function funcOne(name = "John", lastName = name)
```

Here the first parameter is `name` and its default value is `John`. The second parameter is `lastName` and its default value is the value that is set for the `name` parameter. This means the `lastName` parameter also has the value `John` as its default value.

So if we call this function without any arguments for the first and the second parameters, the output that we will get from the function will be: `John John`.

Now if we call the function with only one argument for the first parameter but nothing for the second one like `funcOne("Omid");` we will get the message: `Omid Omid`.

This is because the second parameter of the function uses the value that is stored in the first parameter. So here the first parameter has the value `Omid` and so the second one use that as well.

But if we call the function like `funcOne(undefined, "Dehghan");`:

The first parameter will resolve to its default value which is `John`. The second parameter however will use the argument `Dehghan` and store it as its value (It won’t use the default value of the `name` parameter anymore).

For this reason, calling the function in this way will output: `John Dehghan`.