DEV Community

Cover image for SET in JavaScript (Tutorial for Beginners)
Yashraj
Yashraj

Posted on

SET in JavaScript (Tutorial for Beginners)

Hi there,

Are you looking for a data structure that stores unique values, allows you to insert values, find the total number of values, and delete values? The perfect choice for this is a Set. Many programming languages include a built-in Set data structure, and JavaScript is no exception. Let’s dive deeper into how Sets work.

What is Set ?
The Set is data structure which lets you store unique values of any type, whether primitive values or object references. The set allows insert, delete, update and size operations with O(1) time complexity. Which makes set faster and efficient.

Sets are designed to give fast access times. They are usually implemented in a way that makes looking up items quicker than simply checking each item one by one. The typical implementation can be a hash table (O(1) lookup) or a search tree (O(log(N)) lookup).

Key Points

  • Fast Access: Sets provide quick access to elements.
  • Implementation: Usually implemented using hash tables or search trees.
  • Lookup Time: Average lookup time is better than O(N), often O(1) or O(log(N)).

Basic Methods

  1. add : It will add element to set. If the element is present in set it will do nothing.
  2. has : It will return true if element is present in set otherwise false.
  3. size : It will return the size of set.
  4. delete : It will remove the element from set.
  5. keys : The .keys() method in a JavaScript Set returns a new iterator object that contains the values of the Set in the order they were inserted.

Examples

// 1. Create a new Set and use the .add() method to add elements
const mySet = new Set();
mySet.add(10);
mySet.add(20);
mySet.add(30);

console.log(mySet); // Output: Set { 10, 20, 30 }

// 2. Check if the Set has a specific element using .has() method
console.log(mySet.has(20)); // Output: true
console.log(mySet.has(40)); // Output: false

// 3. Delete an element from the Set using .delete() method
mySet.delete(20);
console.log(mySet); // Output: Set { 10, 30 }

// 4. Iterate over the Set using .keys() method
// In Sets, .keys() and .values() do the same thing
for (const key of mySet.keys()) {
  console.log(key);
}
// Output:
// 10
// 30

// 5. Get the size of the Set using .size property
console.log(mySet.size); // Output: 2

Enter fullscreen mode Exit fullscreen mode

Example of set with leetcode problem :

3. Longest Substring Without Repeating Characters

Given a string s, find the length of the longest substring without repeating characters.

Solution

/**
 * @param {string} s
 * @return {number}
 */
var lengthOfLongestSubstring = function(s) {
    let set = new Set();
    let ans = 0;
    let s_index = 0;
    for (let i = 0; i < s.length; i++) {
        if (!set.has(s[i])) {
            set.add(s[i]);
            ans = Math.max(ans, set.size);
        } else {
            while (s_index < i && set.has(s[i])) {
                set.delete(s[s_index++]);
            }
            set.add(s[i]);
            ans = Math.max(ans, set.size);
        }
    }
    return ans;
};

/* 
Example 1:

Input: s = "abcabcbb"
Output: 3
Explanation: The answer is "abc", with the length of 3.
Example 2:

Input: s = "bbbbb"
Output: 1
Explanation: The answer is "b", with the length of 1.
Example 3:

Input: s = "pwwkew"
Output: 3
Explanation: The answer is "wke", with the length of 3.
Notice that the answer must be a substring, "pwke" is a subsequence and not a substring.
*/
Enter fullscreen mode Exit fullscreen mode

Explanation:
The function lengthOfLongestSubstring uses a sliding window technique with a Set to find the longest substring without repeating characters:

  • Expand Window: Add characters to the Set if they're not already present.
  • Shrink Window: Remove characters from the start of the window when duplicates are found, adjusting the window size.
  • Update Length: Track the maximum length of the substring with unique characters.
  • The approach ensures an efficient O(N) time complexity by processing each character at most twice.

That's it, If you have any doubts or any suggestion or any thing feel free to add comments.

Sources :
MDN (Set)

Top comments (0)