What is TypeScript … Spread Operator and How to Use it

What is TypeScript … Spread Operator and How to Use it?

by

What is (…) Spread Operator in TypeScript?

The Spread Operator (…) in TypeScript allows you to expand iterable objects (such as arrays and objects) into individual elements.

It is also know as “rest operator“. It was introduced with ES6 and is also supported in TypeScript.

The syntax for the spread operator is three dots (…), which is also known as an “ellipsis”.

How to use (…) Spread Operator in TypeScript?

Here are some ways we can able to use the (…) Spread Operator:

1. Copying an array

To copy an array, you can use the spread operator. This will create a shallow copy of the original array.

Be cautious with nested objects; the spread operator only performs a shallow copy.

const grades = [85, 90, 95];
const copy = [...grades]; // Creates a shallow copy
console.log(copy);

Output:

[85, 90, 95]

    2. Merging arrays:

    You can merge two arrays using the spread operator. This is an alternative to Array.concat or external libraries like Lodash.

    const grades = [85, 90, 95];
const grades2 = [80, 88, 94];
const merged = [...grades,...grades2];
console.log(merged);

    Output:

    [85, 90, 95, 80, 88, 94]

    3. Creating a new object from an existing object:

    To create a new object from an existing one, use the spread operator.

    const subject1 = { programming: 90, softwaredevelopment: 99 };
const copiedSubject = { ...subject1 };
console.log(copiedSubject)

    Output:

    {
  "programming": 90,
  "softwaredevelopment": 99
}

    4. Merging objects: 

    const subject1 = { programming: 95, softwaredevelopment: 99 };
const subject2 = { webdevelopment: 95, networking:97  };

const copiedSubject = { ...subject1, ...subject2 };
console.log(copiedSubject)

    Output:

    {
  "programming": 95,
  "softwaredevelopment": 99,
  "webdevelopment": 95,
  "networking": 97
}

    5. Using the Spread Operator with Function Calls:

    Pass an array as individual parameters to a function.

    function printGrades(...grades: number[]) {
  console.log(grades);
}
const grades = [90, 95, 99];
printGrades(...grades);

    Output:

     [90, 95, 99]

    Please take note that the spread operator performs a shallow copy, so be cautious when dealing with nested objects or arrays.

    Also it is not the same as the rest operator (which compresses iterable objects into one).

    What is 3 dots in TypeScript?

    The three dots (…) in TypeScript are known as the Spread Operator or Rest Operator:

    Spread Operator:

    When used outside of a function call or declaration, the three dots (…) are known as the spread operator.

    It allows you to spread elements from an array or an object into another array, object, or function call.

    For example:

    const grades = [85, 86, 87, 88];
const additionalGrades = [...grades, 89, 90, 95]; 

console.log(additionalGrades);

    As you can in our given example, the spread operator ...grades spreads the elements of the grades array into the additionalGrades array.

    Rest Operator:

    When used as a function parameter, the three dots (…) represent the rest operator in TypeScript.

    It allows a function to accept an indefinite number of arguments as an array.

    The rest parameter collects the remaining arguments into an array.

    For instance: 

    function sumPrice(...price: number[]): number {
return price.reduce((sum, num) => sum + num, 0);
} 
console.log(sumPrice(50, 60, 70, 80)); // Output: 2600
console.log(sumPrice(90, 100, 150)); // Output: 340

    In the above example, the rest parameter ...price collects all the passed arguments and stores them in an array called numbers.

    The three dots (…) provide a concise and flexible way to work with variable-length arguments or manipulate arrays and objects in TypeScript.

    Conclusion

    The Spread Operator (…) in TypeScript is use to expand iterable objects (such as arrays and objects) into individual elements.

    The syntax for the spread operator is three dots (…), which is also known as an ellipsis.

    I hope this article has given you some insights and helped you understand the TypeScript … Spread Operator.

    If you have any questions or inquiries, please don’t hesitate to leave a comment below.

    Leave a Comment