JavaScript: The arguments object

The objective of this post is to explain how to use the JavaScript arguments object inside a function, when we pass more arguments that the ones declared in the prototype.

Introduction

A very interesting characteristic of JavaScript is that we can supply more or less parameters to a function than the ones in its declaration [1]. So, when we supply less arguments than in the function declaration, the ones declared will have a value of “undefined” [1].

On the other hand, if we supply more, the additional ones don’t have any effect, but they can be accessed through a special object called arguments, which is a local variable to all functions [2].

It’s important to consider that the arguments is not an array [2], although it pretty much behaves like one.

This is very useful since we can work with functions that receive a variable number of arguments, although we also need to be careful in order to not have problems with our programs.

The tests shown in this article were performed on Visual Studio Code, with the code runner extension.


The code

So, to test this functionality, we will declare a very simple function that receives as input an argument. We will call argument to this input parameter. The first thing we will do is printing the received argument, by calling the log method on the console object.

Next, we will iterate all the elements of the arguments object and print them to the console. Note that although this is not an array, it has the length property [2], so we can know when to stop our loop.

Besides that, with a behavior similar to an array, we can use square brackets to access the elements of the arguments object, as we will do in the code bellow.

function oneArgFunction(argument) {

    console.log("Received as argument: " + argument );

    for (i=0; i< arguments.length; i++){
        console.log("argument nº " + i + " :" + arguments[i]);
    }

}

So, we will start our first test by calling the function with just one parameter, as specified in its signature. We will pass it a simple string.

console.log("--------- 1 arg------------");
oneArgFunction("Hello!");

As you can see from the result of the execution in figure 1, the supplied argument defined in the signature is also a part of the arguments object, since it is printed twice.

JavaScript calling a function

Figure 1 – Running a function with the declared number of arguments.

Next, we will call the function supplying two additional parameters.  We will use two other strings, as shown in the code bellow. Note that, although we are passing more parameters than the ones defined as input of our function, the code will execute and no warning will be given.

console.log("--------multiple args------");
oneArgFunction("Hello!", "here's another arg", "and a third one");

So, as we can see by figure 2, we can access the first argument, which is declared in the function signature, without being affected by supplying more arguments to the function. Also, we can access the 2 additional parameters arguments by iterating the arguments object.

JavaScript calling a function with more arguments

Figure 2 – Supplying additional arguments to a function.

Note that we can also pass different types of additional arguments. In the code bellow, we will pass an additional string and an additional object. Again, no error or warning occurs and the code executes fine.

console.log("--Additional object arg----");
var obj = { prop1: "property 1", prop2: "property 2" };
oneArgFunction("Hello!","here's another arg", obj );

As shown in figure 3, we can also access the additional string and object in the arguments object.

JavaScript calling a function with additional args

Figure 3 – Supplying different types of additional arguments.

As a final example, we will run the function without any argument, to confirm that we will get an undefined value in the parameter we declared in the signature of our test function. Nevertheless, this will again not generate an error or warning and the code will execute.

console.log("--No args----");
oneArgFunction( );

As can be seen in figure 4,  the undefined value gets printed, as expected. Also, note that this time the arguments object will not be iterated since it has no elements.

JavaScript function undefined argument

Figure 4 – Calling the function without arguments.

Bellow is the complete code, which you can copy and paste for testing. Although the tests were performed on Visual Studio Code, it should work fine in other environments.

function oneArgFunction(argument) {

    console.log("Received as argument: " + argument );

    for (i=0; i< arguments.length; i++){
        console.log("argument nº " + i + ": " + arguments[i]);
    }

}

console.log("--------- 1 arg------------");
oneArgFunction("Hello!");

console.log("--------multiple args------");
oneArgFunction("Hello!", "here's another arg", "and a third one");

console.log("--Additional object arg----");
var obj = { prop1: "property 1", prop2: "property 2" };
oneArgFunction("Hello!","here's another arg", obj );

console.log("--No args----");
oneArgFunction( );


Related content


References

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s