Skip to main content

​
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!"

function createUser(name, role = "viewer") {
  return { name, 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

function sum(...numbers) {
  return numbers.reduce((total, n) => total + n, 0);
}
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