Function Arguments, Parameters & Argument Object in JavaScript

In this tutorial learn about the Function Arguments, Parameters, and Argument Objects in JavaScript. We learned how to create a function in JavaScript. The parameters are the way we pass values to a JavaScript function. We learn the difference between argument and parameters, setting Default Parameters & learn about Argument Object.

Difference Between Arguments & Parameters

Most people, use the term Parameters & Arguments interchangeably, but there exists a subtle difference between them.

Function Parameters

Parameters are the names that we list in the function’s declaration.

We declare Parameters when we create the function. They are part of the function declaration. The following is the syntax for declaring a function. Here param contains the list of parameters (comma-separated) inside parentheses.

In the following addNum function, a & b are parameters.

Function Arguments

The argument is the value that we pass to a function

We provide the argument to the function when we invoke it. In the following example, 10 & 25 are the arguments to the function.

When we invoke the function, JavaScript creates new variables using the name provided in the Parameters. It then initializes its value using the arguments.

For Example when we invoke addNum(10,25)

  1. JavaScript creates a new variable a & b. These variables are local to the function. We cannot access them from the outside of the function
  2. Copies the values 10 & 25 to a & b. Note that primitives are copied by Value & objects are copied by Reference. Refer to Pass By Value & Pass By Reference article
  3. Invokes the function

Parameter Rules

There are few rules that one should aware of.

You can define any number of Parameters

You can define a JavaScript function with zero to any number of parameters.

The number of Arguments does not have to match Parameters

The JavaScript function does not throw an error if you send more or less number of arguments than parameters

For Example. the addNum function declares two parameters. But we invoke it using 0 to 3 Arguments. JavaScript does not throw any errors.

Instead, it initializes the parameters with undefined, if the parameter does not receive a value.

It ignores the arguments, If we send more arguments than parameters

Default Parameters

We can also configure parameters with default values while declaring the function using an assignment operator

In the example below, we assign 0 to both the a & b parameters. Now if we do not send any argument to them, they are initialized with 0

You can read more about JavaScript Default Parameters

Parameters are evaluated left to right

The JavaScript Parameters are evaluated from left to right

In the following code, we use the return values from the function in the arguments. The JavaScript will evaluate the fun1 first and then fun2

The Arguments Object

We use the parameters to access the arguments inside the function. But there is another way to do this. Using the Arguments Object. It is a pretty useful feature if the function receives a random no of arguments

The Arguments object contains the values of the arguments in an Array-like object. Note that it is not an Array but an Array-like object.

For Example, take a look at the following example. The addNumbers declares three parameters. We can access all of them using arguments array

You can also refer to arguments as addNumbers.arguments[0]. But this feature is deprecated. So it is no longer recommended. Though some browsers still support it for compatibility purposes

The following example shows how we can make use of the arguments object. The following function addNumbers can add any number of numbers.

The arguments.length property returns the number of arguments.

Pass by Reference & Pass by Value

The JavaScript types are either value types or reference types. The value types are string, number, bigint, boolean, undefined, symbol, and null. Rest all or reference types

The value types are passed by value. In the following example, a is a value type. We pass it to someFunc. When we invoke someFunc(a), the JavaScript creates a new variable b (parameter of someFunc) copies the values of a to it. Whatever the changes you make to b will not affect the original variable a

In the following example the person is an object, hence a reference type. The person variable does not contain the object but it contains the reference to the object.

When we invoke doSomething(person), the JavaScript creates a new variable obj and copies the content from person variable. Now both obj and person points to the same object. Hence if you make any changes to the obj in the function it will also affect the person as both of them refers to the same object.

For more detailed explanation read Pass by Value & Pass by Reference

Leave a Comment

Your email address will not be published.

Scroll to Top