JavaScript Function Parameters
Function parameters are the names listed in the function definition. Function arguments are the actual values passed when the function is called. JavaScript is flexible with parameters — you can have defaults, rest parameters, destructuring, and the special arguments object.
Parameters vs Arguments
Parameters are variables in the function declaration. Arguments are the values you pass when calling the function. If fewer arguments are passed than parameters defined, the missing ones become undefined.
// 'a' and 'b' are parameters
function add(a, b) {
console.log(`a = ${a}, b = ${b}`);
return a + b;
}
// 5 and 3 are arguments
console.log(add(5, 3));
// Missing argument becomes undefined
console.log(add(5));
// Extra arguments are ignored
console.log(add(5, 3, 100));Default Parameters
Default parameters let you specify a default value for a parameter if no argument is passed (or if undefined is passed). This was introduced in ES6 and replaces the old pattern of using || for defaults.
function greet(name = "Guest", greeting = "Hello") {
console.log(`${greeting}, ${name}!`);
}
greet("Alice", "Hi");
greet("Bob");
greet();
// Default can be an expression
function createId(prefix = "ID", num = Date.now()) {
return `${prefix}-${num}`;
}
console.log(createId("USR", 42));
console.log(createId());
// Default can reference earlier params
function rect(width, height = width) {
console.log(`${width} x ${height} = ${width * height}`);
}
rect(5, 10);
rect(5);Rest Parameters (...args)
The rest parameter syntax (...) allows a function to accept an indefinite number of arguments as an array. It must be the last parameter. Unlike the arguments object, rest parameters produce a real Array.
function sum(...numbers) {
console.log(numbers);
console.log(Array.isArray(numbers));
return numbers.reduce((total, n) => total + n, 0);
}
console.log(sum(1, 2, 3));
console.log(sum(10, 20, 30, 40, 50));
// Rest after regular parameters
function logArgs(first, second, ...rest) {
console.log("First:", first);
console.log("Second:", second);
console.log("Rest:", rest);
}
logArgs("a", "b", "c", "d", "e");The arguments Object
The arguments object is an array-like object available inside all non-arrow functions. It contains all the arguments passed to the function. It has a length property but lacks array methods like forEach or map.
function showArgs() {
console.log("Length:", arguments.length);
for (let i = 0; i < arguments.length; i++) {
console.log(`Arg ${i}:`, arguments[i]);
}
}
showArgs("hello", 42, true);
// arguments is NOT a real array
function notArray() {
console.log(Array.isArray(arguments));
// Convert to a real array
let args = Array.from(arguments);
console.log(Array.isArray(args));
console.log(args);
}
notArray(1, 2, 3);
// Arrow functions do NOT have arguments
// Use rest params instead: (...args) => {}Parameter Destructuring
You can use destructuring syntax in function parameters to extract values from objects or arrays passed as arguments. This makes functions with many options much cleaner.
// Object destructuring in parameters
function createUser({ name, age, role = "user" }) {
console.log(`${name}, ${age}, ${role}`);
}
createUser({ name: "Alice", age: 30 });
createUser({ name: "Bob", age: 25, role: "admin" });
// Array destructuring in parameters
function getFirst([first, second]) {
console.log("First:", first);
console.log("Second:", second);
}
getFirst([10, 20, 30]);
// Nested destructuring
function displayAddress({ name, address: { city, country } }) {
console.log(`${name} lives in ${city}, ${country}`);
}
displayAddress({
name: "Alice",
address: { city: "New York", country: "USA" }
});| Feature | Syntax | Description |
|---|---|---|
| Regular params | function(a, b) | Named parameters |
| Default params | function(a = 1) | Fallback if undefined |
| Rest params | function(...args) | Remaining args as array |
| arguments object | arguments[0] | Array-like, all args |
| Object destructuring | function({ a, b }) | Extract object properties |
| Array destructuring | function([a, b]) | Extract array elements |