Difference Between Spread Operator and Array.concat() in Typescript
Last Updated :
05 May, 2025
The spread operator and concat() method both are used to add elements to an array. But they are different from each other in many ways. Let us discuss the difference between both of them in detail.
Spread Operator
The spread operator creates a new array by merging the elements of the passed arrays or the values. It is denoted by three dots(...). It unpacks the elements of the passed arrays and creates a new array with the elements of both the passed arrays.
Syntax:
const newArrayName = [...arr1, ...arr2];
Features:
- The spread operator can be used to copy an array into another array.
- It can concatenate or merge the objects and arrays.
- It can be used to pass the n array elements as n arguments to the function.
- It simplified the array and object destructuring.
Example: The below code example implements the spread operator in TypeScript.
JavaScript
const arr1: number[] = [1, 2, 3];
const arr2: string[] =
["TypeScript", "GeeksforGeeks", "JavaScript"];
const mergedArray: (number | string)[] =
[...arr1, ...arr2];
console.log(mergedArray);
const newMergedArray: (number | string)[] =
[...mergedArray, 4, 5, "GFG"];
console.log(newMergedArray);
Output:
[1, 2, 3, "TypeScript", "GeeksforGeeks", "JavaScript"]
[1, 2, 3, "TypeScript", "GeeksforGeeks", "JavaScript", 4, 5, "GFG"]
The concat method is used to create a new array with the elements of the passed arrays or the values. It adds the elements at any index of the array.
Features:
- It allows to passing of multiple arrays of values as an argument to it.
- It can merge the nested arrays as well to create a flattened array.
- It allows to merge the arrays with mixed or different data types.
- It also works efficiently with the arrays of generic types in TypeScript.
- It can be used in a chain of methods with other methods as well.
Syntax:
const newArrayName = arr1.concat(arr2);
Example: The below code example implements the concat() method in TypeScript.
JavaScript
const arr1: number[] = [1, 2, 3];
const arr2: string[] =
["TypeScript", "GeeksforGeeks", "JavaScript"];
const mergedArray: (number | string)[] =
arr1.concat(arr2);
console.log(mergedArray);
const newMergedArray: (number | string)[] =
mergedArray.concat(4, 5, ["GFG"]);
console.log(newMergedArray);
Output:
[1, 2, 3, "TypeScript", "GeeksforGeeks", "JavaScript"]
[1, 2, 3, "TypeScript", "GeeksforGeeks", "JavaScript", 4, 5, "GFG"]
Difference between the Spread operator and concat() method
|
The spread operator is implemented using the three dots syntax(...).
| The concat method is implemented using the concat() syntax.
|
It unpacks all the elements of the passed arrays and creates a new array of the merged values of passed arrays.
| It returns a new array after concatenate all the elements of the array and the values passed as the arguments to it.
|
It can also be used with the objects.
| It is a array specific method and can be used with arrays only.
|
It can be used to destructure the arrays and the objects.
| It can not be used to destructure either arrays or abjects.
|
It preserves the type of the each element in the passed arrays
| It converts the elements into string and then concat the arrays to return new array.
|
Similar Reads
TypeScript Tutorial TypeScript is a superset of JavaScript that adds extra features like static typing, interfaces, enums, and more. Essentially, TypeScript is JavaScript with additional syntax for defining types, making it a powerful tool for building scalable and maintainable applications.Static typing allows you to
8 min read
Difference between TypeScript and JavaScript Ever wondered about the difference between JavaScript and TypeScript? If you're into web development, knowing these two languages is super important. They might seem alike, but they're actually pretty different and can affect how you code and build stuff online.In this article, we'll break down the
4 min read
TypeScript Interview Questions and Answers TypeScript, a robust, statically typed superset of JavaScript, has become a go-to language for building scalable and maintainable applications. Developed by Microsoft, it enhances JavaScript by adding static typing and modern ECMAScript features, enabling developers to catch errors early and improve
15+ min read
TypeScript Map TypeScript Map is a collection that stores key-value pairs, where keys and values can be of any type. It maintains the insertion order of keys and provides methods to add, retrieve, check, remove, and clear entries, ensuring efficient management of key-value data.Creating a MapA map can be created a
3 min read
Typescript Set A Set in TypeScript is a bunch of unique values. It is part of the ECMAScript 2015 (ES6) standard and is implemented as a native object in JavaScript.Unlike arrays, sets do not allow duplicate elements, making them useful for storing collections of unique items. TypeScript provides strong typing for
3 min read
TypeScript Array map() Method The Array.map() is an inbuilt TypeScript function that creates a new array with the results of calling a provided function on every element in the array.Syntax:array.map(callback[, thisObject])Parameters: This method accepts two parameters as mentioned above and described below: callback: This param
2 min read
Introduction to TypeScript TypeScript is a syntactic superset of JavaScript that adds optional static typing, making it easier to write and maintain large-scale applications.Allows developers to catch errors during development rather than at runtime, improving code reliability.Enhances code readability and maintainability wit
5 min read
How to Format Date in TypeScript ? Formatting dates is important especially when displaying them to the users or working with date-related data. TypeScript provides various ways to achieve this. Below are the methods to format the date data type in TypeScript:Table of ContentUsing toLocaleString() methodUsing toLocaleDateString() met
3 min read
Data types in TypeScript In TypeScript, a data type defines the kind of values a variable can hold, ensuring type safety and enhancing code clarity.Primitive Types: Basic types like number, string, boolean, null, undefined, and symbol.Object Types: Complex structures including arrays, classes, interfaces, and functions.Prim
3 min read
How do I Remove an Array Item in TypeScript? In this article, we will learn about the different ways of removing an item from an array in TypeScript. In TypeScript, an array can be defined using union typing if it contains items of different types. We can use the following methods to remove items from a TypeScript array:Table of ContentUsing t
4 min read