How to Convert a Set to an Array in TypeScript ?
A Set in TypeScript is used to create a particular type of list that does not contain duplicate elements. If any element is repeated more than once it will automatically remove the duplicate existence and consider it only once in the list. In this article, we will convert these types of lists into arrays that accept duplicate values as well.
These are the following methods to convert a set to an Array:
Table of Content
- Using the Array.from() method
- Using the spread operator
- Using the forEach() iterator method
- Using a custom conversion function
- Using the Array.concat() Method
Using the Array.from() method
The Array.from() method returns an array from an entity that has the length property and is iterable. As Set is an iterable entity, we can use this method to convert it into an array.
Syntax:
const newArrayName = Array.from(setName);
Example: The below code example explains the use of the Array.from() method to convert a Set into an array.
const testSet = new Set<number>();
for (let i = 1; i <= 5; i++) {
testSet.add(i);
}
console.log(testSet);
const arrayFromSet: number[] =
Array.from(testSet);
console.log(arrayFromSet);
arrayFromSet[5] = 5;
console.log(arrayFromSet);
Output:
Set (5) {1, 2, 3, 4, 5}
[1, 2, 3, 4, 5]
[1, 2, 3, 4, 5, 5]
Using the spread operator
The spread operator can also be used to convert a Set into an array using the three dots(…) syntax followed by the name of the Set.
Syntax:
const newArrayName = [...setName];
Example: The below code example implements the spread operator to convert a set to an array in TypeScript.
const testSet = new Set<number>();
for (let i = 1; i <= 5; i++) {
testSet.add(i);
}
console.log(testSet);
const arrayFromSet: number[] = [...testSet];
console.log(arrayFromSet);
arrayFromSet[5] = 5;
console.log(arrayFromSet);
Output:
Set (5) {1, 2, 3, 4, 5}
[1, 2, 3, 4, 5]
[1, 2, 3, 4, 5, 5]
Using the forEach() iterator method
We can use the forEach() loop to iterate through all the elements of the Set and then push each one of them into an array using the Array.push() method.
Syntax:
setName.forEach((val)=>{
arrayName.push(val);
});
Example: The below code example converts a Set into an array in TypeScript using forEach() loop method.
const testSet = new Set<number>();
for (let i = 1; i <= 5; i++) {
testSet.add(i);
}
console.log(testSet);
const arrayFromSet: number[] = [];
testSet.forEach((setVal) => {
arrayFromSet.push(setVal)
});
console.log(arrayFromSet);
arrayFromSet[5] = 5;
console.log(arrayFromSet);
Output:
Set (5) {1, 2, 3, 4, 5}
[1, 2, 3, 4, 5]
[1, 2, 3, 4, 5, 5]
Using a custom conversion function
We can define a custom function that iterates over the Set and manually adds each element to an array.
Example: In this example we defines a function setToArray to convert a Set to an Array by iterating over the Set and pushing its elements into an array. It then demonstrates this conversion with logging.
// Define a function to convert a Set to an Array
function setToArray<T>(set: Set<T>): T[] {
const array: T[] = [];
set.forEach(value => array.push(value));
return array;
}
// Define a Set
const testSet = new Set<number>();
for (let i = 1; i <= 5; i++) {
testSet.add(i);
}
console.log("Set:", testSet);
// Convert Set to Array using the custom function
const arrayFromSet: number[] = setToArray(testSet);
console.log("Array from Set:", arrayFromSet);
Output:
"Set:", Set (5) {1, 2, 3, 4, 5}
"Array from Set:", [1, 2, 3, 4, 5]
Using the Array.concat() Method
Another approach to convert a Set into an array in TypeScript, while ensuring simplicity and clarity, is using the Array.concat() method. This method can effectively take an empty array and concatenate it with the elements of the Set, producing an array as a result.
Example: The Array.concat() method is typically used to merge two or more arrays into one. However, by combining it with the spread operator within the argument, you can use it to convert a Set into an array. This method ensures that the original set remains unchanged while producing a new array containing all elements of the Set.
// Initialize a Set with some values
const setName = new Set([1, 2, 3, 4, 5]);
// Convert Set to Array using Array.concat() and spread operator
const newArrayName = [].concat(...setName);
// Output the results
console.log("Set:", setName);
console.log("Array from Set:", newArrayName);
Output
Set: Set(5) { 1, 2, 3, 4, 5 }
Array from Set: [ 1, 2, 3, 4, 5 ]
This method not only converts the Set into an array but does so in a way that’s easily readable and understandable, making it an excellent choice for scenarios where clarity is as important as functionality.