Understanding symmetric difference in arrays

Welcome to the intriguing world of algorithms! In this post, we're diving into a fascinating algorithm named 'Symmetric Difference' of arrays. I came across this algorithm when I going through Freecodecamp exercises. If you haven't solved this algorithm, I highly encourage you to pause reading and try to solve the algorithm first.

Let's first try to understand what is meant by symmetric difference. At its core, the symmetric difference is a mathematical operation that, when applied to arrays, reveals a unique set of elements. Specifically, it identifies those elements that are present in either one of the arrays but not in both. For example, for sets A = {1, 2, 3} and B = {2, 3, 4}, A △ B = {1, 4}.

This concept becomes more complex when extended beyond two arrays. Our goal today is to unravel this complexity and understand how to effectively find the symmetric difference across multiple arrays. So to evaluate an expression involving symmetric differences among three elements (A △ B △ C), you must complete one operation at a time. Thus, for sets A and B above, and C = {2, 3}, A △ B △ C = (A △ B) △ C = {1, 4} △ {2, 3} = {1, 2, 3, 4}. You have to understand clearly that we are not doing the comparison for all arrays at once.

Let's try to solve this problem with JavaScript. As inputs, there can be 2 or n number of arrays, and as output, we get the symmetric difference in one single array. The following is a solution to this problem. There can be much more efficient solutions to this problem. If you know a better solution please add a comment.

function sym() {
  const args = [...arguments];

  function symDiff(arrayOne, arrayTwo) {
    const result = [];

    arrayOne.forEach((item) => {
      if (arrayTwo.indexOf(item) < 0 && result.indexOf(item) < 0) {
        result.push(item);
      }
    });

    arrayTwo.forEach((item) => {
      if (arrayOne.indexOf(item) < 0 && result.indexOf(item) < 0) {
        result.push(item);
      }
    });

    return result;
  }

  return args.reduce(symDiff);
}


sym([1, 2, 3], [2, 3, 4], [2, 3])

The sym function is a JavaScript function designed to calculate the symmetric difference between multiple arrays. When the function is called, it takes any number of arrays as arguments. Initially, it converts these arguments into an actual array named args using the spread syntax, making it easier to manipulate them using array methods. Inside sym, there's a helper function named symDiff, which is responsible for computing the symmetric difference between two arrays at a time. This function works by iterating through each element of the first array, adding elements to a result array if they are not found in the second array and are not already in the result array. It then repeats this process for the second array. The result is an array of elements that are unique to each of the two arrays being compared.

The sym function then uses the reduce method on the args array. The reduce method applies the symDiff function across the args array, starting with the first two arrays and then consecutively applying the symmetric difference to the cumulative result and the next array in args. This approach allows the sym function to compute the symmetric difference across all provided arrays, resulting in a single array that represents the symmetric difference of all the input arrays.

Hopefully, this deep dive into its inner workings has provided clarity on how symmetric differences are calculated in JavaScript. If you have any questions or if there's a specific part of this process you'd like to discuss further, please feel free to leave a comment below. I'm always here to help and love engaging with readers about these fascinating programming concepts!