The Ultimate Guide to JavaScript Function Parameters

Hey dev friends! 👋

Have you ever wondered:

• What's the difference between arguments and parameters?
• Why does JavaScript use ... for both spreading and collecting values?
• How do you simulate keyword arguments in JavaScript?
• What's the cleanest way to write flexible functions?

If you've ever felt confused by rest parameters, spread syntax, or default values, you're in the right place.

Today we're diving deep into JavaScript function parameters — one of the most important concepts in modern JavaScript development.

Let's go! 🚀

Arguments vs Parameters

Before we get fancy, let's clear up one of the most common misunderstandings.

Parameters

Parameters are the variables listed in a function definition.

Arguments

Arguments are the actual values passed when calling the function.

function greet(name) {
  console.log(`Hello, ${name}`);
}

greet("Alice");

Here:

• name is the parameter
• "Alice" is the argument

Think of it like ordering coffee:

• The menu says coffee size (parameter)
• You order large (argument)

Simple, but incredibly important.

Positional Arguments

By default, JavaScript assigns arguments based on position.

function divide(a, b) {
  return a / b;
}

divide(10, 2); // 5
divide(2, 10); // 0.2

The first argument always goes into the first parameter.

The second argument goes into the second parameter.

Order matters.

function createUser(name, age) {
  console.log(name, age);
}

createUser("Anik", 25);

Output:

Anik 25

Swap them and you get a completely different result.

Simulating Keyword Arguments

Python developers often miss keyword arguments.

JavaScript doesn't support them natively, but objects give us something even better.

function createUser({
  name,
  age,
  isAdmin = false,
}) {
  return {
    name,
    age,
    isAdmin,
  };
}

const user = createUser({
  age: 25,
  name: "Anik",
});

Notice something?

The order doesn't matter.

createUser({
  name: "Anik",
  age: 25,
});

and

createUser({
  age: 25,
  name: "Anik",
});

produce exactly the same result.

This is the preferred way to handle multiple configuration options in modern JavaScript.

Meet the Spread Operator (...)

The spread operator lets us unpack values from an iterable.

Imagine you have an array:

const numbers = [1, 2, 3];

And a function:

function sum(a, b, c) {
  return a + b + c;
}

Without spread:

sum(numbers); // ❌

With spread:

sum(...numbers); // ✅

JavaScript transforms this into:

sum(1, 2, 3);

Like magic. ✨

Spread with Objects

Spread also works with objects.

const defaults = {
  darkMode: false,
  language: "en",
};

const userSettings = {
  darkMode: true,
};

const settings = {
  ...defaults,
  ...userSettings,
};

console.log(settings);

Output:

{
  darkMode: true,
  language: "en"
}

Later properties overwrite earlier ones.

This pattern is everywhere in React and modern frontend development.

Rest Parameters: JavaScript's Version of *args

Sometimes you don't know how many arguments a function will receive.

That's where rest parameters come in.

function addAll(...numbers) {
  return numbers.reduce(
    (total, num) => total + num,
    0
  );
}

console.log(
  addAll(1, 2, 3, 4, 5)
);

Output:

15

Everything after ...numbers gets collected into an array.

Think of it as:

"Take all remaining arguments and put them into a box."

Capturing the First Value and the Rest

You can combine normal parameters with rest parameters.

function logItems(first, ...rest) {
  console.log("First:", first);
  console.log("Rest:", rest);
}

logItems(
  "JavaScript",
  "React",
  "Next.js",
  "Node.js"
);

Output:

First: JavaScript
Rest: ["React", "Next.js", "Node.js"]

This is incredibly useful for flexible APIs.

Simulating **kwargs in JavaScript

Python has **kwargs.

JavaScript achieves the same effect using objects.

function configure(options) {
  const defaults = {
    darkMode: false,
    version: "1.0",
  };

  return {
    ...defaults,
    ...options,
  };
}

configure({
  darkMode: true,
});

Output:

{
  darkMode: true,
  version: "1.0"
}

This pattern is used throughout:

• React
• Next.js
• Express
• Node.js libraries

Pretty much everywhere.

Combining Spread and Rest

The real power appears when you combine both.

function timeFunction(
  fn,
  ...args
) {
  const start =
    performance.now();

  const result = fn(...args);

  const end =
    performance.now();

  console.log(
    `Execution Time: ${
      end - start
    }ms`
  );

  return result;
}

function multiply(a, b) {
  return a * b;
}

timeFunction(
  multiply,
  20,
  30
);

What happens?

1. ...args collects arguments
2. fn(...args) spreads them back out
3. The wrapped function executes normally

Elegant and powerful.

Default Parameters

Default parameters provide fallback values.

function greet(
  name = "stranger"
) {
  console.log(
    `Hello, ${name}`
  );
}

greet();

Output:

Hello, stranger

And:

greet("Anik");

Output:

Hello, Anik

Default Values Can Be Expressions

Defaults aren't limited to strings.

function createTimestamp(
  date = new Date()
) {
  return date;
}

Or even function calls:

function generateId() {
  return Math.random();
}

