How to use JavaScript Arguments? [SOLVED]

Getting started with JavaScript Arguments

When we create functions, they may take in certain inputs that the code block within them works with to return values. These inputs are called arguments.

JavaScript deals withargumentsin functionsby adding them to a custom object calledarguments. This object works a lot like an array, and we can use it instead of using the name of the parameter. Consider the following code:

function test(a, b, c) {
  console.log("first:", a, arguments[0]);
  console.log("second:", b, arguments[1]);
  console.log("third:", c, arguments[2]);
}
test("fun", "js", "secrets");

This outputs:

first: fun fun
second: js js
third: secrets secrets

When you update one of the parameters, theargument gets changed accordingly. The same goes for the other way around;

function test(a, b, c) {
  a = "nice";
  arguments[1] = "JavaScript";
  console.log("first:", a, arguments[0]);
  console.log("second:", b, arguments[1]);
  console.log("third:", c, arguments[2]);
}
test("fun", "js", "secrets");

This is going to change botharguments[0]andb, as they are related toaandarguments[1], respectively, as you can see in the output:

first: nice nice
second: JavaScript JavaScript
third: secrets secrets

If the function is called with more arguments than were declared in the function signature, this is the way to access them. However, the modern way is to use the rest parameter(…param)instead of theargumentsobject.

Working with arguments in JavaScript

Listing arguments

There are several ways to specify function arguments in JavaScript. The most common way is to list the arguments in the function definition, separated by commas.

function add(x, y) {
    return x + y;
}

In this example, the add function has two arguments: x and y. These arguments are used to perform the addition operation when the function is called.

Here’s an example of how you might call the function above.

let result = add(2, 3);
console.log(result);

Output

5

Using the arguments object

You can also access function arguments using the arguments object, which is an array-like object that contains the values of all the arguments passed to the function. The arguments object is particularly useful when working with functions that can take a variable number of arguments, as it allows you to access all of the arguments passed to the function.

Let’s illustrate the use of the arguments object within JavaScript functions by passing multiple arguments to the sum() function, and then iterating over each to give the summation of the numbers.

function sum() {
    let total = 0;
    for (let i = 0; i < arguments.length; i++) {
        total += arguments[i];
    }
    return total;
}

let result = sum(1, 2, 3, 4, 5);
console.log(result);

Output

15

In this example, the sum function uses the arguments object to iterate over all the arguments passed to the function and calculate their sum.

Using default values

You can also use default values for function arguments in case no value is passed to the function. Let’s use create a hello() function that takes a name argument but

function hello(name = "user") {
    console.log(`Hello, ${name}!`);
}

hello();
hello("David");

Output

Hello, user!
Hello, David!

In this example, the name argument has a default value of ‘user’. If no value is passed to the greet function, it will use the default value. However, if a value is passed to the function, it will use that value instead of the default.

Rest Parameters and the Spread Operator

You can also use the spread operator (...) to pass an array of values as function arguments. Let’s illustrate the use of the spread operator with arrays by recreating the sum() method.

function sum(...numbers) {
    let total = 0;
    for (let i = 0; i < numbers.length; i++) {
        total += numbers[i];
    }
    return total;
}

let result = sum(...[1, 2, 3, 4, 5]);
console.log(result);

Output

15

In this example, the sum function uses the spread operator to destructure the array of numbers into individual arguments, which are then used to calculate the sum.

Many functions and methods accept variablearguments. For example, theMath.maxmethod yields the largest of its arguments, no matter how many:

let result = Math.max(3, 1, 4, 1, 5, 9, 2, 6) // Sets result to 9

What if the values are already in an array?

let numbers = [1, 7, 2, 9]
result = Math.max(numbers) // Yields NaN

That doesn’t work. The Math.max method receives an array with one element - the array [1, 7, 2, 9].

Instead, use the “spread” operator - the ... token placed before an array argument:

result = Math.max(...numbers) // Yields 9

The spread operator spreads out the elements as if they had been provided separately in the call.

Math.max(...numbers) // Spread operator argument in function call
const max = (...values) => { /* body */}  // Rest declaration of parameter variable

Summary

Function arguments are an important part of JavaScript programming, as they allow you to pass values to functions and perform operations on them. By understanding how to use different types of arguments, you can write more flexible and powerful functions. From using spread operators to the arguments object, arguments are easy to use and make functions powerful.

References

The arguments object - JavaScript | MDN (mozilla.org)
Functions - JavaScript | MDN (mozilla.org)