Function parameters are the names listed in the function definition, acting as placeholders for the values that a function will receive. Arguments are the actual values passed to the function when it is invoked. This mechanism allows functions to be reusable and operate on different data inputs.
Example 1: Positional Parameters
// Define a function with two parameters
function greet(name, greeting) {
console.log(greeting + ', ' + name + '!');
}
// Call the function with two arguments
greet('Alice', 'Hello'); // Output: Hello, Alice!
Explanation
The greet function is defined with two parameters: name and greeting. When the function is called, the arguments 'Alice' and 'Hello' are passed to these parameters in the order they are listed.
Example 2: Default Parameters
// Define a function with a default parameter value
function sayHi(name, greeting = 'Hi') {
console.log(greeting + ', ' + name + '!');
}
// Call the function with and without the second argument
sayHi('Bob'); // Output: Hi, Bob!
sayHi('Charlie', 'Good morning'); // Output: Good morning, Charlie!
Explanation
The greeting parameter has a default value of 'Hi'. If the function is called without providing a value for greeting, it automatically uses the default value.
Example 3: The arguments Object
// A function that can accept any number of arguments
function sumAll() {
let total = 0;
for (let i = 0; i < arguments.length; i++) {
total += arguments[i];
}
return total;
}
// Call the function with multiple arguments
console.log(sumAll(1, 2, 3, 4)); // Output: 10
Explanation
The arguments object is an array-like object available inside all non-arrow functions. It contains the value of the arguments passed to that function, allowing for a variable number of inputs.
Example 4: Rest Parameters
// Using rest parameters to gather extra arguments
function multiply(multiplier, ...numbers) {
return numbers.map(num => num * multiplier);
}
// Call the function with a multiplier and a list of numbers
console.log(multiply(2, 1, 5, 10)); // Output: [2, 10, 20]
Explanation
The rest parameter syntax (...numbers) allows a function to accept an indefinite number of arguments as an array. In this case, it collects all arguments after the first one into the numbers array.
Example 5: Pass-by-Value (Primitives)
// Primitive types are passed by value
function updateNumber(val) {
val = val + 10;
console.log('Inside function:', val); // Output: Inside function: 15
}
let myNumber = 5;
updateNumber(myNumber);
console.log('Outside function:', myNumber); // Output: Outside function: 5
Explanation
When a primitive type like a number is passed as an argument, the function receives a copy of the value. Modifying the parameter inside the function does not affect the original variable outside of it.
Example 6: Pass-by-Reference (Objects)
// Objects are passed by reference (the reference is passed by value)
function updateUser(user) {
user.name = 'David';
}
let myUser = { name: 'Eve' };
updateUser(myUser);
console.log(myUser.name); // Output: David
Explanation
When an object is passed as an argument, the function receives a reference to the original object. Therefore, changes made to the object's properties within the function will affect the original object.
Example 7: Destructuring Parameters
// Using destructuring to unpack object properties
function printUserDetails({ name, age }) {
console.log(`${name} is ${age} years old.`);
}
const person = { name: 'Frank', age: 30 };
printUserDetails(person); // Output: Frank is 30 years old.
Explanation
Function parameters can use destructuring to conveniently extract properties from an object passed as an argument. This makes the code cleaner and more readable by directly accessing the required properties.