splice method index confusion

Question

I know this sounds funny since I coded the solution myself but I'm having trouble understanding why this works after not seeing it for a while. The algorithm solves the "Inventory Update" question from freecodecamp, albeit with a failing test (Compare and update the inventory stored in a 2D array against a second 2D array of a fresh delivery. Update the current existing inventory item quantities (in arr1). If an item cannot be found, add the new item and quantity into the inventory array. The returned inventory array should be in alphabetical order by item.) The algorithm is as follows:

function updateInventory(arr1, arr2) {
    let newInv = [...arr1, ...arr2]
    //create single list of items only from both arrays
    let temp = newInv.flat().filter(item => typeof item === 'string')
    //create list of the index of all duplicate items
    let duplicates = temp.reduce((acc, item, index) => {
        if (temp.indexOf(item) != index){
            acc.push(index)
        }
        return acc
    }, [])
    //remove duplicate items
    for (let index in duplicates) {
        newInv.splice(index, 1)

    }
    //sort by alphabetical order
    newInv.sort((a,b) => {
        return a[1] > b[1] ? 1 : -1
    })
    return newInv
}
// Example inventory lists
var curInv = [
    [21, "Bowling Ball"],
    [2, "Dirty Sock"],
    [1, "Hair Pin"],
    [5, "Microphone"]
];

var newInv = [
    [2, "Hair Pin"],
    [3, "Half-Eaten Apple"],
    [67, "Bowling Ball"],
    [7, "Toothpaste"]
];

updateInventory(curInv, newInv);

As far as I understand the expected result should be:

[ [ 21, 'Bowling Ball' ],
  [ 2, 'Dirty Sock' ],
  [ 1, 'Hair Pin' ],
  [ 3, 'Half-Eaten Apple' ],
  [ 5, 'Microphone' ],
  [ 7, 'Toothpaste' ] ]

However, what is get is:

[ [ 67, 'Bowling Ball' ],
  [ 2, 'Dirty Sock' ],
  [ 2, 'Hair Pin' ],
  [ 3, 'Half-Eaten Apple' ],
  [ 5, 'Microphone' ],
  [ 7, 'Toothpaste' ] ]

which are the duplicate pairs of the elements it was meant to remove. I'm sure I may be missing something simple but I just don't get it.

Your help is greatly appreciated

Answer 1

There are two problems. The first is with the for loop

  let duplicates = [4, 6]

  for (let index in duplicates) {
        newInv.splice(index, 1)
    }

You're doing a for in not a for of

in loops over the indexes (in like in index..! :)), for over the values
If you log the index in the loop you will see 0,1 = the indexes of the elements in duplicates
Change it to for then it's 4,6 = the values of the elements in duplicates = the indexes of the items you want to delete. An alternative would be

duplicates.forEach(i => newInv.splice(i, 1))

The seconds problem is, that when you deleted the first item, the index of the second item changes :-) So it's not index 6 anmore but now 5. This can be solved by reversing the duplicates before looping and splicing, so starting with the higest index first and deleting 'from end to start'.

So this should give the requested result

function updateInventory(arr1, arr2) {
    let newInv = [...arr1, ...arr2]
      //create single list of items only from both arrays
    let temp = newInv.flat().filter(item => typeof item === 'string')
      //create list of the index of all duplicate items
    let duplicates = temp.reduce((acc, item, index) => {
        if (temp.indexOf(item) != index) {
          acc.push(index)
        }
        return acc
      }, []).reverse()
      //remove duplicate items
    for (let index of duplicates) {
      newInv.splice(index, 1)
    }
    //sort by alphabetical order
    newInv.sort((a, b) => {
      return a[1] > b[1] ? 1 : -1
    })
    return newInv
  }

  // Example inventory lists
var curInv = [
  [21, "Bowling Ball"],
  [2, "Dirty Sock"],
  [1, "Hair Pin"],
  [5, "Microphone"]
];

var newInv = [
  [2, "Hair Pin"],
  [3, "Half-Eaten Apple"],
  [67, "Bowling Ball"],
  [7, "Toothpaste"]
];


let result = updateInventory(curInv, newInv);

console.log(result);

And this would be my approach to solving the assignment

function updateInventory(curInv, newInv) {
    newInv.forEach(newItem => {
      let newItemName = newItem[1]      
      let inCurrent = curInv.find(currItem => currItem[1] === newItemName)
      if(!inCurrent) curInv.push(newItem)
    })
    return curInv.sort((a,b) => a[1].localeCompare(b[1]))
  }  

  // Example inventory lists
var curInv = [
  [21, "Bowling Ball"],
  [2, "Dirty Sock"],
  [1, "Hair Pin"],
  [5, "Microphone"]
];

var newInv = [
  [2, "Hair Pin"],
  [3, "Half-Eaten Apple"],
  [67, "Bowling Ball"],
  [7, "Toothpaste"]
];


let result = updateInventory(curInv, newInv);

console.log(result);