JavaScript Parameters, Defaults & Return Values

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 or Core Idea

Function parameters

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

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.

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.

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.

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.

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.

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.

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.

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

const result = welcome("Jordan");

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

// 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.

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.

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.

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.

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.

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.

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.

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.

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:

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.