I know you can copy an array with the spread operator:
const itemsArr = [...this.state.itemsArr];
and you can destructure an array that's an object key's value:
const { itemsArr } = this.state
Is there a way to combine them into one step? Pseudocode:
const { itemsArr } = [...this.state]
or
const { [...itemsArr] } = this.state
EDIT: Is there a way to combine them into one step, so as to avoid typing "itemsArr" twice?
It can be done by destructuring itemsArr from a copy of state:
const { itemsArr } = JSON.parse(JSON.stringify(this.state))
The strong point of this is that your nested objects are cloned, so your state.itemsArr is copied too and modifying itemsArr won't change the array in state.
The disadvantage is that if your state object contains functions, they won't be accessible using this method plus you can question the performance.
Another way to copy state is by using Object.assign:
const { itemsArr } = Object.assign({}, this.state)
With this you can access your functions inside of state but it makes a shallow copy, so state.itemsArr won't be cloned.
ECMAScript2018 actually has a spread operator that works with JSON objects:
const { itemsArr } = { ...this.state }
https://codesandbox.io/s/32qvzjy2op (look at your browser's console, the one in the tool is bad).
But then again, it only makes a shallow copy.
The best way would be to write/import a deepCopy function that clones the object with it's nested properties and functions.
Object.assign, didn't think of that
const {itemsArr: [...itemsArr]} = this.state;? You could also rename the variable:const {itemsArr: [...renamedArray]} = this.state;.const itemsArr = [...this.state.itemsArr]correct? Goal is to avoid typing "itemsArr" twice - I'll add that note to my question. Thanks!const {[...itemsArr]} = this.stateis a SyntaxError, though I don’t have the knowledge of the spec to explain why… Maybe, this could become valid syntax in the future.