Intersection and Difference of Arrays in JavaScript

This tutorial explains how to find intersection and difference of two or more arrays. It can be done using the array filter() method along with some new ES6 features.

Concepts and Methods Used

• Array.filter() : Like the name says, filter() method filters out elements from the array. The logic to filter out is given through a callback function, and each array element is passed to this function. If the element is to be kept, it should return true. When the element needs to be filtered out, it should return false. The elements that are kept are returned as an array.

  // filter in elements greater than 10
  
  var arr = [1, 5, 12, 5, 10, 11, 2];
  
  var passed = arr.filter(function(element) {
  	if(element > 10)
  		return true;
  	else
  		false;
  });
  
  // [12, 11]
  console.log(passed);
  

  More on filter() method : Array.filter()

• Set : A Set object is used to store data, just like an array. However Set can hold only unique elements. Set can be created from an array, and is doing so, automatically eliminates duplicates from it.

  // creating Set from an array
  var set_ob = new Set([1, 2, 3, 4, 1, 3]);
  
  // [1, 2, 3, 4]
  console.log(set_ob);
  

  More on filter() method : An Introduction to Sets in JavaScript

• Spread operator : The spread operator ... can expand an array to its individual elements. Consider this as looping over the array and getting elements, but in a shorter syntax.

  Spread can also expand a Set object.

  // duplicating an array using spread operator
  
  var arr = [1, 2, 3, 4];
  
  var new_arr = [ ...arr ];
  
  // [1, 2, 3, 4]
  console.log(new_arr);
  

  More on spread operator : Javascript Spread Operator

Knowing the background concepts we move on to calculating intersection/difference of two arrays. Same concepts can be applied for multiple arrays also.

How to Get Intersection of Arrays

Intersection of arrays refers to a new array that holds common elements from all input arrays.

• Allowing duplicates, if present :

  var array_first = [1, 2, 3, 4];
  var array_second = [3, 4, 5, 6];
  
  var array_intersection = array_first.filter(function(x) {
  	// checking second array contains the element "x"
  	if(array_second.indexOf(x) != -1)
  		return true;
  	else
  		return false;
  });
  
  // [3, 4]
  console.log(array_intersection);
  

• Eliminating duplicates : When any or both the arrays contain duplicate elements, we use a Set to eliminate duplicates.

  var array_first = [3, 3, 3, 4];
  var array_second = [3, 4, 4, 4];
  
  // intersection will contain duplicates
  var array_intersection = array_first.filter(function(x) {
  	if(array_second.indexOf(x) !=- 1)
  		return true;
  	else
  		return false;
  });
  
  // create Set that will eliminite duplicates
  // convert Set to array using spread
  var filtered_array_intersection = [...new Set(array_intersection)];
  
  //[3, 4]
  console.log(filtered_array_intersection);
  

How to Get Difference of Arrays

Difference of arrays refers to a new array containing elements of array A that are not present in array B.

• Allowing duplicates, if present :

  var array_first = [1, 2, 3, 4];
  var array_second = [3, 4, 5, 6];
  
  var array_difference = array_first.filter(function(x) {
  	// checking second array does not contain element "x"
  	if(array_second.indexOf(x) == -1)
  		return true;
  	else
  		return false;
  });
  
  //[1, 2]
  console.log(array_difference);
  

• Eliminating duplicates :

  var array_first = [1, 1, 1, 2, 2, 2, 2, 3, 4];
  var array_second = [3, 4, 5, 6];
  
  var array_difference = [];
  
  // difference will contain duplicates
  var array_difference = array_first.filter(function(x) {
  	if(array_second.indexOf(x) == -1)
  		return true;
  	else
  		return false;
  });
  
  // create Set to eliminate duplicates
  // convert Set to array using spread
  var filtered_array_difference = [...new Set(array_difference)];
  
  //[1, 2]
  console.log(filtered_array_difference);