function createUser(
  id = generateId()
) {
  return { id };
}

The default value is evaluated when the function is called.

A Common Pitfall

Unlike Python, JavaScript creates new arrays and objects each call.

function append(
  item,
  list = []
) {
  list.push(item);
  return list;
}

console.log(
  append(1)
); // [1]

console.log(
  append(2)
); // [2]

Each invocation gets a fresh array.

This behavior avoids one of Python's most famous default parameter bugs.

Real-World Example: Flexible API Functions

Modern libraries often combine everything we've learned.

function request(
  url,
  {
    method = "GET",
    headers = {},
    timeout = 5000,
  } = {}
) {
  console.log({
    url,
    method,
    headers,
    timeout,
  });
}

request("/users");

request("/users", {
  method: "POST",
  timeout: 10000,
});

This approach provides:

• Required parameters
• Optional parameters
• Default values
• Named configuration

All in one clean API.

TL;DR Quick Recap

• Parameters are declared in function definitions
• Arguments are values passed during function calls
• JavaScript uses positional arguments by default
• Objects can simulate keyword arguments
• Spread (...) unpacks arrays and objects
• Rest (...) collects multiple values into an array
• Default parameters provide fallback values
• Combining spread, rest, and defaults creates flexible APIs

Final Thoughts: Functions Become Superpowers ⚡

Understanding function parameters transforms how you write JavaScript.

Once you master:

• Positional arguments
• Object parameters
• Spread syntax
• Rest parameters
• Default values

You'll start building cleaner, more maintainable, and more expressive APIs.

The next time you see ...args or { ...options }, you'll know exactly what's happening behind the scenes.

A Little Joke to End On 😄

Why did the JavaScript developer bring three dots to work?

Because they couldn't function without spread and rest!

Frequently Asked Questions

What is the difference between arguments and parameters in JavaScript?

Parameters are variables declared in a function definition.

Arguments are the actual values supplied when the function is called.

function greet(name) {}

greet("Anik");

Here:

• name is a parameter
• "Anik" is an argument

Does JavaScript support keyword arguments?

Not directly.

However, objects can be used to simulate keyword arguments.

function createUser({
  name,
  age,
}) {}

This allows arguments to be passed by property name rather than position.

What is the spread operator in JavaScript?

The spread operator (...) expands iterable values into individual elements.

const nums = [1, 2, 3];

sum(...nums);

Equivalent to:

sum(1, 2, 3);

What are rest parameters?

Rest parameters collect multiple arguments into an array.

function log(...items) {
  console.log(items);
}

Useful when the number of arguments is unknown.

What is the difference between spread and rest?

Although both use ..., they perform opposite actions.

Spread:

sum(...numbers);

Expands values.

Rest:

function sum(...numbers) {}

Collects values.

Can JavaScript functions have default parameter values?

Yes.

function greet(
  name = "stranger"
) {
  console.log(name);
}

The default is used when no value is supplied.

Can default parameters use expressions?

Yes.

function createId(
  id = Math.random()
) {
  return id;
}

The expression is evaluated when the function executes.

Why are object parameters popular in modern JavaScript?

Object parameters provide:

• Better readability
• Flexible argument ordering
• Easier maintenance
• Optional configurations

They're commonly used in React, Next.js, and Node.js libraries.

How do frameworks use function parameters?

Frameworks frequently combine:

• Object destructuring
• Default values
• Rest parameters

to create flexible and developer-friendly APIs.

Are rest parameters arrays?

Yes.

function test(...items) {
  console.log(
    Array.isArray(items)
  );
}

Output:

true

Unlike the old arguments object, rest parameters are real arrays.

What is the arguments object?

Older JavaScript functions automatically receive an arguments object.

function test() {
  console.log(arguments);
}

Modern JavaScript generally prefers rest parameters because they are cleaner and easier to work with.

Can spread syntax work with objects?

Yes.

const user = {
  name: "Anik",
};

const profile = {
  ...user,
  age: 25,
};

This creates a new object by copying properties.

What are common JavaScript interview questions about parameters?

Popular interview topics include:

• Arguments vs parameters
• Rest parameters
• Spread syntax
• Default values
• Object destructuring
• Function signatures
• Higher-order functions
• Callback parameter patterns

Why are function parameters important?

Function parameters make code:

• Reusable
• Dynamic
• Maintainable
• Easier to test
• Easier to understand

They are one of the core building blocks of JavaScript development.

Key Takeaways

• Parameters define what a function expects.
• Arguments provide actual values.
• JavaScript supports positional arguments.
• Objects simulate keyword arguments.
• Spread expands values.
• Rest collects values.
• Default parameters provide fallbacks.
• Modern APIs rely heavily on object destructuring and defaults.
• Mastering parameters leads to cleaner JavaScript code.

If you found this helpful, please share and follow for more JavaScript deep dives!

About the Author

Anik Sikder is a Software Engineer specializing in Frontend Development, Backend Systems, DevOps, Cloud Infrastructure, and Software Architecture.

He writes about JavaScript, Python, Django, FastAPI, System Design, distributed systems, and scalable software engineering practices.