This articles is created based on my own tweet posted on May 22, 2020
ES6 (ECMAScript 2015, the 6th edition) was finalized 5 years ago, and bro...
For further actions, you may consider blocking this person and/or reporting abuse
Also similar to spread is the rest operator - you can team it up destructuring to get properties out of objects:
This is great for React props which need to be passed to child components.
And then to shallow copy an object:
Also great in React for setting state or in a Redux reducer.
Yes, I've found it super useful too! Especially when I am trying to grab data from some API that returns a request with a JSON. Destructuring comes really handy to assign the data to variables and I love that!
The reason you might use
Array.prototype.slice.call()
or[].slice.call()
is because of lack support for IE forArray.from()
and[...]
(spread operator) so even its good to know, its kind of useless as "trick" . Anyway thank you for rest examples, good to refresh memory :)Ahhh IE. Web devs nowadays must be happier people that used to be.
Another example I thought about (well, this is the variant of the "string to array") -
One other reason I use spread is to conditionally add a key to an object,
I use this ALL THE TIME, you can use an empty object
{}
as well instead of nullI might end up using this, thanks Robin!
Instead of slice, Array.from can be useful too:
Array.from(document.querySelectorAll(".cat"))
This looks clean and intuitive too <3 Thank you for sharing!
When you are concating 2 arrays also it is a shallow copy. Right?
Yes, a good point! It doesn't recurse into nested arrays so it returns a new array with shallow copies.
This is all great!! Thanks for this collection!!
That last one, Collecting HTML Elements in an Array is excellent and immediately useful for me!