Learn how to pass data into functions using parameters and arguments, including default values and rest parameters.

Parameters and Arguments

You have already seen parameters and arguments used in the previous topics. Now let's go deeper — because there is a lot more to them than just passing values in.

Quick reminder of the difference between the two terms — they are often used interchangeably but they mean different things:

Parameter — the placeholder variable in the function definition
Argument — the actual value you pass in when calling the function

function greet(name) {      // name is the PARAMETER
  console.log(`Hello, ${name}!`);
}

greet("Ali");               // "Ali" is the ARGUMENT

name is defined once in the function. "Ali" is passed in at call time. Parameter = definition, argument = call.

Multiple Parameters

A function can accept as many parameters as it needs, separated by commas.

function createProfile(name, age, city) {
  console.log(`${name} is ${age} years old and lives in ${city}.`);
}

createProfile("Ali", 22, "Lahore");
// Ali is 22 years old and lives in Lahore.

Arguments are matched to parameters by position — the first argument goes to the first parameter, the second to the second, and so on.

createProfile("Lahore", "Ali", 22);
// Lahore is Ali years old and lives in 22.

Pass them in the wrong order and you get wrong results — no error, just wrong data. Order always matters.

Missing and Extra Arguments

JavaScript does not throw an error if you pass too few or too many arguments.

Too few — missing ones become `undefined`

function introduce(name, age) {
  console.log(`${name} is ${age} years old.`);
}

introduce("Ali");
// Ali is undefined years old.

age was never passed so JavaScript set it to undefined. No error — just unexpected output.

Too many — extras are silently ignored

introduce("Ali", 22, "Lahore", "extra", "ignored");
// Ali is 22 years old.

The extra arguments are quietly ignored. The function only uses what it declares.

Default Parameters

Default parameters solve the missing argument problem cleanly. You set a fallback value right in the function definition — if the argument is not passed, the default is used.

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

greet("Ali");  // Hello, Ali!
greet();       // Hello, Guest!

When name is not passed, it falls back to "Guest" automatically.

You can have defaults on some parameters and not others:

function createOrder(item, quantity = 1, discount = 0) {
  const price = 500;
  const total = price * quantity * (1 - discount / 100);
  console.log(`${quantity}x ${item} — Rs. ${total}`);
}

createOrder("Keyboard");           // 1x Keyboard — Rs. 500
createOrder("Mouse", 3);           // 3x Mouse — Rs. 1500
createOrder("Monitor", 2, 10);     // 2x Monitor — Rs. 900

Always put parameters with defaults after parameters without defaults. If you put a default parameter first, you cannot skip it cleanly when calling the function.

// ❌ Bad — default is first, hard to skip
function order(discount = 0, item) {
  console.log(`${item} with ${discount}% off`);
}

order("Keyboard"); // item = undefined, discount = "Keyboard"

// ✅ Good — defaults come last
function order(item, discount = 0) {
  console.log(`${item} with ${discount}% off`);
}

order("Keyboard");      // Keyboard with 0% off
order("Keyboard", 10);  // Keyboard with 10% off

Default Parameters Can Use Other Parameters

A default value can reference a parameter that comes before it.

function createBox(width, height = width) {
  console.log(`Box: ${width} x ${height}`);
}

createBox(100);       // Box: 100 x 100 — square
createBox(100, 200);  // Box: 100 x 200 — rectangle

When height is not passed, it defaults to whatever width is — making a square. When height is passed, it uses that value instead.

Rest Parameters

Sometimes you don't know upfront how many arguments will be passed. Rest parameters let you collect all remaining arguments into a real array.

function sum(...numbers) {
  let total = 0;
  for (const num of numbers) {
    total += num;
  }
  return total;
}

console.log(sum(1, 2, 3));           // 6
console.log(sum(10, 20, 30, 40));    // 100
console.log(sum(5));                 // 5

