{"id":340,"date":"2023-11-11T06:45:07","date_gmt":"2023-11-11T06:45:07","guid":{"rendered":"https:\/\/favtutor.com\/articles\/?p=340"},"modified":"2023-11-14T06:56:52","modified_gmt":"2023-11-14T06:56:52","slug":"set-to-array-javascript","status":"publish","type":"post","link":"https:\/\/favtutor.com\/articles\/set-to-array-javascript\/","title":{"rendered":"Convert Set to Array in JavaScript (3 Easy Methods)"},"content":{"rendered":"\n

JavaScript offers a powerful data structure called Set, which allows for the storage of unique elements without duplication. However, there are situations where you may need to convert them to an Array to perform specific operations that cannot be done directly on a Set. In this article, we will learn how to change Set to Array in JavaScript.<\/p>\n\n\n\n

What are Arrays in JavaScript?<\/strong><\/h3>\n\n\n\n

Arrays are linear data structures that store homogenous data, i.e. same type of data. An array can contain all integers, all characters, or all strings as the elements. An array can not be a combination of integers and characters, or integers or strings. Let us look at how to declare and use arrays in Javascript:<\/p>\n\n\n\n

\/\/declaring an integers array\nlet marks = [98, 75, 62, 82, 97, 53];\n\n\/\/declaring a characters array\nlet grades=['A', 'B', 'A', '0'];\n\n\/\/declaring a strings array\nlet favtutors=[\"John\", \"Joshua\", \"Alex\", \"Kate\"];\n\n\/\/declaring a boolean array\nlet present=[true, false, false, true];<\/code><\/pre>\n\n\n\n
In the code above, we have made integers array marks containing all integers, a characters array grade consisting of all elements as characters, a strings array ‘favtutors’ consisting of all strings, and a boolean present array consisting of all boolean values.<\/p>\n\n\n\n
You can check out this article if you want to learn how to Convert a String to an Array in JavaScript.<\/span><\/a><\/p>\n\n\n\n
What are Sets in JavaScript?<\/strong><\/h3>\n\n\n\n
A set is a data type that stores unique values. No duplicate values are found in a set. It can hold either unique integers, unique characters, or unique strings. In a set, one cannot access any element with the help of an index. Here\u2019s an example of how to create an empty set in JavaScript:<\/p>\n\n\n\n
\/\/creating an empty set in JavaScript\nlet ids=new Set();\n\n\/\/printing the empty set\nconsole.log(ids);<\/pre><\/div>\n\n\n\n
Output<\/strong>:<\/p>\n\n\n\n
Set(0) { }<\/code><\/pre>\n\n\n\n
Here 0 represents the number of values in the set. The { } represents the empty set.<\/p>\n\n\n\n
You can also create a set with some unique values:<\/p>\n\n\n\n
\/\/creating a set with some values\nlet ids=new Set([1,2,3]);\n\n\/\/printing the set\nconsole.log(ids);<\/pre><\/div>\n\n\n\n
Output<\/strong>:<\/p>\n\n\n\n
Set(3) { 1, 2, 3 } <\/code><\/pre>\n\n\n\n
Here 3 represents the number of elements in the set. We have obtained the desired result.<\/p>\n\n\n\n
3 Methods to Convert Set to Array<\/strong><\/h2>\n\n\n\n
In this section, we will discuss various techniques on how to convert a set to array in JavaScript:<\/p>\n\n\n\n
1) Using the Array.from() Method<\/strong><\/h3>\n\n\n\n
The Array.from() method is a built-in function in JavaScript that creates a new Array from an iterable or array-like object. It takes an iterable or array-like object as its parameter. It returns a new Array with the same elements as the input iterable object<\/strong>. <\/strong>This method supports the mapping function for element transformation and provides high clarity and readability.<\/p>\n\n\n\n
To create a set from an array, simply make a set with desired elements and pass it as a parameter in Array.from() method. This will convert the set to an array. Store the array in a new variable. Let us see an example of the same:<\/p>\n\n\n\n
\/\/creating a set\nlet ids=new Set([1,2,3,4,5]);\n\n\/\/printing the set\nconsole.log(ids);\n\n\/\/converting set to an array using Array.from() method\nlet arrFromSet=Array.from(ids);\n\n\/\/printing the array\nconsole.log(arrFromSet);<\/pre><\/div>\n\n\n\n
Output<\/strong>:<\/p>\n\n\n\n
Set(5) { 1, 2, 3, 4, 5 }\n[ 1, 2, 3, 4, 5 ]<\/code><\/pre>\n\n\n\n
In this example, we convert the set to an array using the Array.from() method. We have first printed the set and then the array which is formed from the set itself.  We have obtained the desired output. <\/p>\n\n\n\n
Although this method is simple, clear, readable, and efficient, it requires more code than the spread operator. Let us learn how to use the spread operator.<\/p>\n\n\n\n
2) Using the Spread Operator<\/strong><\/h3>\n\n\n\n
Another method of converting set to array in JavaScript is by using the spread operator (…). The spread operator allows us to expand elements from an iterable object, such as a Set, into a new Array. <\/strong>This method is concise and straightforward to implement.<\/p>\n\n\n\n
To create a set from an array, simply make a set with desired elements. Use the spread operator (…) followed by the Set name inside square brackets to spread the elements into a new Array. Finally, store the array in a new variable. Let us see an example of the same:<\/p>\n\n\n\n
\/\/creating a set\nlet ids=new Set([101, 102, 103]);\n\n\/\/printing the set\nconsole.log(ids);\n\n\/\/converting set to an array using the spread operator\nlet arrFromSet=[...ids];\n\n\/\/printing the array\nconsole.log(arrFromSet);<\/pre><\/div>\n\n\n\n
Output:<\/strong><\/p>\n\n\n\n
Set(3) { 101, 102, 103 }\n[ 101, 102, 103 ]<\/code><\/pre>\n\n\n\n
In this example, we convert the set to an array using the spread operator. We have first printed the set and then the array which is formed from the set itself.  We have obtained the desired output. <\/p>\n\n\n\n
Although this method is concise and easy to use, it does not support the mapping function during conversion.<\/p>\n\n\n\n
3) Using the forEach() Method<\/strong><\/h3>\n\n\n\n
Another method for converting a set to an array is the forEach() method. The forEach() is a built-in function in JavaScript that allows you to execute a provided function once for each element in an array or Set. <\/strong>We can iterate over the elements of a set using the forEach() method and push them into a new Array.<\/p>\n\n\n\n
So, firstly create a Set with the desired elements. Use the forEach() method on the Set to iterate over it and provide a function that pushes each element into the Array. Store the array into a new variable. Let us see an example of the same.<\/p>\n\n\n\n
\/\/creating a set\nlet ids=new Set([101, 102, 103]);\n\n\/\/printing the set\nconsole.log(ids);\n\n\/\/declaring an empty array\nlet arrFromSet=[];\n\n\/\/using the forEach() method\nids.forEach(element=>arrFromSet.push(element));\n\n\/\/printing the array\nconsole.log(arrFromSet);<\/pre><\/div>\n\n\n\n
Output<\/strong>:<\/p>\n\n\n\n
Set(3) { 101, 102, 103 }\n[ 101, 102, 103 ]<\/code><\/pre>\n\n\n\n
In this example, we convert the set to array using the forEach() method. We have first printed the set and then the array which is formed from the set itself.\u00a0 We have obtained the desired output.<\/p>\n\n\n\n
This method allows greater control during conversion as we are able to perform additional operations on each element. But, Unlike previous methods, we have to perform the push operation in an array manually. <\/p>\n\n\n\n
Comparison of the Three Methods<\/strong><\/h3>\n\n\n\n
Now that we have gone through various methods of converting a set to an array in JavaScript, it\u2019s time we compare them based on different factors.<\/p>\n\n\n\n
Method<\/strong><\/td>Complexity<\/strong><\/td>Support for Mapping Function<\/strong><\/td>Clarity and Readability<\/strong><\/td><\/tr>
Array.from()<\/td>O(n)<\/td>Yes<\/td>High<\/td><\/tr>
Spread Operator<\/td>O(n)<\/td>No<\/td>High<\/td><\/tr>
forEach() Method<\/td>O(n)<\/td>No<\/td>Medium<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
The choice of method depends on your specific requirements and coding style. <\/p>\n\n\n\n
    \n
  • If one needs to apply a mapping function to each element during conversion, the Array.from() method is preferred.
    <\/li>\n\n\n\n
  • The spread operator is chosen when simplicity and conciseness are important.
    <\/li>\n\n\n\n
  • When one needs more control over each element to apply different operations, forEach() method is preferred.<\/li>\n<\/ul>\n\n\n\n
    Conclusion<\/strong><\/h2>\n\n\n\n
    In this article, we discussed the various techniques to convert a JavaScript Set to Array, using Array.from(), forEach() method, and the spread operator. We also provided a comparison of the methods along with their time complexities.\u00a0<\/p>\n","protected":false},"excerpt":{"rendered":"
    Learn about the different methods to convert a set to an array in JavaScript using Array.from(), forEach() method, and the spread operator.<\/p>\n","protected":false},"author":9,"featured_media":341,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jnews-multi-image_gallery":[],"jnews_single_post":null,"jnews_primary_category":{"id":"","hide":""},"footnotes":""},"categories":[9],"tags":[11,13,28],"class_list":["post-340","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development","tag-javascript","tag-javascript-array","tag-javascript-set"],"_links":{"self":[{"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/posts\/340","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/comments?post=340"}],"version-history":[{"count":2,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/posts\/340\/revisions"}],"predecessor-version":[{"id":417,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/posts\/340\/revisions\/417"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/media\/341"}],"wp:attachment":[{"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/media?parent=340"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/categories?post=340"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/tags?post=340"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}