New methods appear in Set JavaScript
Hi all! I'm Kirill Mylnikov, frontend developer at Usetech. Today I want to share information about new methods that will soon appear in the collection Set in JavaScript.
Set was added in the ES2015 standard, but always seemed a bit limited. It was possible to work with it only by adding, deleting and checking the presence of elements. However, when working with multiple collections or comparing them, it was necessary to write additional functions. But now we are being prepared with new methods that will greatly simplify working with Set and allow us to avoid the need to come up with our own functions.
Let's dive into the world of Set together and remember what it is, what methods are currently available, and what new methods might appear in the next specification. We will look at everything with practical examples.
Set – a collection for storing unique values of any type, where each value can appear only once.
Basic methods:
add(value) – adds a value to the collection (if it already exists, then does nothing)
delete(value) – removes a value from the collection
has(value) – returns true if the value is present in the collection, false otherwise
clear() – deletes all values in the collection
size – returns the number of elements in the collection
Let's now look at all these methods in practice.
Let's create a collection new Set()
const fruits = new Set(["orange", "apple", "banana"]);Now let's use the property add add new values:
fruits.add("grape")fruits.add("apple")Please note the property “apple” which is already in the collection. In this case, it will be ignored and this can be checked using the method size.
fruits.size //результат будет - 4, а не 5We can now check whether an element is present in the collection using the method has(value)
fruits.has("orange") // результат trueNow let's remove the element, display the size of the collection and immediately understand the method clear()which removes all values:
fruits.delete("orange")
fruits.size //результат будет - 3
fruits.clear()
fruits.size //результат будет - 0What new methods can we expect in the Set collection?
Now we come to the most important thing. New methods are presented to your attention:
union – Accepts and returns a new collection that contains elements present in one or both of the original collections.
Example:
const evens = new Set([1, 2, 3, 4]);
const squares = new Set([1, 5, 3, 6]);
evens.union(squares); // Set(6) { 1, 2, 3, 4, 5, 6 } intersection – Accepts and returns a new collection that contains only those elements that are present in both original collections.
Example:
const evens = new Set([1, 2, 3, 4]);
const squares = new Set([1, 5, 3, 6]);
evens.intersection(squares); // Set(6) { 1, 3 }difference – We get the difference between the first and second collections and vice versa, cutting off duplicate values.
Example:
const frontend = new Set(["JavaScript", "HTML", "CSS"]);
const backend = new Set(["Python", "Java", "JavaScript"]);
const onlyFrontEnd = frontend.difference(backend);// => Set {"HTML", "CSS"}
const onlyBackEnd = backend.difference(frontend);// => Set {"Python", "Java"}symmetricDifference – Accepts and returns a new collection containing elements that are present in either the first collection or the second, but not both.
Example:
const frontend = new Set(["JavaScript", "HTML", "CSS"]);
const backend = new Set(["Python", "Java", "JavaScript", "PHP"]);
const onlyFrontend = frontend.symmetricDifference(backend);
// => Set {"HTML", "CSS", "Python", "Java", "PHP"}
const onlyBackend = backend.symmetricDifference(frontend);
// => Set {"Python", "Java", "PHP", "HTML", "CSS" }isSubsetOf – Takes a collection and returns a boolean value depending on whether all the elements of the first collection are present in the second.
Example:
const frontendAll = new Set(["JavaScript", "HTML", "CSS", "React"]);
const frontedBase = new Set(["HTML", "CSS"]);
frontedBase.isSubsetOf(frontendAll);// => true
frontendAll.isSubsetOf(frontedBase);// => falseisSupersetOf – Takes a collection and returns a boolean value depending on whether all the elements of the second collection are present in the first.
Example:
const frontendAll = new Set(["JavaScript", "HTML", "CSS", "React"]);
const frontedBase = new Set(["HTML", "CSS"]);
frontedBase.isSupersetOf(frontendAll);// => false
frontendAll.isSupersetOf(frontedBase);// => trueisDisjointFrom – Takes a collection and returns a boolean value depending on whether there are overlaps between the collections.
Example:
const frontendLanguage = new Set(["JavaScript", "HTML", "CSS", "React"]);
const backendLanguage = new Set(["Java", "PHP", "JavaScript", "Ruby"]);
const compiledLanguage = new Set(["Java", "С++", "Go"]);
compiledLanguage.isDisjointFrom(frontendLanguage);// => true
backendLanguage.isDisjointFrom(frontendLanguage);// => falseAs we see that there are no intersections between compiledLanguage and frontendLanguage, we return true, otherwise false.
In conclusion, new methods in Set JavaScript has a positive impact on its functionality and expands its ability to work with collections. This means that it will become much easier and more convenient for developers to work with Set, without spending a lot of time and effort on writing additional code. We will wait for updates and implement these methods in our projects.
Support:
Currently these methods work in Chrome 122 and Safari 17. We hope to add them in ES2024.
Materials:
Learn JS – https://learn.javascript.ru/map-set
MDN – https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set
GitHub – https://github.com/zloirock/core-js#new-set-methods