The ... before the parameter name is what makes it a rest parameter. It collects every argument passed into an array called numbers. Pass two, get an array of two. Pass ten, get an array of ten.

Rest with other parameters

Rest parameters can be combined with regular parameters — but the rest parameter must always be last.

function orderSummary(customerName, ...items) {
  console.log(`Order for ${customerName}:`);
  for (const item of items) {
    console.log(`  - ${item}`);
  }
}

orderSummary("Ali", "Laptop", "Mouse", "Keyboard");
// Order for Ali:
//   - Laptop
//   - Mouse
//   - Keyboard

customerName gets the first argument. Everything after that goes into items as an array.

// ❌ Rest parameter must be last
function wrong(...items, customerName) {} // SyntaxError

// ✅ Rest parameter is last
function correct(customerName, ...items) {}

Rest Parameters vs `arguments` Object

Before rest parameters existed, JavaScript had a built-in arguments object inside every regular function — an array-like object containing all the arguments passed.

function oldWay() {
  console.log(arguments);       // { 0: 1, 1: 2, 2: 3 }
  console.log(arguments[0]);    // 1
}

oldWay(1, 2, 3);

Rest parameters are better in every way:

// arguments — old way
function sumOld() {
  let total = 0;
  for (let i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  return total;
}

// rest parameters — modern way
function sumNew(...numbers) {
  return numbers.reduce((total, n) => total + n, 0);
}

	`arguments`	Rest parameters
Type	Array-like object	Real array
Array methods	❌ Not available	✅ map, filter, reduce...
Works in arrow functions	❌ No	✅ Yes
Modern JavaScript	❌ Old pattern	✅ Use this

Always use rest parameters in modern JavaScript. arguments exists in old code — you will see it — but never write new code with it.

Passing Objects as Parameters

When a function needs many inputs, passing them as separate parameters gets messy. Passing a single object is much cleaner.

// ❌ Hard to read — what does each argument mean?
function createUser("Ali", 22, "ali@email.com", "Lahore", true) {}

// ✅ Clear — each value is labeled
function createUser({ name, age, email, city, isAdmin = false }) {
  console.log(`${name} (${email}) from ${city}`);
  console.log(`Admin: ${isAdmin}`);
}

createUser({
  name: "Ali",
  age: 22,
  email: "ali@email.com",
  city: "Lahore",
  isAdmin: true
});
// Ali (ali@email.com) from Lahore
// Admin: true

This pattern — destructuring an object in the parameters — is used everywhere in modern JavaScript, especially in React components. You get named arguments, default values, and any order you like.

A Real Example — Flexible Product Card

function renderProduct({
  name,
  price,
  currency = "Rs.",
  inStock = true,
  rating = 0
}) {
  const stockStatus = inStock ? "In Stock" : "Out of Stock";
  console.log(`${name}`);
  console.log(`Price: ${currency} ${price}`);
  console.log(`Rating: ${rating}/5`);
  console.log(`Status: ${stockStatus}`);
  console.log("---");
}

renderProduct({ name: "Laptop", price: 120000, rating: 4.5 });
// Laptop
// Price: Rs. 120000
// Rating: 4.5/5
// Status: In Stock
// ---

renderProduct({ name: "Old Phone", price: 8000, inStock: false, rating: 2.1 });
// Old Phone
// Price: Rs. 8000
// Rating: 2.1/5
// Status: Out of Stock
// ---

currency, inStock, and rating all have defaults — you only pass what is different from the default. Clean, flexible, and readable.

Summary

Parameters are placeholders in the function definition — arguments are the real values passed in
Arguments are matched to parameters by position — order matters
Missing arguments become undefined — extra arguments are ignored
Default parameters provide fallback values — function fn(x = 10) {}
Always put default parameters after required ones
Rest parameters collect all remaining arguments into a real array — function fn(...args) {}
Rest parameter must always be last in the parameter list
Passing an object as a parameter is cleaner than many separate arguments — especially with destructuring

Parameters and Arguments

On this page