JavaScript Es6 Array Feature [...Data, 0] "Spread Operator"

javascript es6 array feature [...data, 0] spread operator

...list is using the spread syntax to spread the elements of list. Let's assume the list is [1, 2, 3]. Therefore [...list, 0] becomes:

[1, 2, 3, 0]

Which has the same result as doing list.concat([0]);

This is not a feature of the array in ES6, it's just been used for array concatenation. It has other uses. Read more on MDN, or see this question.

spread operator (...) is creating extra fields in array in es6

Write it like this:

this.setState(prevState => {
   let data = [...prevState.generalPermitSelectedVehicles];
   data[indexes.rowIndex].origin = text;
   return {generalPermitSelectedVehicles: data};
})

Why its failing in your case?

Because when you do:

[...arr, (arr[index].origin=10)]

It will do two things, first it will update the value of origin at that index, second it will add 10 (returned 10 from ()) at the end of array also.

Check this snippet:

let arr = [{a:1}, {a:2}, {a:3}];arr = [...arr, (arr[1].a=500)];  //500 will get added in the last
console.log('new value', arr);

Javascript ES6 spread operator on undefined

This behavior is useful for doing something like optional spreading:

function foo(options) {
  const bar = {
    baz: 1, 
    ...(options && options.bar) // options and bar can be undefined
  } 
}

And it gets even better with optional chaining, which is in Stage 4 now (and already available in TypeScript 3.7+):

function foo(options) {
  const bar = {
    baz: 1, 
    ...options?.bar //options and bar can be undefined
  } 
}

a thought: its too bad it doesn't also work for spreading into an array

spread operator vs array.concat()

Well console.log(['one', 'two', 'three', 'four', 'five']) has the same result as well, so why use either here? :P

In general you would use concat when you have two (or more) arrays from arbitrary sources, and you would use the spread syntax in the array literal if the additional elements that are always part of the array are known before. So if you would have an array literal with concat in your code, just go for spread syntax, and just use concat otherwise:

[...a, ...b] // bad :-(
a.concat(b) // good :-)

[x, y].concat(a) // bad :-(
[x, y, ...a]    // good :-)

Also the two alternatives behave quite differently when dealing with non-array values.

How do I use the spread operator to replace a value in an array

Instead of finding and filtering it might be easier to just map over the array, and if the product id matches a search id update the quantity value of that product object, and return it, otherwise just return an unchanged object.

You can then update your state. This creates a new state object, preserves the old state, adds a new property for the cart, preserves the properties of the existing cart, and then adds the new updatedArray to products.

return {
  ...state,
  cart: {
    ...state.cart,
    products: updated
  }
};

const state={cart:{products:[{quantity:9,size:"XX-Large",_id:"61814f61efae17ff8c7d7a2c"},{quantity:1,size:"Medium",_id:"618152d8fe84f566364585f0"}],anotherProp1:1,anotherProp2:2}};

function updateItem(state, id) {

  const { products } = state.cart;

  const updated = products.map(product => {
    if (product._id === id) {
      return { ...product, quantity: product.quantity + 1 };
    }
    return product;
  });

  return {
    ...state,
    cart: {
      ...state.cart,
      products: updated
    }
  };

}

const id = '61814f61efae17ff8c7d7a2c';

const updatedState = updateItem(state, id);

console.log(updatedState);

---

Related Topics