Lesson 2

Greetings, programming enthusiast! In this unit, we're embarking on a thrilling numerical quest, where unidentified bridges connect the islands of data. On these bridges, we'll see hashes and bins, all converging into sets! Throughout our journey, we'll utilize the fundamental concepts of **JavaScript arrays and sets** to formulate an optimal solution. So, fasten your seatbelt and get ready to solve problems!

The task for this unit is to devise a JavaScript function that accepts two arrays containing unique integers and returns another array containing the elements common to both input arrays. This task provides an intriguing perspective on deriving similarities between two data sequences, a scenario commonly encountered in data comparisons and analytics.

For illustration, suppose we're given two arrays:

JavaScript`1const list1 = [1, 2, 3, 5, 8, 13, 21, 34]; 2const list2 = [2, 3, 5, 7, 13, 21, 31];`

The `commonElements(list1, list2)`

function should comb through these arrays of integers and extract the common elements between them.

The expected outcome in this case should be:

JavaScript`1const result = [2, 3, 5, 13, 21];`

Before we delve into the optimized solution, it is instrumental to consider a basic or naïve approach to this problem and analyze its complexity. Often, our first intuitive approach is to iterate over both arrays in nested loops and find common elements. This way, for each element in the first array, we check for its presence in the second array. If it's found, it is added to our result array. Let's see how such a solution would look:

JavaScript`1function commonElementsSlow(list1, list2) { 2 const common = []; // Array to store common elements 3 for (let num1 of list1) { 4 for (let num2 of list2) { 5 if (num1 === num2) { 6 common.push(num1); 7 break; // Break inner loop as we found the number in list2 8 } 9 } 10 } 11 return common; 12} 13 14const list1 = [1, 2, 3, 5, 8, 13, 21, 34]; 15const list2 = [2, 3, 5, 7, 13, 21, 31]; 16const result = commonElementsSlow(list1, list2); 17console.log(result); // Prints: [2, 3, 5, 13, 21]`

However, the problem with this approach lies in its efficiency. Given that the worst-case scenario has us traversing through every element in both arrays, we refer to this as an `O(n * m)`

solution, where `n`

and `m`

represent the number of elements in `list1`

and `list2`

, respectively. For large arrays, this iterative approach tends to be inefficient and slow, making it a less desirable solution for this problem.

The solution we aim to implement in the following section utilizes the `Set`

data structure to optimize our algorithm and reach a solution in markedly less computational time.

Since efficiency is a concern in our previous approach, we want to reduce the time complexity by minimizing the number of operations we perform to reach a solution. The **JavaScript** `Set`

comes to our rescue here.

`Set`

internally uses hash tables, which allow operations like *insertion*, *removal*, and *search* to be performed in average constant time, i.e., `O(1)`

. This provides a significant performance boost compared to the nested loop approach. Our overall time complexity will be reduced to `O(n + m)`

for traversing both arrays and storing their elements into `Set`

s.

Let's proceed to build this optimized solution in the next section.

The initial step in crafting our solution is to transform one of these arrays into a JavaScript `Set`

. The computation of operations, like finding intersections, is highly optimized in `Set`

s. We'll leverage this optimization to our advantage.

JavaScript`1const set1 = new Set(list1);`

Having converted one of our arrays to a `Set`

, we're now ready to identify the common elements between the two datasets. We'll iterate through the other array and check for each element's presence in the `Set`

.

JavaScript`1function commonElements(list1, list2) { 2 const set1 = new Set(list1); 3 4 const common = []; 5 for (let num of list2) { 6 if (set1.has(num)) { 7 common.push(num); 8 } 9 } 10 return common; 11} 12 13const list1 = [1, 2, 3, 5, 8, 13, 21, 34]; 14const list2 = [2, 3, 5, 7, 13, 21, 31]; 15const result = commonElements(list1, list2); 16console.log(result); // Prints: [2, 3, 5, 13, 21]`

The `Set`

in **JavaScript** is not only efficient but also provides a plethora of useful methods for performing various operations. Let's explore some of these practical methods:

The `add`

method allows you to add elements to a `Set`

. If the element already exists, the insertion does nothing. The average time complexity for insertion is `O(1)`

.

JavaScript`1const mySet = new Set([1, 2, 3]); 2mySet.add(4); // O(1) 3mySet.add(2); // O(1) but this will have no effect since 2 is already in the set 4 5console.log(mySet); // Prints: Set { 1, 2, 3, 4 }`

The `delete`

method removes elements from a `Set`

. If the element does not exist, the delete operation does nothing. The average time complexity for removal is `O(1)`

.

JavaScript`1const mySet = new Set([1, 2, 3, 4]); 2mySet.delete(3); // O(1) 3mySet.delete(5); // O(1) but this will have no effect since 5 is not in the set 4 5console.log(mySet); // Prints: Set { 1, 2, 4 }`

The `has`

method checks for the existence of an element in a `Set`

. It returns `true`

if the element is found; otherwise, it returns `false`

. The average time complexity for this operation is `O(1)`

.

JavaScript`1const mySet = new Set([1, 2, 3, 4, 5]); 2console.log(mySet.has(3)); // O(1), prints: true 3console.log(mySet.has(6)); // O(1), prints: false`

The `size`

property returns the number of elements in a `Set`

. The time complexity for this operation is `O(1)`

.

JavaScript`1const mySet = new Set([1, 2, 3, 4, 5]); 2console.log(mySet.size); // O(1), prints: 5`

The `clear`

method removes all elements from a `Set`

. The time complexity for this operation is `O(n)`

, where `n`

is the number of elements in the set, because it must process each stored element.

JavaScript`1const mySet = new Set([1, 2, 3, 4, 5]); 2mySet.clear(); // O(n) 3console.log(mySet.size); // O(1), prints: 0`

Knowing these operations will allow you to use JavaScript `Set`

s to their full potential and help you devise efficient solutions for a variety of problems.

Well done! You've demonstrated a commendable understanding of arrays and `Set`

s, along with their operations in **JavaScript**. It is rare to come across solutions that marry elegance with performance efficiency, but today's task offered us precisely that opportunity, and you've seized it superbly.

Of course, the journey doesn't end here. Now, it's time for you to explore similar challenges in the following practice session. Don't be afraid to experiment with various data sequences and maximize your learning venture. Happy coding!

By following these detailed instructions, you should now have a solid basis for understanding how to operate with `Set`

in JavaScript and how to develop efficient algorithms using them.