Diff Two Arrays Problem

JavaScript
1

Hi FCC! I’m struggling with the Diff Two Arrays problem from the Intermediate Algorithm Scripting section. I used the filter method and it passed, but I wanted to try another way and it’s not working and I’m unsure why. What am I missing here?
My code:

function diffArray(arr1, arr2) {
  let newArr = arr1.concat(arr2);
  for (let i = 0; i < newArr.length; i++) {
    if (arr1.includes(newArr[i]) && arr2.includes(newArr[i])) {
      newArr.splice(i, 1);
    }
  }
  return newArr;
}

diffArray([1, 2, 3, 5], [1, 2, 3, 4, 5]);

The question description:

Compare two arrays and return a new array with any items only found in one of the two given arrays, but not both. In other words, return the symmetric difference of the two arrays.

Link to the problem:
https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/diff-two-arrays

Thank you!

1 Like
2

avoid using splice since it alters the original array and you can see that your code is not working properly by console logging like this console.log(diffArray([1, 2, 3, 5], [1, 2, 3, 4, 5])).
the reason is at first i=0 both arrays have the same number at that index,so removed it with splice but the second number is no more at index 1 in the newArr instead it is at index 0,and the i value is incremented by 1. so it is unchecked,so will present in the array.so if you keep going with this idea you will understand 5 will be in the array to.what i suggest is to use slice instead because it will not alter the original array.if you want still to use splice consider this case.

1 Like
3

The best way I think to understand this is to log the iteration. Because the code is running a splice, it is mutating the array, i.e. it’s changing the data in it, and it’s doing so each loop. but the ‘i’ value, is increasing each loop. This won’t be an issue with filter as it’ll not change the array you’re working from, it’ll only return a new one. Look at the code below for a visualisation of a way to debug the problem and then the console logs of what the problem is:

function diffArray(arr1, arr2) {
  let newArr = arr1.concat(arr2);
  for (let i = 0; i < newArr.length; i++) {
    if (arr1.includes(newArr[i]) && arr2.includes(newArr[i])) {
      console.log('iteration:', i, 'arr:',newArr)
      newArr.splice(i, 1);
    }
  }
  return newArr;
}

Console logs:

iteration: 1 arr: [ 1, 2, 3, 5, 1, 2, 3, 4, 5 ]
iteration: 2 arr: [ 2, 3, 5, 1, 2, 3, 4, 5 ]
iteration: 3 arr: [ 2, 5, 1, 2, 3, 4, 5 ]
iteration: 4 arr: [ 2, 5, 2, 3, 4, 5 ]
iteration: 5 arr: [ 2, 5, 2, 4, 5 ]
[ 2, 5, 2, 4 ]

You can see because the data is mutating, the data being gone through is not being correctly searched by the code.

I can’t remember if FCC touches much on this but a good way to solve this problem would be with a Set. They’re a nice way to remove duplicate values in code and then you could just search the original arrays with includes. It’s kind of similar to what I think you wanted to do for example:

function diffArray(arr1, arr2) {
  const result = [];
  const items = new Set([...arr1, ...arr2]);
//'spread' the arrays into one, basically make one array.
    items.forEach(item=> {
   //loop over the items in the set/unified array
      if(!arr1.includes(item) || !arr2.includes(item)){
     //if the current item/element in the loop is not in either original array we push it to the result variable
      result.push(item);
      }})
      return result;
}

Here’s the MDN docs on Sets, definitely worth checking out :ok_hand:t2::

Happy to answer any follow up questions, I hope that all made sense :slightly_smiling_face:

1 Like
4

you might have to include the first iteration iteration: 1 arr: [ 1, 2, 3, 5, 1, 2, 3, 4, 5 ].i think you some how forget it.

5

Yep, was on the same line at the “```” so was excluded from the output and started with the next line.

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.