# JavaScript Parameters, Defaults & Return Values

Source: https://devdocs10.com/articles/javascript/js-params-returns  
By Murat Bo · Published 2026-07-07 · DevDocs10 (https://devdocs10.com)

JavaScript functions get data through parameters, can supply fallback values with defaults, and send results back with return values. Understanding these three ideas helps you write functions that are reusable, predictable, and easier to debug.

> **Quick answer:** Parameters are the named placeholders in a function definition, arguments are the values you pass in, default values are used when an argument is missing or `undefined`, and `return` sends a value back to the caller.

> **Difficulty:** Beginner
>
> **You'll understand this better if you know:** basic JavaScript variables, function syntax, and how values can be stored in and read from expressions.

## 1. What Is JavaScript Parameters, Defaults & Return Values?

Function parameters, default values, and return values describe how data moves into and out of a JavaScript function. They are the core parts of making functions useful beyond a single fixed task.

- `Parameters` are the names listed in a function definition.
- `Arguments` are the actual values passed when the function is called.
- `Defaults` provide fallback values when no argument is supplied or when the argument is `undefined`.
- `Return values` are the results a function sends back to the place where it was called.

This topic matters because most real functions need input, may need safe fallback behavior, and often produce a computed result that other code can use.

## 2. Why JavaScript Parameters, Defaults & Return Values Matter

Without parameters, a function can only work with hard-coded data. Without return values, a function can perform actions but cannot easily give a result back to the rest of your program.

Defaults make functions more flexible. They let a function work even when the caller leaves out some information, which is common in UI code, utility functions, and API helpers.

These features also improve readability. A function like `formatPrice(value, currency = 'USD')` tells you what the function needs and what it can safely assume.

## 3. Basic Syntax

### Function parameters

A function definition lists its parameters inside the parentheses. The parameter names are local variables that exist only inside the function.

```javascript
function greet(name) {
  return `Hello, ${name}!`;
}
```

Here, `name` is the parameter. When the function is called, the passed-in value is stored in that parameter.

### Function arguments

Arguments are the values supplied at the call site.

```javascript
const message = greet("Ava");
```

In this call, `"Ava"` is the argument, and it becomes the value of `name` inside the function.

### Return values

A `return` statement ends the function and sends a value back to the caller.

```javascript
function double(n) {
  return n * 2;
}
```

Any expression after `return` becomes the function result. If no `return` is used, the function result is `undefined`.

## 4. Step-by-Step Examples

### Example 1: Passing a single value

This example shows the simplest flow: call a function with one argument, then use the returned result.

```javascript
function square(number) {
  return number * number;
}

const result = square(5);
// result is 25
```

The parameter `number` receives `5`, and the function returns the multiplied value.

### Example 2: Multiple parameters

Functions often need more than one input. Multiple parameters are separated by commas.

```javascript
function fullName(firstName, lastName) {
  return `${firstName} ${lastName}`;
}

const person = fullName("Mina", "Lopez");
```

Each argument is matched by position, so the first value goes to `firstName` and the second goes to `lastName`.

### Example 3: Default parameter values

Default values help when an argument is missing. They are written directly in the parameter list.

```javascript
function greetUser(name = "Guest") {
  return `Hello, ${name}!`;
}

const a = greetUser();
const b = greetUser("Sam");
```

Calling `greetUser()` uses `"Guest"`. Passing `"Sam"` overrides the default.

### Example 4: Returning objects for richer results

Functions often return objects when they need to provide more than one piece of information.

```javascript
function createUser(username, isAdmin = false) {
  return {
    username: username,
    isAdmin: isAdmin
  };
}

const user = createUser("lina");
```

Returning an object is a common pattern when one function needs to compute several related values at once.

## 5. Practical Use Cases

- Formatting text, such as `formatDate(date, locale = 'en-US')`.
- Calculating totals, discounts, or taxes and returning a final number.
- Building helper functions that accept optional options objects.
- Creating reusable utilities for validation, parsing, or data transformation.
- Writing event-related helpers that return a status, message, or computed state.

These patterns appear in everyday JavaScript because functions are often the smallest reusable unit of logic.

## 6. Common Mistakes

### Mistake 1: Confusing parameters with arguments

Beginners often swap the terms. The parameter is the name in the function definition, while the argument is the value passed in the call.

**Problem:** If you mix these up, debugging becomes harder because you may look in the wrong place for the value.

```javascript
function welcome(name) {
  return `Welcome, ${name}`;
}

const result = welcome("Jordan");
```

**Fix:** Remember that `name` is the parameter and `"Jordan"` is the argument.

```javascript
// Parameter: name
// Argument: "Jordan"
```

This distinction matters when reading documentation and when you are tracking how data moves through a function call.

### Mistake 2: Expecting a function to return a value without using return

A function that only performs side effects does not automatically produce a useful result. If you want to use the outcome later, you must return it.

**Problem:** Without `return`, the function result is `undefined`, which often leads to confusing output or failed calculations.

```javascript
function add(a, b) {
  a + b;
}

const sum = add(2, 3);
// sum is undefined
```

**Fix:** Add an explicit `return` so the computed value is sent back.

```javascript
function add(a, b) {
  return a + b;
}

const sum = add(2, 3);
```

The corrected version works because the caller receives the calculated value instead of `undefined`.

### Mistake 3: Assuming default parameters apply to all falsey values

Default parameters only replace `undefined`, not every falsey value. That surprises people who pass `0`, `false`, or an empty string.

**Problem:** If you expect defaults to run for every falsey value, your function can behave differently than you intended.

```javascript
function setVolume(level = 10) {
  return level;
}

const volume = setVolume(0);
// volume is 0, not 10
```

**Fix:** Use a default parameter only for missing values, or handle falsey values explicitly when that is the real requirement.

```javascript
function setVolume(level = 10) {
  return level;
}

function setVolumeFallback(level) {
  return level ?? 10;
}
```

The corrected approach makes the difference clear: default parameters handle `undefined`, while `??` can be used when you want to fall back only for `null` or `undefined`.

## 7. Best Practices

### Practice 1: Use descriptive parameter names

Good parameter names make a function self-explanatory and reduce the need for comments.

```javascript
function calculateShipping(weightKg, distanceKm) {
  return weightKg * 2 + distanceKm * 0.5;
}
```

Names like `weightKg` and `distanceKm` explain the expected input units and meaning.

### Practice 2: Use defaults for truly optional inputs

Defaults are best when a missing argument should behave in a predictable, safe way.

```javascript
function buildGreeting(name = "Friend") {
  return `Hi, ${name}!`;
}
```

This keeps the call site clean while protecting the function from missing input.

### Practice 3: Return one clear result

Functions are easier to reuse when they return a single, meaningful value instead of mixing output concerns.

```javascript
function parseAge(text) {
  const age = Number(text);
  return Number.isNaN(age) ? null : age;
}
```

A clear return value makes it easy for callers to decide what to do next.

## 8. Limitations and Edge Cases

- Default parameters only apply when the argument is `undefined`, not when it is `null`.
- Missing arguments become `undefined`, which is why default values are often useful.
- Parameters are matched by position unless you use an options object pattern.
- A returned object or array is still just a reference value, so changes to it later can affect shared state.
- Arrow functions with a single expression can return implicitly, but block bodies still need an explicit `return`.

> A common source of confusion is the difference between `null` and `undefined`: defaults handle the second one automatically, not the first.

## 9. Practical Mini Project

Here is a small utility that formats a product summary using parameters, a default value, and a return value. It takes the product name and price, then optionally applies a discount percentage.

```javascript
function formatProductSummary(name, price, discountPercent = 0) {
  const discountAmount = price * (discountPercent / 100);
  const finalPrice = price - discountAmount;

  return `${name}: $${finalPrice.toFixed(2)}`;
}

const basicItem = formatProductSummary("Notebook", 4.5);
const saleItem = formatProductSummary("Headphones", 80, 15);
```

This example shows the full flow: parameters receive input, a default keeps the discount optional, and `return` provides a formatted string that the caller can display or store.

## 10. Key Points

- Parameters are the named inputs declared in a function.
- Arguments are the values passed when calling the function.
- Default parameters help when an argument is omitted or `undefined`.
- `return` sends a value back and ends the function.
- Functions without a return statement produce `undefined`.
- Choosing clear parameter names and sensible defaults makes functions easier to reuse.

## 11. Practice Exercise

Create a function named `buildLabel` that:

- accepts a `name` parameter,
- accepts an optional `prefix` parameter with a default value of `"User"`,
- returns a string in the format `"prefix: name"`.

**Expected output:** Calling `buildLabel("Nina")` should return `"User: Nina"`.

**Hint:** Put the default value directly in the parameter list and use template literals in the return statement.

**Solution:**

```javascript
function buildLabel(name, prefix = "User") {
  return `${prefix}: ${name}`;
}

const output = buildLabel("Nina");
// "User: Nina"
```

## 12. Final Summary

JavaScript parameters define what a function accepts, default values make those inputs safer and more flexible, and return values let the function send a result back to the caller. Together, they determine how your functions communicate with the rest of your code.

Once you understand these three pieces, you can write functions that are easier to read, easier to reuse, and much easier to test. A good next step is learning how arrays and objects are passed into functions, since those are the most common real-world inputs and outputs.