Filter VS splice: the Case of the unfulfilled Orders (PART 1)

Building an ecommerce store had its fair share of challenges, and one particular puzzle I faced was efficiently removing successfully placed orders from the shopping cart. In this blog post, I'll walk you through the journey of solving this coding puzzle.

The Challenge at Hand

As the development of your ecommerce store progresses, managing the shopping cart can became harder.
I wanted (needed) to Remove items that had already been successfully ordered from the cart.

Let us see the puzzle first

Let's imagine that the user has 10 items in his cart and processed the checkout.

  const cart = [{ id: 0, name: 'Item 0' },
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' },
  { id: 4, name: 'Item 4' },
  { id: 5, name: 'Item 5' },
  { id: 6, name: 'Item 6' },
  { id: 7, name: 'Item 7' },
  { id: 8, name: 'Item 8' },
  { id: 9, name: 'Item 9' },
  { id: 10, name: 'Item 10' }
]

For an unclear reason, the server accepted just 2 orders !

It returned the successful orders and asked the user to place his orders after a moment.
successful orders:

const orders = [{id:8}, {id : 5}]

Now we need to remove the items with ids 5 and 8 from the cart. Take a moment to ponder on this challenge 😊..

And my mind went to...

two ways.

1- We can combine filter with every.
We will create a new array which contains only the procuts that didn't get ordered.we can use filterto iterate on the cart array (to remove the ordered items).
each time it checks if the product id is not in any of the orders array(which mean that the order failed) with the help of every
every here iterates over the orders array and returns true if the order id is not in the cart array indicating that the order failed
we got something like this :

const failedOrders = cart.filter((product)=> orders.every((order)=> order.id !== product.id))
cart = failedOrders ;

2- We can combine forEach with splice.
It is more straightforward. We can iterate over orders. On each order, we take the Id and look for its index on the cart array with the help of findIndex
then remove that item from the cart using splice

orders.forEach((order)=>{
// Find the index of the ordered product in the cart
   const productIndex = products.findIndex((product) => order.id === product.id)
// Remove the ordered product from the cart using splice
 if (productIndex !== -1) {
   products.splice(productIndex,1)}
  })

I found 2 solutions but which one is better ?

I tested the two solutions and they worked well.
From a readability and simplicity perspective, I would prefer the 2nd. But from the performance perspective which one is better? and why?.
See you in PART 2