📘 JavaScript Function Parameters

✅ 1. What Are Function Parameters?

• Parameters are placeholders in a function definition.
• Arguments are the actual values passed to the function when it’s called.

jsCopyEditfunction greet(name) { // 'name' is a parameter
  console.log("Hello, " + name);
}

greet("Alice"); // "Alice" is an argument

📌 2. Multiple Parameters

You can pass multiple values:

jsCopyEditfunction add(a, b) {
  return a + b;
}

console.log(add(5, 3)); // 8

📌 3. Default Parameters (ES6)

Provide default values in case arguments are missing:

jsCopyEditfunction greet(name = "Guest") {
  console.log("Hello, " + name);
}

greet();        // Hello, Guest
greet("Sam");   // Hello, Sam

📌 4. Rest Parameters (...args)

Use this when you don’t know how many arguments will be passed.

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

console.log(sum(1, 2, 3, 4)); // 10

...args turns all arguments into an array.

📌 5. Arguments Object (Old Way)

All non-arrow functions have access to the special arguments object.

jsCopyEditfunction showArgs() {
  console.log(arguments);
}

showArgs(1, 2, 3); // [Arguments] { '0': 1, '1': 2, '2': 3 }

⚠️ Not available in arrow functions.

📌 6. Destructuring Parameters

You can unpack objects or arrays in function parameters.

a. Object Destructuring

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

displayUser({ name: "Alice", age: 25 }); // Alice is 25 years old.

b. Array Destructuring

jsCopyEditfunction printFirstTwo([first, second]) {
  console.log(first, second);
}

printFirstTwo([10, 20, 30]); // 10 20

📌 7. Named vs Positional Parameters

• Positional parameters rely on the order of arguments.
• Named parameters (via objects) improve clarity and flexibility.

jsCopyEditfunction createUser({ name, age }) {
  return `${name} (${age})`;
}

console.log(createUser({ age: 30, name: "Tom" })); // Tom (30)

📌 8. Combining All Types

jsCopyEditfunction userInfo(name = "Guest", ...roles) {
  console.log(`Name: ${name}`);
  console.log(`Roles: ${roles.join(", ")}`);
}

userInfo("Alice", "admin", "editor");
// Name: Alice
// Roles: admin, editor

🧪 Practice Challenges

1. Create a function greet(name = "Friend") that returns Hello, <name>!
2. Write a sumAll(...nums) that sums any number of arguments.
3. Write a function that destructures an object like { title, year }.

🧠 Summary Table

🚀 Bonus Tip

In arrow functions, you cannot use arguments, but you can use rest parameters:

jsCopyEditconst sum = (...nums) => nums.reduce((a, b) => a + b);

Would you like this tutorial as a:

• 📄 Downloadable PDF?
• 💻 Live code playground?
• 🧠 Quiz or flashcard set?