Rest Parameters

Introduction

In TypeScript, as in JavaScript, rest parameters provide a way to represent an indefinite number of arguments as an array. This feature is particularly useful when you want to write functions that can accept any number of inputs without explicitly defining each one.

Rest parameters are denoted by three dots (...) followed by the parameter name. They must be the last parameter in the function's parameter list, allowing all remaining arguments to be captured into an array.

Concept

The primary purpose of rest parameters is to simplify functions that need to handle a variable number of arguments. Instead of using arguments or manually collecting arguments into an array, you can use rest parameters for cleaner and more readable code.

Here’s how it works:

• The three dots (...) indicate that the parameter should collect all remaining arguments into an array.
• This array can then be used like any other array within the function.

Examples

Basic Usage

Let's start with a simple example where we create a function to sum up any number of numbers:

1function sum(...numbers: number[]): number {
2return numbers.reduce((acc, num) => acc + num, 0);
3}
4 
5console.log(sum(1, 2, 3)); // Output: 6
6console.log(sum(4, 5, 6, 7, 8)); // Output: 30

In this example:

• The sum function uses a rest parameter numbers, which collects all the arguments passed to it into an array.
• We then use the reduce method to sum up all the numbers in the array.

Combining with Regular Parameters

Rest parameters can be combined with regular parameters, but they must always come last. Here’s how you can do it:

1function greet(greeting: string, ...names: string[]): void {
2names.forEach(name => console.log(`${greeting}, ${name}!`));
3}
4 
5greet('Hello', 'Alice', 'Bob', 'Charlie');
6// Output:
7// Hello, Alice!
8// Hello, Bob!
9// Hello, Charlie!

In this example:

• The greet function takes a greeting parameter and a rest parameter names.
• It then iterates over the names array and logs a greeting message for each name.

Using Rest Parameters in Arrow Functions

Rest parameters can also be used in arrow functions, providing similar flexibility:

1const multiply = (...numbers: number[]): number => {
2return numbers.reduce((acc, num) => acc * num, 1);
3};
4 
5console.log(multiply(2, 3)); // Output: 6
6console.log(multiply(4, 5, 6)); // Output: 120

In this example:

• The multiply arrow function uses a rest parameter to collect numbers and multiplies them together.

What's Next?

Now that you understand how to use rest parameters in functions, the next topic is Arrow Functions. Arrow functions provide a more concise syntax for writing functions and have some unique behaviors regarding this. We'll explore these differences and when to use arrow functions effectively in TypeScript.