Functions with rest parameters

We have learned how to use optional and default parameters to increase the number of ways that we can invoke a function. Let's return to the previous example one more time:

function add(foo: number, bar: number, foobar: number = 0): number {
    return foo + bar + foobar;
}

We have learned how to invoke the add function with two or three parameters, but what if we wanted to allow other developers to pass four or five parameters to our function? We would have to add two extra default or optional parameters. And what if we wanted to allow them to pass as many parameters as they need? The solution to this possible scenario is the use of rest parameters. The rest parameter syntax allows us to represent an indefinite number of arguments as an array:

function add(...foo: number[]): number {
    let result = 0;
    for (let i = 0; i < foo.length; i++) {
        result += foo[i];
    }
    return result;

}

As we can see in the preceding code snippet, we have replaced the function parameters foo, bar, and foobar, with just one parameter named foo. Note that the name of the parameter foo is preceded by an ellipsis (a set of three periods—not the actual ellipsis character). A rest parameter must be of an array type, or we will get a compilation error. We can now invoke the add function with as many parameters as we need:

add(); // 0
add(2); // 2
add(2, 2); // 4
add(2, 2, 2); // 6
add(2, 2, 2, 2); // 8
add(2, 2, 2, 2, 2); // 10
add(2, 2, 2, 2, 2, 2); // 12

Although there is no specific limit in the theoretical maximum number of arguments that a function can take, there are, of course, practical limits. These limits are entirely implementation-dependent and, most likely, will also depend exactly on how we are calling the function.

JavaScript functions have a built-in object called the arguments object. This object is available as a local variable named arguments. The arguments variable contains an object such as an array, which includes the arguments used when the function was invoked.

If we examine the JavaScript output, we will notice that TypeScript iterates the arguments object to add the values to the foo variable:

function add() {
    var foo = [];
    for (var _i = 0; _i < arguments.length; _i++) {
        foo[_i - 0] = arguments[_i];
    }
    var result = 0;
    for (var i = 0; i < foo.length; i++) {
        result += foo[i];
    }
    return result;
}

We can argue that this is an extra, unnecessary iteration over the function's parameters. Even though it is hard to imagine this further iteration becoming a performance issue, if you think that this could be a problem in terms of the performance of your application, you may want to consider avoiding the use of rest parameters and use an array as the only parameter of the function instead:

function add(foo: number[]): number {
    let result = 0;
    for (let i = 0; i < foo.length; i++) {
        result += foo[i];
    }
    return result;
}

The preceding function takes an array of numbers as its only parameter. The invocation API will be a little bit different from the rest parameters, but we will effectively avoid the extra iteration over the function's argument list:

add(); // Error, expected 1 argument, but got 0.
add(2); // Error, '2' is not assignable to parameter of type 'number[]'.
add(2, 2); // Error, expected 1 argument, but got 2.
add(2, 2, 2); // Error, expected 1 argument, but got 3.
add([]); // returns 0
add([2]); // returns 2
add([2, 2]); // returns 4
add([2, 2, 2]); // returns 6

The following table summarizes the parameter-related features that we have explored in this section:

 

In the following section, we are going to learn about function overloading.