Use of ternary operator inside filter and map method in javascript?-CodePudding

I have an cart object. I want to change the qty of a product in cart for which i have created a changeQty method inside which I am using filter method to find the respective product and then I am updating the qty.

If I pass other than 0 it works properly. But if I pass 0 as quantity to the changeQty method the product get's removed from the cart.

According to my knowledge filter works based on the return value. But here I am assigning qty to product.qty. And also If I use map instead of filter I am geting 0 in place of that product. So my doubt is what does product.qty = qty returns ?

let cart = [{
    id: 1,
    title: "Product 1",
    qty: 1
  },
  {
    id: 2,
    title: "Product 2",
    qty: 1
  },
]

const changeQty = (pid, qty) => {
  cart = cart.filter(product => product.id === pid ? product.qty = qty : product)
  console.log(cart);
}

changeQty(1, 0)

CodePudding user response：

Use map instead of filter. You can use spread syntax and overwrite the value of qty for the product that matches the id.

let cart = [{
    id: 1,
    title: "Product 1",
    qty: 1
  },
  {
    id: 2,
    title: "Product 2",
    qty: 1
  },
]

const changeQty = (pid, qty) => {
  cart = cart.map(product => product.id === pid ? { ...product, qty } : product)
  console.log(cart);
}

changeQty(1, 0)

CodePudding user response：

if I pass 0 as quantity to the changeQty method the product get's removed from the cart.

That's because the assignment of 0 to product.qty evaluates to a 0 return value for the filter callback. That is a falsy value, indicating the current cart item should be filtered out. In fact, you don't want to filter at all. On the contrary, you don't want to change the length of the cart array.

If your goal is to mutate the cart structure, then possibly you are looking for find instead of filter:

const cart = [{id:1,title:"Product 1",qty:1},{id:2,title:"Product 2",qty:1}];

const changeQty = (pid, qty) => {
  Object(cart.find(({id}) => id === pid)).qty = qty;
  console.log(cart);
}

changeQty(1, 0);

NB: the call to Object is to deal silently with a product that is not in the cart.

CodePudding user response：

You are modifying the source object which is very bad:

let cart = [{
    id: 1,
    title: "Product 1",
    qty: 1
  },
  {
    id: 2,
    title: "Product 2",
    qty: 1
  },
]

const changeQty = (pid, qty) => {
  cart.forEach(product => product.id === pid ? product.qty = qty : product)
  console.log(cart);
}

changeQty(1, 0)

That's why you are getting unexpected results

CodePudding user response：

Or you can do it with this one-liner:

let cart = [{id: 1,title: "Product 1",qty: 1},{id: 2,title: "Product 2",qty: 1}];

const changeQty = (pid, qty) =>( cart.forEach(p => p.id===pid && (p.qty=qty)), cart );

console.log(changeQty(1, 0));

As OP's intention was to change the input array cart the .forEach() methods presents itself as a suitable candidate.

I don't know how many cart items there might be with your p.id===pid. In my snippet they would all be changed by getting an updated qty property. Trincot provides an array.find() based solution that is probably more performant but will only affect the first cart item matching the specified pid.