JavaScript Function Parameters

In JavaScript, function parameters refer to the variables designated as arguments during the invocation of a function. These parameters serve the purpose of transmitting data into the function, enabling it to carry out processing on that data.

In JavaScript, function parameters can be provided either by value or by reference.

• ✅ Passed by value: When a parameter is supplied by value, the function generates a duplicate of the parameter and utilizes this copy to manipulate the data.
• ✅ Passed by reference: When a parameter is supplied by reference, the function operates on the original parameter itself, meaning that any modifications made to the parameter will be evident in the original variable.

In a function declaration in JavaScript, the parameters are specified within the parentheses.

Syntax

The structure of a function parameter in JavaScript is outlined below:

function functionName (parameter1, parameter2, parameter3){
    //code to be executed
}

Rules of Parameter

In JavaScript, when defining functions, it is not necessary to indicate the data types of the parameters.

In JavaScript, it is not required to define the data type for parameters within functions.

The JavaScript compiler does not perform type verification on the parameters supplied to functions.

Example

function greet(name) {  // 'name' is a parameter
  console.log("Hello, " + name + "!");
 }
 greet("Alice"); // "Alice" is an argument passed to the 'name' parameter
 greet("Bob"); // "Bob" is an argument passed to the 'name' parameter

Output:

Hello, Alice!
Hello, Bob!

Default Parameter

In JavaScript, default parameters enable the initialization of named parameters with predefined values in the event that no value is provided or if the value is explicitly set to undefined. You can assign a default value to a parameter during the function declaration by utilizing the equal sign (=) followed by the desired value.

Example

function f(x = 1, y) {
  return [x, y];
}
f(); // [1, undefined]
f(2); // [2, undefined]

Function Rest Parameter

Rest parameters in JavaScript, a feature that was introduced with ES6, enable the passing of a variable number of arguments to a function.

In JavaScript, rest parameters allow for the transmission of an indefinite number of arguments to a function, and they provide a way to handle these arguments in the form of an array.

Example

function sum(...numbers) {
  let total = 0;
  for (let num of numbers) {
    total += num;
  }
  return total;
}
console.log(sum(1, 2));            // Output: 3
console.log(sum(5, 10, 15));       // Output: 30
console.log(sum(100, 200, 300, 50)); // Output: 650

Output:

3
30
650

Argument Object

In JavaScript, every function is equipped with an arguments object. This object holds all the arguments that are passed when the function is called, formatted as an array. You can iterate through this array in JavaScript to access each argument, even if the parameters of the function have not been explicitly defined.

Example

function exampleFunction() {
  console.log("Number of arguments:", arguments.length);
  for (let i = 0; i < arguments.length; i++) {
    console.log("Argument " + i + ":", arguments[i]);
  }
}
exampleFunction("Welcome to our tutorial", 321, true);
// Expected Output:
// Number of arguments: 3
// Argument 0: Welcome to our tutorial
// Argument 1: 321
// Argument 2: true	
exampleFunction("Only one argument");
// Expected Output:
// Number of arguments: 1
// Argument 0: Only one argument
exampleFunction();
// Expected Output:
// Number of arguments: 0

Output:

Number of arguments: 3
Argument 0: Welcome to our tutorial
Argument 1: 321
Argument 2: true
Number of arguments: 1
Argument 0: Only one argument
Number of arguments: 0

Passing Arguments by Value

In a JavaScript function, when you transmit an argument by value during a function call, the actual value of the argument is transferred to the parameter defined in the function. Consequently, when you modify the function parameter, it does not affect the original value of the argument.

Example

function changeValue(num) {
  console.log("Inside function, before change:", num); // Output: 10
  num = 20;
  console.log("Inside function, after change:", num);  // Output: 20
}
let myNumber = 10;
console.log("Before function call:", myNumber); // Output: 10
changeValue(myNumber);
console.log("After function call:", myNumber);  // Output: 10

Output:

Before function call: 10
Inside function, before change: 10
Inside function, after change: 20
After function call: 10

Passing Arguments by Reference

In a JavaScript function, when objects are supplied as arguments, the function transmits the reference address of the object to the function definition. Consequently, it is often stated that the arguments are passed by reference.

Altering a property of an object within the scope of a function will result in that alteration being visible outside of the function as well.

Example

function updatePerson(person) {
    person.age += 1; // Modifies the original object
    console.log("Inside function:", person);
}
let personObj = { name: "Alice", age: 25 };
console.log("Before function call:", personObj);
updatePerson(personObj);
console.log("After function call:", personObj);

Output:

Before function call: { name: 'Alice', age: 25 }
Inside function: { name: 'Alice', age: 26 }
After function call: { name: 'Alice', age: 26 }