{"id":2444,"date":"2022-07-24T17:30:40","date_gmt":"2022-07-24T17:30:40","guid":{"rendered":"https:\/\/gyanipandit.com\/programming\/?p=2444"},"modified":"2022-07-24T17:30:43","modified_gmt":"2022-07-24T17:30:43","slug":"javascript-set-add","status":"publish","type":"post","link":"https:\/\/gyanipandit.com\/programming\/javascript-set-add\/","title":{"rendered":"JavaScript Set Add"},"content":{"rendered":"<p style=\"text-align: center;\"><strong>Adding some values to the set<\/strong><\/p>\n<p>We have created the set now, and it is very easy. But now, we are more interested in adding some values to the set. We can do multiple things for this, and we are going to head towards it like we can give some iterable as input to the Set constructor, or we can make use of a method, called as add, to add some element to the set.<\/p>\n<h3 style=\"text-align: center;\">JavaScript Set Add Method<\/h3>\n<p>So, while creating the set, if we passed some iterable to the Set constructor, we are going to get those values in the set. For example, let&#8217;s consider the below code, in which, we are giving an array to the Set constructor &#8211;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1766 size-full\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/06\/Adding-some-values-to-the-set.jpg\" alt=\"\" width=\"1262\" height=\"260\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/06\/Adding-some-values-to-the-set.jpg 1262w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/06\/Adding-some-values-to-the-set-300x62.jpg 300w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/06\/Adding-some-values-to-the-set-1024x211.jpg 1024w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/06\/Adding-some-values-to-the-set-768x158.jpg 768w\" sizes=\"auto, (max-width: 1262px) 100vw, 1262px\" \/><\/p>\n<p>As you can see, we have given an array to the Set constructor. But, the given array contains duplicate values, and we have seen that the set can have only unique values, so the duplicate values won&#8217;t be considered, and so, in the set, only the elements 1, 2, 3, and 4 would be added. Let&#8217;s have a look at the output now &#8211;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1767 size-full\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/06\/Adding-some-values-to-the-set-1.jpg\" alt=\"\" width=\"1600\" height=\"450\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/06\/Adding-some-values-to-the-set-1.jpg 1600w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/06\/Adding-some-values-to-the-set-1-300x84.jpg 300w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/06\/Adding-some-values-to-the-set-1-1024x288.jpg 1024w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/06\/Adding-some-values-to-the-set-1-768x216.jpg 768w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/06\/Adding-some-values-to-the-set-1-1536x432.jpg 1536w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<p>As you can see, we got 4 elements into the set, namely 1, 2, 3, and 4. The other elements were repeated, so they were not added. There is one more way, to add some element to the set, which is, using the add method.<\/p>\n<p>Let&#8217;s now try using the add method here &#8211;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1768 size-full\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/06\/Adding-some-values-to-the-set-2.jpg\" alt=\"\" width=\"1243\" height=\"319\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/06\/Adding-some-values-to-the-set-2.jpg 1243w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/06\/Adding-some-values-to-the-set-2-300x77.jpg 300w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/06\/Adding-some-values-to-the-set-2-1024x263.jpg 1024w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/06\/Adding-some-values-to-the-set-2-768x197.jpg 768w\" sizes=\"auto, (max-width: 1243px) 100vw, 1243px\" \/><\/p>\n<p>As you can see, we first created an empty set, and then we added some elements to the set using the add method. Now, if you observe carefully, we are attempting to add 10 for two times in the set, which is out of the rules for the set. So, we won&#8217;t be able to do so. Here is the output &#8211;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1769 size-full\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/06\/Adding-some-values-to-the-set-3.jpg\" alt=\"\" width=\"1600\" height=\"494\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/06\/Adding-some-values-to-the-set-3.jpg 1600w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/06\/Adding-some-values-to-the-set-3-300x93.jpg 300w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/06\/Adding-some-values-to-the-set-3-1024x316.jpg 1024w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/06\/Adding-some-values-to-the-set-3-768x237.jpg 768w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/06\/Adding-some-values-to-the-set-3-1536x474.jpg 1536w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<p>As you can see, the 10 was not added again, since it would get repeated then. We have got 5 elements into our set.<\/p>\n<p>Also, we can add different types of data to the set. Here is an example, just so that you understand how can we add different data to the set.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1770 size-full\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/06\/Adding-some-values-to-the-set-4.jpg\" alt=\"\" width=\"1281\" height=\"364\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/06\/Adding-some-values-to-the-set-4.jpg 1281w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/06\/Adding-some-values-to-the-set-4-300x85.jpg 300w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/06\/Adding-some-values-to-the-set-4-1024x291.jpg 1024w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/06\/Adding-some-values-to-the-set-4-768x218.jpg 768w\" sizes=\"auto, (max-width: 1281px) 100vw, 1281px\" \/><\/p>\n<p>As you can see, we are able to add different types of data to the set. This is what the output looks like now &#8211;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1771 size-full\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/06\/Adding-some-values-to-the-set-5.jpg\" alt=\"\" width=\"1600\" height=\"518\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/06\/Adding-some-values-to-the-set-5.jpg 1600w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/06\/Adding-some-values-to-the-set-5-300x97.jpg 300w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/06\/Adding-some-values-to-the-set-5-1024x332.jpg 1024w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/06\/Adding-some-values-to-the-set-5-768x249.jpg 768w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/06\/Adding-some-values-to-the-set-5-1536x497.jpg 1536w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<p>So, this states that we can add data of different types to our set.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Adding some values to the set We have created the set now, and it is very easy. But now, we are more interested in adding some values to the set. We can do multiple things for this, and we are going to head towards it like we can give some iterable as input to the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[14,15],"class_list":{"0":"post-2444","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-javascript-tutorial","7":"tag-javascript","8":"tag-javascript-tutorial"},"_links":{"self":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/2444","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/comments?post=2444"}],"version-history":[{"count":2,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/2444\/revisions"}],"predecessor-version":[{"id":2449,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/2444\/revisions\/2449"}],"wp:attachment":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/media?parent=2444"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/categories?post=2444"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/tags?post=2444"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}