JavaScript Parameters and Arguments

Parameters vs Arguments

Parameters and arguments are often confused, but they're different concepts. Parameters are the names listed in a function definition, while arguments are the actual values passed when calling the function.

Think of parameters as placeholders and arguments as the actual data being passed in.

// 'name' and 'age' are PARAMETERS
function createProfile(name, age) {
  console.log("Name: " + name + ", Age: " + age);
}

// "Alice" and 25 are ARGUMENTS
createProfile("Alice", 25); // Output: Name: Alice, Age: 25

// "Bob" and 30 are different ARGUMENTS
createProfile("Bob", 30);   // Output: Name: Bob, Age: 30

Using Parameters

Parameters give your function the ability to accept input values. You define them in the function signature and use them in the function body.

// Function with multiple parameters
function calculateArea(width, height) {
  const area = width * height;
  return area;
}

console.log(calculateArea(5, 10)); // 50
console.log(calculateArea(20, 15)); // 300

// Parameters can be used multiple times
function greet(firstName, lastName) {
  return "Hello, " + firstName + " " + lastName;
}

console.log(greet("John", "Doe")); // Hello, John Doe

Arguments Object

Inside a function (not arrow functions), you can access the 'arguments' object, which contains all arguments passed to the function, even if they exceed the number of parameters.

// Regular function has access to 'arguments'
function sum() {
  let total = 0;
  for (let i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  return total;
}

console.log(sum(1, 2, 3)); // 6
console.log(sum(5, 10, 15, 20)); // 50

// Arrow functions don't have 'arguments'
const sum2 = () => {
  console.log(arguments); // ReferenceError
};

// Use rest parameters instead with arrow functions
const sum3 = (...nums) => {
  let total = 0;
  for (let num of nums) {
    total += num;
  }
  return total;
};

console.log(sum3(1, 2, 3)); // 6

Passing More or Fewer Arguments

JavaScript allows you to pass more or fewer arguments than the function has parameters. Extra arguments are ignored, and missing arguments become undefined.

function introduce(name, age) {
  console.log("Name: " + name);
  console.log("Age: " + age);
}

// Passing correct number of arguments
introduce("Alice", 25);
// Output: Name: Alice
//         Age: 25

// Passing fewer arguments
introduce("Bob");
// Output: Name: Bob
//         Age: undefined

// Passing more arguments (extras ignored)
introduce("Charlie", 30, "Engineer", "New York");
// Output: Name: Charlie
//         Age: 30
// The extra arguments are ignored

Named Parameters Pattern

When functions have many parameters, it's helpful to use an object pattern to pass named parameters. This makes function calls clearer and more maintainable.

// Multiple parameters (hard to remember order)
function createUser(name, email, age, city) {
  // ...
}

createUser("Alice", "alice@email.com", 25, "NYC");

// Named parameters (clearer)
function createUser(options) {
  const { name, email, age, city } = options;
  console.log(name, email, age, city);
}

createUser({
  name: "Bob",
  email: "bob@email.com",
  age: 30,
  city: "LA"
});

// Even cleaner with destructuring in parameters
function createUser({ name, email, age, city }) {
  console.log(name, email, age, city);
}

createUser({
  name: "Charlie",
  email: "charlie@email.com",
  age: 35,
  city: "SF"
});

Common Mistakes

• Confusing parameters and arguments: Parameters are defined in the function signature. Arguments are the actual values passed when calling the function.
• Not handling undefined arguments: Use default parameters or check for undefined values if a function might be called with fewer arguments than expected.
• Using 'arguments' in arrow functions: Arrow functions don't have 'arguments'. Use rest parameters (...args) instead.

FAQ

Related Topics