Hi everyone,
Section 10/10 review-loops presents the challenge to log the differences between two grocery lists.
I find there are array methods like filter() and includes() which can handle this, but we’re looking at loops in this lesson, so how do we use the loops we just learnt to solve this? If you tackled this, please share! There is no solution provided, my ‘solution’ does the job BUT goes the long way round AND mutates the original arrays which I’m not crazy about.
I specifically want to know how would you use loops to succinctly identify the differences, and can we achieve this without mutating our original arrays?
If you want my solution, please read on…
My first attempt used a nested for loop to compare all elements of array 1 (groceryList) with all elements of array 2 (groceryList2) using the inequality operator, then .push() the differences to a new array.
Of course, this did not work. My new array contained an element EVERY time the elements of groceryList and groceryList2 did not match, not just single instances, resulting in multiple duplicate elements!
My next attempt was successful, but there’s quite a bit of dinking around.
First, I used a nested for loop to compare groceryList with groceryList2, identify the matching items using the equality operator, and push the matches to a new array (matchingItems).
Then, I executed another nested for loop comparing matchingItems with groceryList and removed the element of any matches using the indexOf() and splice() methods
for (let i = 0; i < matchingItems.length; i++) {
for (let j = 0; j < groceryList.length; j++) {
if (matchingItems[i] === groceryList[j]) {
let index = groceryList.indexOf(groceryList[j])
groceryList.splice(index, 1);
}
}
}
I executed the same for loop again (that’s now a total of 3 nested for loops 
) substituting groceryList2 in place of groceryList.
The matching items are now removed from groceryList and groceryList2, only unique items remain.
Finally, I merged groceryList and groceryList2 into another new array (uniqueItems) using the .concat() method and there’s the list of differences, ready to log.
In summary, I’ve used groceryList and groceryList2 to identify the matching elements, contained those matches in my new matchingItems array, identified and removed those matches from both grocery lists and contained the unique elements in my new uniqueItems array. Two new arrays, one for matches, one for the all-important differences.
This seems like a long way round to get the differences, hence my asking for help. If you know a better way using loops, I’d love to hear it.
Also, now I have 4 lists, none of which contains all items. Surely irl we want the matching items too, just not duplicates. I did realise the indexOf()/splice() technique I used can solve this and output a single grocery list with all items from both lists but without duplicates.
for (let i = 0; i < groceryList.length; i++) {
for (let j = 0; j < groceryList2.length; j++) {
if (groceryList[i] === groceryList2[j]) {
let index = groceryList2.indexOf(groceryList2[j])
groceryList2.splice(index, 1);
}
}
}