Filter VS splice: the Case of the unfulfilled Orders (PART 1)
Published: 2024-01-03 16:41:37

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.
```js 
  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 !_

<img width="100%" style="width:100%" src="https://media1.tenor.com/m/qg324pNzm50AAAAC/server-is-fine-burn.gif">
It returned the successful orders and asked the user to place his orders after a moment.
successful orders: 
```js
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 [filter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)to 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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/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 :
```js
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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex)
then remove that item from the cart using [splice](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice)
```js
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_