4Geeks logo
4Geeks logo

Bootcamps

Explore our extensive collection of courses designed to help you master various subjects and skills. Whether you're a beginner or an advanced learner, there's something here for everyone.

Academy

Learn live

Join us for our free workshops, webinars, and other events to learn more about our programs and get started on your journey to becoming a developer.

Upcoming live events

Learning library

For all the self-taught geeks out there, here is our content library with most of the learning materials we have produced throughout the years.

It makes sense to start learning by reading and watching videos about fundamentals and how things work.

Full-Stack Software Developer - 16w

Data Science and Machine Learning - 16 wks

Search from all Lessons


LoginGet Started

Weekly Coding Challenge

Every week, we pick a real-life project to build your portfolio and get ready for a job. All projects are built with ChatGPT as co-pilot!

Start the Challenge

Podcast: Code Sets You Free

A tech-culture podcast where you learn to fight the enemies that blocks your way to become a successful professional in tech.

Listen the podcast
← Back to How to's
Edit on Github

How to find the interception of Arrays in Javascript?

Written by:

In the following coding snippet, you will see a quick example of how to get the intersection of two arrays:

1let array1 = [1, 2, 3, 4, 5]; 2let array2 = [3, 4, 5, 6, 7]; 3 4const filteredArray = array1.filter(value => array2.includes(value)); 5 6console.log(filteredArray); // Output: [3, 4, 5]

As a developer, you're often faced with the challenge of comparing arrays to find common elements and perform a specific logic. Array intersection is the process of determining overlapping values in different arrays, it can help you create a new array holding only common and non-duplicated elements. In the following article, we'll see many approaches to understand array intersection using Javascript.

Javascript Array Intersection using filter()

The previous code example shows the filter method in JavaScript that allows the composition of a new array that holds the common elements in two or more arrays based on the criteria specified in the method in question.

Using a similar syntax, you can also check for the difference between arrays to know the elements that are not in myArr1 and myArr2:

1let array1 = [1, 2, 3, 4, 5]; 2let array2 = [3, 4, 5, 6, 7]; 3let difference = myArr1.filter(x => !myArr2.includes(x)); 4 5console.log(difference); // Output = [1,2]

Javascript Array Intersection using a For Loop

This time, we are going to use a for loop to iterate over an array to implement an array intersection and obtain every element in the first array. Then, it uses another method called includes() to verify if each element in the first array is included in second one.

1let myArr1 = [1, 2, 3, 4, 5]; 2let myArr2 = [3, 4, 5, 6, 7]; 3 4// We create new array to store new numbers 5let new_arr = []; 6 7for(let i = 0; i < myArr1.length; i++){ 8 if(myArr2.includes(myArr1[i])){ 9 new_arr.push(myArr1[i]) 10 } 11} 12 13console.log(new_arr); // Output = [3,4,5]

In addition, another way of using a for loop to get the same exact result but without using the includes() method is using a nested for loop.

1let myArr1 = [1, 2, 3, 4, 5]; 2let myArr2 = [3, 4, 5, 6, 7]; 3 4// We create a new array to store the numbers 5let result = []; 6 7for(let i = 0; i < myArr1.length; i++){ 8 for(let j = 0; j < myArr2.length; j++){ 9 if(myArr1[i] === myArr2[j]){ 10 result.push(myArr1[i]); 11 break; 12 } 13 } 14} 15 16console.log(result); // Output = [3,4,5]

Javascript Array Intersection using the Set object

Set objects are collections that do not allow duplicated elements to be stored, hence each element inside will be unique. In this form it is possible to identify the array intersection by removing duplicates.

1let myArr1 = [1, 2, 3, 4, 5]; 2let myArr2 = [3, 4, 5, 6, 7]; 3 4const set1 = new Set(myArr1); 5const set2 = new Set(myArr2); 6 7let intersection = [...set1].filter(element => set2.has(element)); 8 9console.log(intersection); // Output = [3, 4, 5]

Real-world example using the Javascript Array Intersection

Imagine that you are developing a website that will offer a search bar as a component for your visitors to find products easily by typing the name. Your objective is to implement an auto-complete feature that suggests search terms to users based on the keywords that have been looked up by other users in the past while navigating that website. So, how can you use arrays intersection to get this goal?

First, you can store various words that users have looked up in the past.

1// Create an array to store the searched terms 2let searchedKW = ['iphone', 'ipad', 'macbook', 'ipod', 'imac', 'apple', 'watch', 'alexa', 'xiaomi', 'phillps'];

Then, take the input typed by the user in the search bar.

1// Store user input in a variable 2let userInput = "IP";

Having both the array with all the values and the user input, you can apply an array intersection to auto-complete what the user is typing.

1let filteredKW = searchedKW.filter(searchterm => searchterm.toLowerCase().startsWith(userInput.toLowerCase())); 2console.log(filteredKW) // Output = ["iphone", "ipad", "ipod", "imac"];

Lastly, the user (or you) will have the chance to see this auto-complete feature in action which will improve their user experience significantly... All of this is due to this great JavaScript approach that can be easily be implemented when needed.

Conclusion

You could see numerous methods to find the intersection between two or more arrays using filter(), includes(), for loops, and Set objects. Rest assured this knowledge will help you at some point in your developer journey when working with data structures and you can revisit this article as many times as you need to review each explanation and example. You can learn more about arrays in Javascript or other arrays at Javascript like the some method array, all at the 4Geeks Blog.