Intersection and Difference of Arrays in JavaScript

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.

Getting Intersection of Arrays

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

  • Not considering duplicates

    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);
    

Getting Difference of Arrays

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

  • Not considering duplicates

    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);
    
Union of Arrays in JavaScript