Javascript Function Parameters and Arguments

Function Parameters and Arguments

What are Parameters and Arguments in a Function?

In JavaScript, parameters and arguments are how functions receive and use input values.

A Parameter is a placeholder for a value (like a variable) inside the function definition.

An Argument is the actual value you pass to the function when calling it.

Example:

function greet(name) {
  console.log("Hello, " + name + "!");
}

Here, name is a parameter and it’s used inside the function.

greet("Shefali");

Here, "Shefali" is the argument and it's the real value you're passing to the function.

To put it simply, parameters are like empty containers, and arguments fill them with actual values.

Defining Parameters

When you create a function, you can define parameters to tell the function what kind of input it should expect.

Syntax:

function functionName(parameter) {
  // use parameter inside the function
}

Example:

function greet(name) {
  console.log("Hello, " + name + "!");
}

Here,

name is a parameter.
It will hold the value you pass when calling the function.

You can have zero, one, or more parameters separated by commas. For example: (name), (name, age).

function add(a, b) {
  console.log(a + b);
}

Here,

a and b are parameters.
You can now call add(2, 3) and it will print 5.

Passing Arguments

When you call a function, you give it actual values that replace the function’s parameters, these values are called arguments.

Syntax:

function greet(name) {
  console.log("Hello, " + name + "!");
}
 
greet("Shefali");

Here,

name is the parameter (placeholder).
"Shefali" is the argument (actual value).

You can pass multiple arguments like this:

function add(a, b) {
  console.log(a + b);
}
 
add(2, 3); // Output: 5

Here,

a and b are parameters.
2 and 3 are arguments passed into the function.

Note:

The order of the arguments matters that means the first argument goes to the first parameter, and so on.
If you pass fewer arguments than parameters, the missing parameters become undefined. If you pass more arguments, the extra ones are ignored (unless using rest parameters).

Default Parameters

If you want a function to work with a default value if no argument is passed. Then you can use the default parameters.

Default parameters provide fallback values, and they are used only when no argument is passed.

Example:

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

Here,

If you pass a name, then it uses that.
If you don’t pass anything, then it uses "Guest".

greet("Shefali"); // Output: Hello, Shefali!
greet();          // Output: Hello, Guest!

Why use default parameters?

To avoid errors when arguments are missing.
To make your functions more flexible and safe.

Rest Parameters (...args)

When you don’t know how many arguments a function will get, then you can use rest parameters to collect all extra arguments into one array.

Rest parameters use ... before a name.

They are useful for functions that take many or an unknown number of inputs.

Syntax:

function sum(...numbers) {
  console.log(numbers);
}

Here,

...numbers is the rest parameter.
It collects all arguments into an array called numbers.

Example:

function sum(...numbers) {
  let total = 0;
  for (let num of numbers) {
    total += num;
  }
  console.log(total);
}
 
sum(1, 2, 3); // Output: 6
sum(5, 10, 15, 20); // Output: 50

Here,

The function sum uses ...numbers, which means it can take any number of arguments and groups them into an array called numbers.
It creates a variable total and starts it at 0.
Then, it goes through each number inside the numbers array one by one.
For each number (num), it adds it to total.
After adding all numbers, it prints the total sum.
sum(1, 2, 3); adds 1 + 2 + 3, so it prints 6.
sum(5, 10, 15, 20); adds 5 + 10 + 15 + 20, so it prints 50.

Why use rest parameters?

When you want to accept any number of arguments.
You don’t have to predefine how many inputs the function takes.

Arguments Object in Regular Functions

In regular functions, JavaScript provides you a special built-in object called arguments.

It automatically stores all the values (arguments) passed to the function, even if the function has no parameters.

You can think of arguments as a box that holds all the inputs, in the order they were given. It looks like an array, but it's not exactly an array.

For example:

function showArgs() {
  console.log(arguments);
}
 
showArgs(1, "hello", true);
 
// Output: [1, "hello", true]

Here,

The function showArgs doesn’t have any parameters.
But when you call showArgs(1, "hello", true), JavaScript still puts those values into the arguments object.
So, arguments holds all 3 values, 1, "hello", and true, in the same order they were passed to the function.

Some Important Points

arguments works only in regular functions, not in arrow functions.
It looks like an array, but it’s not a real array.
It doesn’t have array methods like .forEach or .map directly.
You can convert it to a real array if needed.

How to Convert arguments to a Real Array

If you want to use array methods on it, you can convert it to a real array like this:

function sum() {
  let args = Array.from(arguments);
  let total = 0;
  for (let num of args) {
    total += num;
  }
  console.log(total);
}
 
sum(1, 2, 3); // Output: 6

Here,

A function named sum is created. It doesn’t have any parameters.
Even though there are no parameters, you can still access the passed values using the arguments object.
Array.from(arguments) converts the special arguments object into a real array.
Now args becomes [1, 2, 3].
You start with a variable total set to 0. This will store the sum.
Then this for...of loop goes through each number in the args array. First 1 is added to total, then 2, then 3.
After the loop finishes, total is 6, so it prints 6 in the console.