Parameters and arguments

Parameters vs arguments

A quick terminology note: parameters are the variables in the function definition. Arguments are the actual values you pass when calling the function.

// "name" and "age" are parameters
function createUser(name, age) {
  return { name, age };
}

// "Sarah" and 28 are arguments
const user = createUser("Sarah", 28);
console.log(user); // { name: "Sarah", age: 28 }

In practice, people use the terms interchangeably. Don’t worry about it.

Python mental model: JavaScript is more permissive than Python here. If you pass too few arguments, the missing ones become undefined (instead of raising a TypeError). If you pass extra arguments, JavaScript ignores them unless you collect them with a rest parameter (...args).

Default parameters

Give parameters a fallback value when no argument is provided:

function greet(name, greeting = "Hello") {
  return `${greeting}, ${name}!`;
}

console.log(greet("Sarah"));           // "Hello, Sarah!"
console.log(greet("Sarah", "Hey"));    // "Hey, Sarah!"
console.log(greet("Sarah", "Welcome")); // "Welcome, Sarah!"

JavaScript
Python

function createUser(name, role = "viewer") {
  return { name, role };
}

def create_user(name, role="viewer"):
    return {"name": name, "role": role}

Same concept, same position — defaults go in the parameter list. JavaScript uses =, Python uses =. No surprises here.

One important JavaScript difference: default parameters are used when the argument is missing or explicitly undefined. Passing null does not use the default.

Practical example

async function fetchUsers(page = 1, limit = 10) {
  const response = await fetch(
    `http://localhost:8000/api/users?page=${page}&limit=${limit}`
  );
  return response.json();
}

// Use defaults
const firstPage = await fetchUsers();

// Override both
const thirdPage = await fetchUsers(3, 25);

Put required parameters first, optional parameters (with defaults) last. This is the same convention as Python.

Rest parameters

Collect any number of arguments into an array using ...:

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

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

The rest parameter ...numbers gathers all arguments into a real array. You can then use array methods on it.

function logAll(label, ...items) {
  console.log(`${label}:`);
  items.forEach(item => console.log(`  - ${item}`));
}

logAll("Fruits", "Apple", "Banana", "Cherry");
// Fruits:
//   - Apple
//   - Banana
//   - Cherry

JavaScript
Python

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

def sum(*numbers):
    return sum(numbers)  # Built-in sum works on tuples

JavaScript uses ...args, Python uses *args. Same idea.

In JavaScript, ... is used in multiple places (rest parameters, spread syntax). In Python, *args and **kwargs are split into separate syntaxes/uses. Same family of idea, different syntax rules.

The rest parameter must be the last parameter. function bad(...args, last) is a syntax error.

Destructuring parameters

When a function takes an object, you can destructure it right in the parameter list:

// Without destructuring
function displayUser(user) {
  console.log(`${user.name} (${user.email})`);
}

// With destructuring — cleaner
function displayUser({ name, email }) {
  console.log(`${name} (${email})`);
}

const user = { name: "Sarah", email: "sarah@example.com", role: "admin" };
displayUser(user); // "Sarah (sarah@example.com)"

This is a pattern you’ll see everywhere in React. Component props are destructured this way:

// React component with destructured props
function UserCard({ name, email, role }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>{email}</p>
      <span>{role}</span>
    </div>
  );
}

Destructuring with defaults

Combine destructuring and default values:

function createRequest({ method = "GET", url, body = null }) {
  console.log(`${method} ${url}`);
  if (body) console.log("Body:", body);
}

createRequest({ url: "http://localhost:8000/api/users" });
// "GET http://localhost:8000/api/users"

createRequest({ method: "POST", url: "/api/users", body: { name: "Sarah" } });
// "POST /api/users"
// "Body: { name: 'Sarah' }"

Destructured parameters with defaults are the cleanest way to handle options objects. You’ll see this pattern in API client functions, React components, and configuration.

Python mental model: this is often nicer than passing a long list of positional args, and it plays a similar role to keyword-argument style APIs (func(url=..., timeout=...)) — but in JavaScript you’re usually passing a single options object.

What’s next?

You know how to define functions and pass data into them. Next, let’s understand where variables live — scope determines which parts of your code can see which variables.

Understanding scope

How JavaScript determines where variables are accessible

Fundamentals

Functions

Scope

Parameters vs arguments

Default parameters

Practical example

Rest parameters

Destructuring parameters

Destructuring with defaults

What’s next?

Understanding scope

​Parameters vs arguments

​Default parameters

​Practical example

​Rest parameters

​Destructuring parameters

​Destructuring with defaults

​What’s next?

Understanding scope

Parameters vs arguments

Default parameters

Practical example

Rest parameters

Destructuring parameters

Destructuring with defaults

What’s next?